Aaron Lee- Project-03- Dynamic Drawing

sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-03-Dynamic Drawing
*/

//variables

   var x = 0;
   var y = 100;

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


function draw() {
 
   background(0);
   stroke(0);
   fill(255, 204, 0);
   
   if (mouseY < (height / 2)) {
         fill(0);  
      }
   rect(10, 10, 30, 30);
   textSize(30);
   text('touch!', 40, 40);//if mouse is located on bottom portion of canvas, the text lights 

    fill(0);
   if (mouseY < (height / 2)) {
         fill(255, 204, 0);
      }
   rect(440, 600, 30, 30);
   textSize(30);
   text('touch!', 350, 630);//if mouse is located on top portion of canvas, the text lights

   push();

   translate(mouseX, mouseY);
   scale(mouseX/100, mouseY/100); 
   noFill();
   stroke(255);
   rotate(radians(x));
   rect(-50, -50, y, y);//scale of the rectangle changes following the movement of mouse

   x = x + mouseX/25;

   pop(); 

   stroke(255);

   //lines from top
   line(0, 0, mouseX, mouseY);
   line(40, 0, mouseX, mouseY);
   line(80, 0, mouseX, mouseY);
   line(120, 0, mouseX, mouseY);
   line(160, 0, mouseX, mouseY);
   line(200, 0, mouseX, mouseY);
   line(240, 0, mouseX, mouseY);
   line(280, 0, mouseX, mouseY);
   line(320, 0, mouseX, mouseY);
   line(360, 0, mouseX, mouseY);
   line(400, 0, mouseX, mouseY);
   line(440, 0, mouseX, mouseY);
   line(480, 0, mouseX, mouseY);
     //lines from right
   line(width, 40, mouseX, mouseY);
   line(width, 80, mouseX, mouseY);
   line(width, 120, mouseX, mouseY);
   line(width, 160, mouseX, mouseY);
   line(width, 200, mouseX, mouseY);
   line(width, 240, mouseX, mouseY);
   line(width, 280, mouseX, mouseY);
   line(width, 320, mouseX, mouseY);
   line(width, 360, mouseX, mouseY);
   line(width, 400, mouseX, mouseY);
   line(width, 440, mouseX, mouseY);
   line(width, 480, mouseX, mouseY);
   line(width, 520, mouseX, mouseY);
   line(width, 560, mouseX, mouseY);
   line(width, 600, mouseX, mouseY);
   line(width, 640, mouseX, mouseY);
        //lines from left
   line(0, 40, mouseX, mouseY);
   line(0, 80, mouseX, mouseY);
   line(0, 120, mouseX, mouseY);
   line(0, 160, mouseX, mouseY);
   line(0, 200, mouseX, mouseY);
   line(0, 240, mouseX, mouseY);
   line(0, 280, mouseX, mouseY);
   line(0, 320, mouseX, mouseY);
   line(0, 360, mouseX, mouseY);
   line(0, 400, mouseX, mouseY);
   line(0, 440, mouseX, mouseY);
   line(0, 480, mouseX, mouseY);
   line(0, 520, mouseX, mouseY);
   line(0, 560, mouseX, mouseY);
   line(0, 600, mouseX, mouseY);
   line(0, 640, mouseX, mouseY);
      //lines from bottom
   line(0, height, mouseX, mouseY);
   line(40, height, mouseX, mouseY);
   line(80, height, mouseX, mouseY);
   line(120, height, mouseX, mouseY);
   line(160, height, mouseX, mouseY);
   line(200, height, mouseX, mouseY);
   line(240, height, mouseX, mouseY);
   line(280, height, mouseX, mouseY);
   line(320, height, mouseX, mouseY);
   line(360, height, mouseX, mouseY);
   line(400, height, mouseX, mouseY);
   line(440, height, mouseX, mouseY);
   line(480, height, mouseX, mouseY);
}

I tried to make more user interactive animation with textual instruction.