Morphing grid

An animation born out of the discussion with a student on why we draw grids with rectangles and not with lines.
...clearly, it's so that I can't suggest we animate the lines independently.

Click to start the animation.

A grid whose lines rotate and dance left and right 

function setup() {
  createCanvas(400, 400);
  noLoop()
}

function mousePressed() {
  loop()
}

let t = 0
function draw() {
  background(220);
  
  function lineAnim(x1,y1, x2,y2, x3,y3, x4,y4, t) {
    if (t < 0.5) {
      line(x1, y1, lerp(x2, x3, t * 2), lerp(y2, y3, t * 2))
    } else {
      line(x3, y3, lerp(x1, x4, t * 2 - 1), lerp(y1, y4, t * 2 - 1))
    }
  }

  for (let i = 0; i < 40; i ++) {
    let x = i * width / 40
    let y = i * height / 40
    if (t < 1) {
      let t1 = t
      lineAnim(x, 0, x, height, 0, y, width, y, t1)
      lineAnim(0, y, width, y, width - x, height, width - x, 0, t1)
    } else if(t < 2) {
      let t1 = t - 1
      lineAnim(width - x, height, width - x, 0, width, height - y, 0, height - y, t1)
      lineAnim(width, height - y, 0, height - y, x, 0, x, height, t1)
    }
  }
  
  t = (t + 20 / 1000 / 3) % 2
}

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

Experiments tagged p5 (79/85)

Experiments tagged silly (3/3) →|

Experiments on this site (79/85)