Skip to content

Spinning squares

A recursive stack of squares turn from corner to corner in the square containing them

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES)
  frameCount = floor(random(30000))
}

function draw() {
  background(250, 240, 200);
  
  noFill()
  translate(200, 200)
  let r = 1/2
  let f = 1.25
  for (let i = 400, s = 1; i > 1 && r < 1; i = i * r, s = s * f) {
    rect(-i/2, -i/2, i, i)
    rotate(-floor(frameCount * s / 90) * 90)
    translate(i * (r - 0.5) * (sin(frameCount * s / 90 % 1 * 180 - 90)), -i/2)
    rotate(sin(frameCount * s / 90 % 1 * 90) ** 3 * 90)
    translate(i * r/2, i * r/2)
    rotate(floor(frameCount * s / 90) * 180)
  }
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/u_EqMOavI and https://mastodon.social/@bojidar_bg/113873971029259815)

Experiments tagged p5 (22/85)

Experiments on this site (22/85)