DEV Community

Dominic Myers
Dominic Myers

Posted on • Originally published at drmsite.blogspot.com on

Sierpiński triangle

Sierpiński triangle

I was scrolling through TikTok a couple of evenings ago (I know, I'm probably far too old to do so, but now and again, there's gold!) and I came across the following video:

@flipperzer0 ♬ Levels - Live Session - Sarah Coponat

Anyway, inspired to give it a go, I worked up a p5 test, and it works!

const points = [ [-75, 130], [-150, 0], [-75, -130], [75, -130], [150, 0], [75, 130], [75, 130], ] const rand = (int) => Math.round(Math.random() * int) const width = 600 const height = 600 function setup() { createCanvas(width, height) noStroke() } function draw() { background(0) fill(255, 255, 255) text(points.length, 50, 50) points.forEach(point => { circle(point[0] + (width /2), point[1] + (height /2), 1) }) populateArray(10000, points) } const populateArray = (count, arr) => { for(let i = 0; i < count; i++){ const target = points[rand(6)] const source = points[points.length - 1] const point = [ Math.round((source[0] + (2/3) * (target[0] - source[0]))), Math.round((source[1] + (2/3) * (target[1] - source[1]))) ] if(points.indexOf(point) === -1){ points.push(point) }else{ console.info('Duplicate removed') } } } 
Enter fullscreen mode Exit fullscreen mode

For some unknown reason, and only every so often, the pattern goes wrong; does anyone have any idea why or how to fix it?

It's fixed now, you can find it here.

Top comments (0)