31: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); } })32:[] 2f:{"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"},{"id":147,"value":"viewof input = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"viewof randomize = Button(\"🎨 New Colors\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"scale = input.scale / 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"## Annex","pinned":false,"hidden":false,"mode":"md"},{"id":338,"value":"### Arguments for the canvas","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"num_shapes = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"mutable maxDepth = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"Angles: 0, 120 degrees and 240 degrees","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":369,"value":"scaleR = d3.scaleLinear().domain([0, height]).range([0.2, 2.7])","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"### Arguments for the colors","pinned":false,"hidden":false,"mode":"md"},{"id":285,"value":"steps = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"width_steps = width / steps","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":75,"value":"scaleBackground = d3.scaleLinear().domain(map_w_steps).range(colors.backgrounds)","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"scaleStroke = d3.scaleLinear().domain(map_w_steps).range(colors.strokes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"scaleFill = d3.scaleLinear().domain(map_w_steps).range(colors.fills)","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":2,"value":"import {p5, ParticleSystem} from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"import { form } from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"import { Button, Toggle, Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"chromotome = require(\"chromotome\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}