//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-03
var cir = 20;
var angle = 0;
function setup() {
createCanvas(480, 640);
}
function draw() {
//background color change as mouse moves down
background(400-mouseY,245,255);
//sun
//sun shows when the mouse moves to the top of the canvas
fill("yellow");
if (mouseY<=200) {
fill(255,242,122);
ellipse(50,20,200,200);
triangle(10,100,50,100,30,200);
triangle(40,60,100,30,150,200);
triangle(60,70,30,0,230,60);
triangle(50,20,0,0,200,0);
}
//sun disappears
if (mouseY>200) {
fill(400-mouseY,245,255);
}
//bubbles
fill("white");
//bubble gets bigger as they move up
ellipse(50,640-mouseY-30,cir+0.1*mouseY,cir+0.1*mouseY);
ellipse(100,640-mouseY+230,cir+0.1*mouseY,cir+0.1*mouseY);
ellipse(150,640-mouseY+70,cir+0.1*mouseY,cir+0.1*mouseY);
ellipse(270,640-mouseY+150,cir+0.1*mouseY,cir+0.1*mouseY);
ellipse(360,640-mouseY,cir+0.1*mouseY,cir+0.1*mouseY);
ellipse(300,640-mouseY+370,cir+0.1*mouseY,cir+0.1*mouseY);
ellipse(470,640-mouseY+270,cir+0.1*mouseY,cir+0.1*mouseY);
ellipse(160,640-mouseY+490,cir+0.1*mouseY,cir+0.1*mouseY);
ellipse(530,640-mouseY+520,cir+0.1*mouseY,cir+0.1*mouseY);
//jelly fish body
noStroke();
//color change on body
fill(190,900-mouseY,900-mouseY);
//moves vertically
ellipse(240,mouseY,180,140);
ellipse(180,mouseY+60,70,50);
ellipse(240,mouseY+70,70,50);
ellipse(300,mouseY+60,70,50);
//jelly fiish eyes
noStroke();
fill("white");
ellipse(190,mouseY,30,30);
ellipse(290,mouseY,30,30);
fill("grey");
ellipse(190,mouseY,20,20);
ellipse(290,mouseY,20,20);
//jelly fish blush
fill(224,196,218);
ellipse(190,mouseY+25,40,10);
ellipse(290,mouseY+25,40,10);
}
da
For this project, I was inspired by how the color of sea water changes from light to dark as it gets deeper. So I tried to create an image of a sea creature swimming in the ocean following the movement of the mouse. When the mouse moves down, the background color gets darker and some bubbles appears. When the mouse moves up the sun appears.