31: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]; } } })32:[] 2f:{"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"},{"id":654,"value":"md`## Using p5.js and WebGL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"md`Inspired by https://twitter.com/CentrlPotential/status/1250172108811927552`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"viewof nSides = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"sides = nSides.sides","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`## Data points`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"startPoints = calculatePolygon();","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":340,"value":"iterations = nIterations();","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":83,"value":"md`## Constructor`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"r = 3;","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = heightWidth()[1]","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"width_graph = heightWidth()[0]","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"margin = 2 * width_graph / 12","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":443,"value":"angle = 2 * Math.PI / sides;","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"radius = (width_graph - margin) / 2;","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":80,"value":"md`## JavaScript Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`Import p5 library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import {p5} from \"@tmcw/p5\";","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}