let gridSize = 10;

let maxSize;

let minBrightness = 60;

let maxBrightness = 245;

​

function setup() {

  createCanvas(400, 400, WEBGL);

  colorMode(HSB, 360, 100, 100); // HSV

  maxSize = width / gridSize; 

​

  for (let x = 0; x < gridSize; x++) {

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

      for (let z = 0; z < gridSize; z++) {

        let posX = x * maxSize;

        let posY = y * maxSize;

        let posZ = z * maxSize;

        cubes.push(new Cube(posX, posY, posZ));

      }

    }

  }

}

​

function draw() {

  background(200);

  strokeWeight(0.5);

  scale(0.415);

​

  // parallel projection

  ortho(-width / 2, width / 2, -height / 2, height / 2, 0, 5000);

​

  // camera rotate

  rotateX(radians(-25));

​

  // 2π/20s

  let rotationSpeed = TWO_PI / (40 * 60);

  rotateY(frameCount * rotationSpeed);

​

  for (let cube of cubes) {

    cube.update();

    cube.display();

  }

}

​

class Cube {

  constructor(x, y, z) {

    this.position = createVector(x, y, z);

    this.size = 0;

    this.waveSpeed = 0.1;

  }

​

  update() {

    // from -x,-y,-z to x,y,z

    let distance = this.position.mag();

    this.size = (sin(distance * 0.1 - frameCount * 0.3 * this.waveSpeed) + 1) * 0.5 * maxSize;

  }

​

  display() {

    let brightness = map(this.size, 0, maxSize, minBrightness, maxBrightness);

    let hue = 40; 

    let saturation = map(this.size, 0, maxSize, 30 , 3); 

    fill(hue, saturation, brightness); // setting HSV

​

    push();

    translate(

      this.position.x - (gridSize * maxSize) / 2,

      this.position.y - (gridSize * maxSize) / 2,

      this.position.z - (gridSize * maxSize) / 2

    );

    box(this.size);

    pop();

  }

}