Sean Meng-Project- 03-Dynamic Drawing

hmeng Project-03

//Sean Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-03-Dynamic-Drawing

var angle = 0;
var mouth = 0;
var shark = 0;

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

function draw() {
//the color of the sea varies as the shark moves
    background(mouseX, 190, 200);
    fill(0)
    rect(0, 0, 250, 480)
    noStroke();

//bait
//When shark touches the bait, the sea turns to red
    fill(120)
    push();
    translate(640 - mouseX / 2, mouseY + 45);
    rotate(radians(angle));
    ellipse(0, 0, 30, 30);
    ellipse(0, 0, 10, mouseX * 90 / 300);
    pop();
    angle = angle + 5;
    rect(640 - mouseX / 2, mouseY + 45, 640 - mouseX / 5, 3)
    


//shark body
    fill(255);
    beginShape();
    vertex(mouseX, mouseY);
    vertex(mouseX - 250, mouseY);
    vertex(mouseX - 160, mouseY + 40);
    vertex(mouseX - 60, mouseY + 60);
    endShape(CLOSE);
//shark fin
    beginShape();
    vertex(mouseX - 80, mouseY);
    vertex(mouseX - 110, mouseY);
    vertex(mouseX - 120, mouseY - 50);
    endShape(CLOSE);

    beginShape();
    vertex(mouseX - 160, mouseY + 40);
    vertex(mouseX - 170, mouseY + 30);
    vertex(mouseX - 180, mouseY + 50)
    endShape(CLOSE);  

    beginShape();
    vertex(mouseX - 70, mouseY + 65);
    vertex(mouseX - 90, mouseY + 30);
    vertex(mouseX - 100 , mouseY + 100);
    endShape(CLOSE);      

//shark tail
    beginShape();
    vertex(mouseX - 230, mouseY + 5);
    vertex(mouseX - 320, mouseY - 40);
    vertex(mouseX - 280, mouseY + 5);
    vertex(mouseX - 320, mouseY + 39);
    endShape(CLOSE); 

//shark eye
    fill(0);
    ellipse(mouseX - 40, mouseY + 17, 10, 10);
    fill(255)
    ellipse(mouseX - 37, mouseY + 17, 5, 4);

//shark mouth appears when it gets out of the dark area
//shark mouth turns red and gets larger when it moves to the right
    if(mouseX > 250){
        fill(mouseX / 500 * 255, 0, 0);
        beginShape();
        vertex(mouseX - 34, mouseY + 35);
        vertex(mouseX - mouseX / 320 * 90, mouth)
        vertex(mouseX - 50, mouseY + 50);
        endShape(CLOSE); 
        mouth = mouseY - mouseX / 640 * 10 + 20
    }


}

In this project, I was interested in the relationship between different visual elements using interactive programming in p5js.