Square Projection

let seed;

​

function setup() {

  createCanvas(800, 800);

  noFill();

  stroke(0);

​

  seed = (random(Date.now()))

​

  background(32);

}

​

const render = arr => {

  beginShape();

  for (let [x, y, z] of arr) {

    vertex(x, y);

  }

  endShape(CLOSE);

}

​

function draw() {

  background(32, 64);

  translate(width / 2, height / 2);

​

  // Define a square in 3D (XY plane, at z = 0)

  const square3D = [

    [-100, -100, 0],

    [100, -100, 0],

    [100, 100, 0],

    [-100, 100, 0]

  ];

​

​

  const queue = []

  const renderAll = () => {

    for (let [c, p] of queue) {

      strokeWeight(2)

      stroke(c)

      render(p.map(x => project3D(x)))

    }

  }

​

  randomSeed(seed);

  const t = frameCount/60; // random(1234567);

  for (let i = 0; i < 0.5; i += 0.1) {

​

    const square3DBack = square3D.map(([x, y, z]) => ([x + cos(t+i) * 150, y, z - sin(t+i) * 50]))

    queue.push([lerpColor(color("aqua"), color("darkslategrey"), 1-i), square3DBack])

​

​

    const rotatedx = square3D.map(p => rotateX3D(p, t+i));

    queue.push([lerpColor(color("navy"), color("darkslategrey"), 1-i), rotatedx])

​

​

    const rotated = square3D.map(p => rotateY3D(p, sin(t+i) * TAU / 12));

    queue.push([lerpColor(color("deeppink"), color("darkslategrey"), 1-i), rotated])

  }

​

​

​

  renderAll()

}