Yingyang Zhou-Project-03-Dynamic-Drawing

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.