Xiaoyu Kang – Project 03 – Dynamic Drawing

sketch

//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.