2c:null 2d:["$","title",null,{"children":"Generalization of the Sierpinski triangle - Fractals v2 | Irene de la Torre | Observable"}] 32:T55b,p5(sketch => { let n = 0; let lastPoint = startPoints[n]; const hue = createPalette(); let rotation = 360 / sides; if (sides === 4) { rotation = 45; } else if (sides === 3) { rotation = 30 } sketch.setup = function() { sketch.createCanvas(width_graph, height, sketch.WEBGL); sketch.ortho(); sketch.colorMode(sketch.HSB, 360, 100, 100, 100); sketch.fill(0); sketch.noStroke(); sketch.background(0, 0, 0, 100); sketch.angleMode(sketch.DEGREES); // sketch.translate(-width_graph / 2, -height / 2, 0); // in webgl p5 draws from the middle sketch.rotate(rotation); // draw original points for (var i = 0; i < startPoints.length; i++) { sketch.fill(100); sketch.ellipse(startPoints[i].x, startPoints[i].y, r); } }; sketch.draw = function() { const ran = Math.round(Math.random()); const thisColour = sketch.color(hue[ran].h, hue[ran].s, hue[ran].b, 10); sketch.rotateZ(rotation); if (n <= iterations) { const nPoints = createIterations(lastPoint); for (var i = 0; i < nPoints.length; i++) { // sketch.rotateZ(rotation); sketch.fill(thisColour); sketch.ellipse(nPoints[i].x, nPoints[i].y, r / 2); } lastPoint = nPoints[nPoints.length - 1]; } } })33:[] 30:{"id":"cad5e230eb3906b8","slug":"generalization-of-the-sierpinski-triangle-fractals","title":"Generalization of the Sierpinski triangle - Fractals v2","thumbnail":"b31309331f3bec1e207ccd8ef07d934f659bf1a78504d739c4a1d82279778212","access_level":"public","create_time":"$D2020-04-28T18:33:18.119Z","update_time":"$D2020-11-12T16:21:02.881Z","view_time":null,"first_public_time":"$D2020-04-28T19:20:37.995Z","fork":{"id":"68620b5c7a8e5a74","slug":"fractals","title":"Generalization of the Sierpinski triangle - Fractals","owner":{"id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre"}},"stars":0,"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":662,"publish_version":662,"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":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"4c47031b73e1a8a2","slug":"p5-js","title":"P5.js","owner":{"id":"006f4a94220e8098","login":"irenedelatorre","name":"Irene de la Torre"}},"type":"notebook","body":{"title":"Generalization of the Sierpinski triangle - Fractals v2","cells":[{"id":0,"value":"md`# Generalization of the Sierpinski triangle - Fractals v2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":654,"value":"md`## Using p5.js and WebGL`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":560,"value":"md`Inspired by https://twitter.com/CentrlPotential/status/1250172108811927552`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"viewof nSides = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"sides = nSides.sides","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"md`## Data points`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"startPoints = calculatePolygon();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":135,"value":"function createIterations(lastPoint) {\n const thesePoints = [];\n \n let prevPoint = lastPoint;\n let p = null;\n \n for (let i = 0; i < iterations; i++) {\n const n = randomIntFromInterval(0, startPoints.length - 1);\n const random = startPoints[n];\n \n if (p !== n) {\n const px = Math.round(random.x + (prevPoint.x - random.x) / 2);\n const py = Math.round(random.y + (prevPoint.y - random.y) / 2);\n \n const thisPoint = {\n x: px,\n y: py\n }\n \n thesePoints.push(thisPoint);\n prevPoint = thisPoint;\n p = n;\n \n }\n\n }\n \n return thesePoints;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":340,"value":"iterations = nIterations();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"function nIterations() {\n let thisIterations = 500;\n if (sides === 5) {\n thisIterations = 1000;\n } else if (sides === 6) {\n thisIterations = 1500;\n } else if (sides > 7) {\n thisIterations = 3000;\n } \n \n return thisIterations;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"md`## Constructor`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"r = 3;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"height = heightWidth()[1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"width_graph = heightWidth()[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"margin = 2 * width_graph / 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":265,"value":"function heightWidth() {\n let thisHeight = 750;\n let thisWidth = width;\n \n if (thisWidth > thisHeight) {\n thisWidth = thisHeight;\n } else {\n thisHeight = thisWidth;\n }\n \n return [thisWidth, thisHeight]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":443,"value":"angle = 2 * Math.PI / sides;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":446,"value":"radius = (width_graph - margin) / 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"function calculatePolygon() {\n const points = [];\n\n for (var i = 0; i < sides; i++) {\n const x = Math.round(Math.cos(i * angle) * radius);\n const y = Math.round(Math.sin(i * angle) * radius);\n\n points.push({\n x: x,\n y: y\n })\n }\n \n return points;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"// from https://stackoverflow.com/questions/4959975/generate-random-number-between-two-numbers-in-javascript\n\nfunction randomIntFromInterval(min, max) {\n return Math.floor(Math.random() * (max - min + 1) + min);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"function createPalette() {\n const mainHue_chromatic = randomIntFromInterval(0, 360);\n \n const colours = [{\n h: mainHue_chromatic,\n s: randomIntFromInterval(80, 100),\n b: randomIntFromInterval(80, 95)\n }, {\n h: mainHue_chromatic,\n s: randomIntFromInterval(60, 80),\n b: randomIntFromInterval(95, 100)\n }]\n \n return colours\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"md`## JavaScript Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"md`Import p5 library`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"import {p5} from \"@tmcw/p5\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"