29:null 2a:["$","title",null,{"children":"Droste effect, Genuary2024 | Irene de la Torre | Observable"}] 2f:Ta02,p5InstanceSketch = p5(function (sketch) { const shapes = []; const scale = Math.round((1 / copies) * 10) / 10; let buffer; const PHI = (1 + Math.sqrt(5)) / 2; const radius = Math.sqrt(0.5); for (var i = 0; i < 3; i++) { const d_limit = i === 3 ? 0.75 : 0.5; const d = Math.round(sketch.random(size.w * 0.4, size.w * d_limit)); const r = d / 2; let limits = { x: 0, y: 0 }; let color = colors.shapes[i]; const padding = r * 0.1; limits.x = [0, size.w]; limits.y = [0, size.h]; shapes.push({ x: Math.round(limits.x[0], limits.x[1]), y: Math.round(sketch.random(limits.y[0], limits.y[1])), d: d, r: r, color: color, speedX: Math.round(sketch.random(-0.05, 0.05) * 100) / 100, speedY: Math.round(sketch.random(-0.1, 0.5) * 100) / 100, limits: limits }); } sketch.setup = function () { var canvas = sketch.createCanvas(size.w, size.h); buffer = sketch.createGraphics(size.w, size.h); sketch.background(colors.bkg); }; sketch.draw = function () { sketch.background("white"); buffer.fill(colors.bkg); buffer.rect(0, 0, size.w, size.h); buffer.noStroke(); sketch.push(); sketch.translate(size.w / 2, size.h / 2); for (var i = 0; i < copies; i++) { shapes.forEach((d) => { drawShape(d, i); // move for next iteration updatePosition(d); }); } buffer.strokeWeight(16); buffer.stroke("white"); buffer.noFill(); buffer.rect(0, 0, size.w, size.h); // draw droste effect for (var i = 0; i < copies; i++) { const f = i / copies; const angle = i * PHI; const dist = f * radius; const rotation = sketch.map(sketch.mouseX, 0, size.w, 0, 180); const x = 0.5 + sketch.cos(angle * sketch.TWO_PI) * dist; const y = 0.5 + sketch.sin(angle * sketch.TWO_PI) * dist; sketch.push(); sketch.scale(1 / i); sketch.translate(-size.w / 2, -size.h / 2); sketch.translate(x, y); sketch.rotate((rotation * i) / copies); sketch.image(buffer, x, y, size.w, size.h); sketch.pop(); } sketch.pop(); }; function drawShape(d, index) { buffer.fill(d.color); buffer.circle(d.x, d.y, d.d); } function updatePosition(d) { if (d.x < d.limits.x[0] || d.x > d.limits.x[1]) d.speedX *= -1; if (d.y < d.limits.y[0] || d.y > d.limits.y[1]) d.speedY *= -1; if (d.d < d.r || d.d > d.r * 3) d.d *= -1; d.x += d.speedX; d.y += d.speedY; d.d += d.speedX / 100; } })30:[] 2d:{"id":"917bb6109fea02fb","slug":null,"title":"Droste effect, Genuary2024","thumbnail":"49ecf0b74e4421c705e32a9aac5ac240a47265fb59d5b9fca1ce35c52bdca8b1","access_level":"public","create_time":"$D2024-01-03T11:53:59.690Z","update_time":"$D2024-01-03T19:28:43.816Z","view_time":null,"first_public_time":"$D2024-01-03T19:30:27.877Z","fork":true,"stars":1,"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":452,"publish_version":null,"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,"subscribed":null,"forks":0,"collection":{"id":"5ac5d5776609fdcf","slug":"generative-design-exercises","title":"Generative Design","owner":{"id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre"}},"type":"notebook","body":{"title":"Droste effect, Genuary2024","cells":[{"id":0,"value":"# Droste effect, Genuary2024","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":350,"value":"viewof copies = Inputs.range([1, 50], { label: \"Copies\", step: 1, value: 8 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"image_composite = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"{\n image_composite.appendChild(p5InstanceSketch);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"size = ({ w: width, h: 800 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"colors = ({\n bkg: \"rgba(38, 42, 51, 0.20)\",\n shapes: [\n \"rgba(23, 212, 230, 0.2)\",\n \"rgba(225, 111, 81, 0.2)\",\n \"rgba(255, 185, 69, 0.2)\"\n ],\n shape: `rgba(255, 207, 14, 0.25)`,\n shape_stroke: \"rgba(255, 207, 14, 1)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"import { p5, ParticleSystem } from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"