let x = 0;

let y = 0;

let z = 0;

​

// boxSize is half the actual size of the box (used for WEBGL coordinate system later in code)

​

// numSpheres is the number of sparkling spheres in the box

let boxSize = 100;

let numSpheres = 500;

​

// background hue animation variables

let blueHue = 0;

let speedX = 0.8;

​

function setup() {

  createCanvas(600, 600, WEBGL);

  frameRate(25);

}

​

function draw() {

  //   background color animation

  background(45, 15, blueHue);

  if (blueHue > 100 || blueHue < 0) {

    speedX *= -1;

  }

  blueHue = blueHue + speedX;

​

  //   box features/animation

  rotateY(frameCount * 0.01);

  rotateX(frameCount * 0.01);

  stroke(150);

  noFill();

  box(206);

  stroke(200);

​

  // sphere sparkling animation

  for (let i = 0; i < numSpheres; i++) {

    x = random(-boxSize, boxSize);

    y = random(-boxSize, boxSize);

    z = random(-boxSize, boxSize);

    push();

    translate(x, y, z);

    sphere(boxSize / 500);

    pop();

  }

}

​