Dynamic cubes

```
//Yingyang Zhou
//Section A
//yingyanz@andrew.cmu.edu
//Project-03
var cubeL = 50;
var dark = 150;
var angleA = 0;
var angleB = 0;
var angleC = 0;
var spacing = 50;
var i = 0;
function setup() {
createCanvas(640, 480);
background(0);
frameRate(30);
}
function draw() {
var x = 0;
var y = 0;
var speed = mouseX/width*4;
var colour = 150 +mouseX/width*255;
var dia = mouseX/width*20;
var l = 0;
//background change as mouse move
background(max(120, 200-colour), max(30, 200-colour), max(10, 200-colour));
noStroke();
// mouse path
fill(30, 30, 150)
ellipse(pmouseX,pmouseY, dia, dia);
if(mouseX < width & mouseY < height){
push();
translate(width/2, height/2);
rotate(radians(angleA))
fill(colour);
scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
fill(colour-dark);
quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
fill(colour-2*dark);
quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
angleA = angleA + speed;
pop();
push();
translate(width/2+2*cubeL, height/2+2*cubeL);
rotate(radians(angleB));
scale(0.8, 0.8);
fill(colour);
scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
fill(colour-dark);
quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
fill(colour-2*dark);
quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
angleB = angleB + 0.9*speed;
pop();
push();
translate(width/2-2*cubeL, height/2+2*cubeL);
rotate(radians(angleC));
scale(0.8, 0.8);
fill(colour);
scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
fill(colour-dark);
quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
fill(colour-2*dark);
quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
angleC = angleC + 1.1*speed;
pop();
push();
translate(width/2+2*cubeL, height/2-2*cubeL);
rotate(radians(angleB));
scale(0.8, 0.8);
fill(colour);
scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
fill(colour-dark);
quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
fill(colour-2*dark);
quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
angleB = angleB + 0.8*speed;
pop();
push();
translate(width/2-2*cubeL, height/2-2*cubeL);
rotate(radians(angleC));
scale(0.8, 0.8);
fill(colour);
scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
fill(colour-dark);
quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
fill(colour-2*dark);
quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
angleC = angleC + 1.2*speed;
pop();
push();
translate(width/2+5*cubeL, height/2);
rotate(radians(angleA));
scale(0.5, 0.5);
fill(colour);
quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
fill(colour-dark);
quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
fill(colour-2*dark);
quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
angleA = angleA + speed;
pop();
push();
translate(width/2-5*cubeL, height/2);
rotate(radians(angleA));
scale(0.5, 0.5);
fill(colour);
scale(constrain(mouseX/width, 0.8, 1.5), constrain(mouseX/width, 0.8, 1.5));
quadA = quad(x, y, x+cubeL, y-cubeL/2, x, y-cubeL, x-cubeL, y-cubeL/2);
fill(colour-dark);
quadB = quad(x, y, x, y+cubeL, x-cubeL, y+cubeL/2, x-cubeL, y-cubeL/2);
fill(colour-2*dark);
quadC = quad(x, y, x, y+cubeL, x+cubeL, y+cubeL/2, x+cubeL, y-cubeL/2);
angleA = angleA + speed;
pop();
//circles
i = i+50
for (var i = 0; i < 1000; i += 50){
noFill();
stroke(0, 0, 255);
strokeWeight(0.5);
alpha
ellipse(mouseX, mouseY, 150+i, 150+i);
}
}
}
```

The way to make this dynamic is using your mouse, I started from creating images that has kind of 3D affect. All the cube start from the same position, when the mouse moved, they’ll have a rotating speed which various, so they are going to end at different position eventually. When mouse move outside of canvas, it will turn to the circle image.