Circle shifting

This was made for a programming exercise in which I presented a simplified version of the code and asked students to adapt it to recreate the exact effect: including the order of sliding and the fact that circles don't blink in and out of existence.

(Result of the exercise: it's easy to see the effects you need to replicate, but hard to figure out the tricks used 😅)

A grid of circles that slide up/right. First, even columns, the even rows, then odd columns, then odd rows.

See the code 
function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(50);
  noStroke()
  
  let t = millis() / 1000 / 2 % 4
  for (let i = -1; i < 10; i ++) {
    for (let j = 0; j < 11; j ++) {
      if (t < 1) {  
        circle(i * 40+20, j * 40+20 - 40 * t * (i % 2), 30)
      } else if (t < 2) {
        circle(i * 40+20 + 40 * (t-1) * (j % 2), j * 40+20, 30)
      } else if (t < 3) {
        circle(i * 40+20, j * 40+20 - 40 * (t - 2) * (1 - i % 2), 30)
      } else if (t < 4) {
        circle(i * 40+20 + 40 * (t-3) * (1 - j % 2), j * 40+20, 30)
      }
    }
  }
}

(Originally seen at https://editor.p5js.org/bojidar-bg/sketches/M570_qj3f)

Experiments tagged p5 (81/85)

Experiments on this site (81/85)