Fanjie Jin-Project-03-Dynamic-Drawing

fjin

// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project-03-Dynamic Drawing

var rgb = 255 / 640;
var rgb2 = 255 / 480;
var angle = 0;
var size = 15;


function setup(){
    createCanvas(640,480);
}

function draw(){
//change the background color
    size = constrain(size, 10, 80)
    background(255 - mouseY * rgb, 255- mouseX * rgb2, 255);
  
//ellipse1
    if (mouseX > width / 2){
      rectMode(CENTER)
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(width / 2, height / 2);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse2       
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(width / 4, height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse3     
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(3 * width / 4, 3 * height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse4   
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate( width / 4, 3 * height / 4);
      rotate(radians(angle)); 
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
      
//ellipse5 
      fill(255, 255 - mouseY * rgb2, 255 - mouseX * rgb);
      noStroke();
      push();
      translate(3 * width / 4, height / 4);
      rotate(radians(angle));
      ellipse(150, 0, size, size);
      ellipse(-150, 0, size, size);
      ellipse(0, 150, size, size);
      ellipse(0, -150, size, size);
      ellipse(100, 100, size, size);
      ellipse(-100, 100, size, size);
      ellipse(-100, -100, size, size);
      ellipse(100, -100, size, size);
      pop();
}
  
    if (mouseX < width / 2){
      fill(255 - mouseX * rgb, 255- mouseY * rgb2, 100);
      noStroke();
      push();
      
//rectangle 1     
      translate(width / 2, height / 2);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 2
      noStroke();
      push();
      translate(width / 4, height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 3
      noStroke();
      push();
      translate(3 * width / 4 , height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 4
      noStroke();
      push();
      translate(width / 4, 3 * height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();
      
//rectangle 5
      noStroke();
      push();
      translate(3 * width / 4, 3 * height / 4);
      rotate(radians(angle));
      rect(150, 0, size, size);
      rect(-150, 0, size, size);
      rect(0, 150, size, size);
      rect(0, -150, size, size);
      rect(100, 100, size, size);
      rect(-100, 100, size, size);
      rect(-100, -100, size, size);
      rect(100, -100, size, size);
      pop();  
//Change the size of the object
}
    if (mouseX < width / 4){
      size += 1.5;  
}
//Change the size of the object  
    if (mouseX > width / 4 & mouseX < width / 2 ){
      size += -1.5;    
}
//Change the size of the object  
    if (mouseX > width / 2 & mouseX < width * 0.75){
      size += 1; 
}
//Change the size of the object 
    if (mouseX > width * 0.75){
      size -= 1;
}
//Change the speed of the object 
   if (mouseY > height / 2){
      angle += 2; 
}
//Change the speed of the object
   if (mouseY < height / 2){
      angle += 6;
}
//Change the speed of the object
   if (mouseX > width / 2){
      angle += 4; 
}
//Change the speed of the object
   if (mouseX < width / 2){
      angle += 2;
}
}

I have been experimenting to create a dynamic drawing that focuses on rotation. When mouse is moved on the canvas, the size and color of the object, as well as the speed and shapes would be changed.