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)