Project-03-Dynamic Drawing

cyhan-03-project
function setup() {
    createCanvas(600,450);
    rectMode(CENTER);
}

function draw() {
  background(mouseX,mouseY,244);
  noStroke();

  //creating rectangles
  var w = 200;
  var h = 200;
  if(mouseX < width/2){
    w = (width/2 - mouseX) + 50;
  }else {
    h = (width/2 - mouseX) + 50
  }
  push();
  translate(300,225);
  rotate(radians(mouseX));
  fill(255,mouseY,mouseX);
  ellipse(50,100,100);
  fill(255,mouseX,mouseY);
  ellipse(100,100,100);
  fill(mouseY,255,mouseX);
  ellipse(150,100,100);
  fill(214,mouseY,mouseX);
  ellipse(200,100,100);
  fill(mouseY,mouseX,255);
  ellipse(250,100,100);
  fill(0,mouseY,mouseX);
  ellipse(300,100,100);
  pop();
  
  fill(255,mouseX, mouseY);
  rect(width/4, height/2,w,h);
  rect(width/2, height/4,w,h);
  rect(width/1.3, height/2,w,h);
  rect(width/2, height/1.3,w,h);
  stroke(1);
  fill(255);
  ellipse(width/4, height/2,w/2,h);
  ellipse(width/2, height/4,w/2,h);
  ellipse(width/1.3,height/2,w/2,h);
  ellipse(width/2, height/1.3,w/2,h);
  fill(0);
  ellipse(width/4, height/2,w/5,h);
  ellipse(width/2, height/4,w/5,h);
  ellipse(width/1.3,height/2,w/5,h);
  ellipse(width/2, height/1.3,w/5,h);
  
noStroke();  
fill(255,0,0);
ellipse(mouseX,mouseY,40);
ellipse(mouseX + 30,mouseY,40);
triangle(mouseX-20,mouseY,mouseX+50,mouseY,mouseX+15,mouseY + 60);
  
  
}

For this project, I wanted to create four blinking eyes that changed according to the location of the mouse. I also added multiple color changing circles that rotated around the center of the canvas as well as a heart cursor that allowed the viewer to keep track of their mouse.

Leave a Reply