const speed = 20;

const cubes = [];

​

function setup() {

  angleMode(DEGREES);

  createCanvas(400, 400);

  frameRate(100);

​

  for (let x = 0; x < 200; x++)

    for (let y = 0; y < 65; y++) {

      cubes.push([x, y, Math.floor(noise(x / 10, y / 10) * 10)]);

    }

}

​

function draw() {

  background("#449EFF");

​

  noStroke();

​

  for (const [i, cube] of cubes

    .slice(

      ((frameCount % 20) / speed) * 65,

      ((frameCount % 20) / speed) * 65 + 65 * 70

    )

    .entries()) {

    let faces = 0x111;

    if (i + 1 < 75 * 65 && cubes[i + 1].z != cube.z) faces--;

    cubes[i][0] -= 10 / speed;

    drawCube(...cube, faces);

  }

}

​

function drawCube(cx, cy, cz, faces = 0x111) {

  let color;

​

  if (cz < 3) {

    cz = 2;

    color = [10, 50, 200];

  } else {

    color = [cx * 3, cy * 3, cz * 3];

  }

​

  const x = 130 + cx * cubeSize * sin(60) - cy * cubeSize * sin(60);

​

  const y =

    -110 + cx * cubeSize * cos(60) + cy * cubeSize * cos(60) - cz * cubeSize;

​

  // Left

  if (faces & 0x001) {

    fill(color);

​

    beginShape();

    vertex(x, y);

    vertex(x, y + cubeSize);

    vertex(x - cubeSize * sin(60), y + cubeSize * cos(60));

    vertex(x - cubeSize * sin(60), y - cubeSize * cos(60));

    endShape(CLOSE);

  }

​

  // Right

  if (faces & 0x010) {

    fill(color.map((c) => c - 20));

​

    beginShape();

    vertex(x, y);

    vertex(x, y + cubeSize);

    vertex(x + cubeSize * sin(60), y + cubeSize * cos(60));

    vertex(x + cubeSize * sin(60), y - cubeSize * cos(60));

    endShape(CLOSE);

  }

​

  // Top

  if (faces & 0x100) {

    fill(color.map((c) => c + 20));

​

    beginShape();

    vertex(x, y);

    vertex(x + cubeSize * sin(60), y - cubeSize * cos(60));

    vertex(x, y - cubeSize * cos(60) * 2);

    vertex(x - cubeSize * sin(60), y - cubeSize * cos(60));

    endShape(CLOSE);

  }

}

​