2d:null 2e:["$","title",null,{"children":"Almost a Sierpinski | Irene de la Torre | Observable"}] 33:T5ac,p5((sketch) => { let maxDepth = input.maxDepth; let scale = input.scale / 10; let r = height / 6; let dist = r * 1.5; let t = 8; sketch.setup = function () { sketch.createCanvas(width, height); sketch.background(scaleBackground(sketch.mouseX)); sketch.noStroke(); }; sketch.draw = function () { r = (scaleR(sketch.mouseY) * height) / 6; const color_fill = sketch.color(scaleFill(sketch.mouseX)); const color_stroke = sketch.color(scaleStroke(sketch.mouseX)); color_fill.setAlpha(200); color_stroke.setAlpha(200); sketch.background(scaleBackground(sketch.mouseX)); sketch.push(); sketch.translate(width / 2, height / 1.7); sketch.rotate(-Math.PI / 2); drawFractal(color_fill, maxDepth, "fill"); drawFractal(color_stroke, maxDepth - 2, "strokes"); sketch.pop(); t = t - 1; }; function iterate(depth) { for (var i = 0; i < num_shapes; i++) { sketch.push(); sketch.rotate(angles[i]); sketch.translate(dist, 0); sketch.scale(scale, scale); sketch.circle(0, 0, r); if (depth > 0) iterate(depth - 1); sketch.pop(); } } function drawFractal(color, this_maxDepth, type) { if (type === "fill") { sketch.fill(color); sketch.noStroke(); } else { sketch.stroke(color); sketch.strokeWeight(15); sketch.noFill(); } sketch.circle(0, 0, r); iterate(this_maxDepth); } })34:[] 31:{"id":"05bc95c694371eee","slug":"almost-sierpinski","title":"Almost a Sierpinski","thumbnail":"7603907244f35fa50a581de5504b1848bee00d4b23a4568ed87adab6dd2e11dc","access_level":"public","create_time":"$D2021-07-24T17:05:43.737Z","update_time":"$D2021-07-25T19:09:13.507Z","view_time":null,"first_public_time":"$D2021-07-25T18:09:18.721Z","has_unpublished_edits":null,"fork":{"id":"df38094bc9089946","slug":"processing-p5-js","title":"Processing (p5.js)","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":11,"starred":false,"owner":{"type":"team","id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":"starter_2024"},"version":413,"publish_version":413,"role":null,"authored":false,"authors":[{"type":"individual","id":"cf230089d660f755","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":null}],"members":[{"type":"individual","id":"cf230089d660f755","login":"irenedelatorre","name":"Irene de la Torre","avatar_url":"https://avatars-next.observableusercontent.com/0d9b3a93c0212a1910f2dbe7e50e487d664f9ca30862ec468fd7110607304a0c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"5ac5d5776609fdcf","slug":"generative-design-exercises","title":"Generative Design","owner":{"id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre"}},"type":"notebook","body":{"title":"Almost a Sierpinski","cells":[{"id":0,"value":"# Almost a Sierpinski\n\nFrom the book *Playing With Chaos* by Keith Peters ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"viewof input = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"viewof randomize = Button(\"🎨 New Colors\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"scale = input.scale / 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"## Annex","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"### Arguments for the canvas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"num_shapes = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"mutable maxDepth = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"Angles: 0, 120 degrees and 240 degrees","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"angles = [\n 0,\n Math.round((10 * (Math.PI * 2)) / 3) / 10,\n Math.round((10 * (Math.PI * 4)) / 3) / 10\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"scaleR = d3.scaleLinear().domain([0, height]).range([0.2, 2.7])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"### Arguments for the colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"steps = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"width_steps = width / steps","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"map_w_steps = {\n const steps_n = [];\n for (var i = 0; i < steps; i++) {\n steps_n.push(width_steps * i);\n }\n return steps_n;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"Seen in https://observablehq.com/@saneef/037-shapes-on-a-quadtree[https://observablehq.com/@saneef/037-shapes-on-a-quadtree]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"colors = {\n randomize;\n const names = [];\n const backgrounds = [];\n const strokes = [];\n const fills = [];\n\n for (var i = 0; i < steps; i++) {\n const palette = chromotome.getRandom();\n const background = palette.background || \"hsl(0, 0%, 95%)\";\n const stroke = palette.stroke || \"hsl(0, 0%, 5%)\";\n const fill =\n palette.colors.filter((c) => c != background)[0] || \"hsl(0, 0%, 5%)\";\n names.push(palette.name);\n backgrounds.push(background);\n strokes.push(stroke);\n fills.push(fill);\n }\n\n return { names, backgrounds, strokes, fills };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"scaleBackground = d3.scaleLinear().domain(map_w_steps).range(colors.backgrounds)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"scaleStroke = d3.scaleLinear().domain(map_w_steps).range(colors.strokes)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"scaleFill = d3.scaleLinear().domain(map_w_steps).range(colors.fills)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import {p5, ParticleSystem} from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"import { Button, Toggle, Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"chromotome = require(\"chromotome\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"