var rad = 10;

var angle = 0;

var spacing = 20;

var xDim = 10;

var yDim = 10;

var r, g, b;

var design;

var x, y;

var spacingChange = 0.15;

var angleChange = 0.6;

​

var w = 100;

var hyp;

​

function setup() {

  createCanvas(400, 400, WEBGL);

  background(0)

  design = createGraphics(400, 400);

​

  hyp = sqrt(sq(w) + sq(w));

​

}

​

function draw() {

  background(0);

​

  swirl();

  cube();

​

}

​

function swirl() {

​

  push();

  colorMode(RGB);

​

  //translate(width/2,height/2);

  x = rad + spacing * cos(angle);

  y = rad + spacing * sin(angle);

​

  r = map(sin(frameCount / 100), -1, 1, 0, 255);

  g = map(cos(frameCount / 100), -1, 1, 0, 255);

  b = map(sin(frameCount / 150), -1, 1, 0, 255);

​

  design.stroke(r, g, b);

  design.fill(r, g, b);

  design.ellipse(x + 200, y + 200, xDim, yDim);

​

  if (x < 2 * hyp) {

    spacing += spacingChange;

    angle += angleChange;

  } else {

    spacing = 20;

    angle = 0;

  }

​

  pop();

}

​

function cube() {

​

  push();

  noStroke();

​

  texture(design);

  translate((width / 5) * cos(frameCount / 100), (height / 5) * sin(frameCount / 100), (width / 2) * cos(frameCount / 150));

​

  rotateX(a);

  rotateY(a);

  rotateZ(a);

​

  box(w);

​

  a += 0.003;

​

  pop();

}

​

function keyReleased() {

  print(key);

​

  if (key == '1') spacingChange += 0.05;

  if (key == '2') spacingChange -= 0.05;

  if (key == '3') angleChange += 0.2;

  if (key == '4') angleChange -= 0.2;

}