var gridSz;

var oscillate = false;

var zoom = false;

​

var maxBoxSz;

var minBoxSz;

var zTranslate;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

​

  boxSz = 320;

  gridSz = boxSz / 8 ;

​

  maxBoxSz = 720;

  minBoxSz = 200;

​

  zTranslate = -boxSz;

​

}

​

function draw() {

  background(0);

​

  translate(0, 0, zTranslate);

​

  push();

  rotateY(frameCount * 0.01);

  rotateZ(frameCount * 0.0125);

  rotateX(frameCount * 0.02);

​

  var radius = boxSz - (boxSz / 10);

​

  for (var x = -boxSz + gridSz; x <= boxSz - gridSz; x += gridSz) {

    for (var y = -boxSz + gridSz; y <= boxSz - gridSz; y += gridSz) {

      for (var z = -boxSz + gridSz; z <= boxSz - gridSz; z += gridSz) {

​

        var d = dist(0, 0, 0, x, y, z);

        if ((d > radius - gridSz) && (d < radius)) {

          push();

          translate(x, y, z);

          box(gridSz);

          pop();

        }

      }

    }

  }

  pop();

​

  if (oscillate) {

    boxSz = map(sin(frameCount * 0.025), -1, 1, minBoxSz, maxBoxSz);

​

  }

​

  if (zoom) {

    minBoxSz = 320; //420;

    maxBoxSz = 720; //1024;

    zTranslate = 640;

  } else {

    minBoxSz = 320;

    maxBoxSz = 720;

    zTranslate = -400;

​

  }

​

}

​

function mousePressed() {

  oscillate = !oscillate;

​

}

​

function keyPressed() {

  zoom = !zoom;

return false; 

}

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}