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.