Jina Lee – Project-03

For this assignment, I used a fish for my main theme. As the fish food gets closer to the bowl, the view zooms in. Also, the fish rotates  when the fish food gets closer to the bowl. The box tilts towards the fish bowl as soon as it hits the top of the fish bowl. In addition, as the mouse moves down, the background changes from dark to light. It took me a long time to understand how to use the if statements properly. I enjoyed this project. In the future, I want to be able have the fish bowl get bigger as the mouse moves. 

sketch

//Jina Lee
//Section E
//jinal2@andrew.cmu.edu
//Project-03

// variables
var fishX = 50;
var fishY = 20;
var fbX = 60;
var fbY = 90;
// background color
var rColor = 70;
var gColor = 70;
var bColor = 130;

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

function draw() {
    // background changes color as mouse moves up and down
    var rColor1 = min(mouseY + rColor, 244);
    var gColor1 = min(mouseY + gColor, 244);
    var bColor1 = min(mouseY + bColor, 150);
    // by manipulating rColor, gColor, and bColor based on mouseY position
    // background is random
    background(rColor1, gColor1, bColor1);

    // fishbowl
    noStroke();
    fill(131, 172, 219);
    // once the mouse is past 150 on y axis - the fish bowl gets bigger
    if (mouseY >= 200){
        ellipse(fbX * 4, fbY * 5, 450, 450);
        rect(fbX / 2, fbY * 2, fbX * 7, fbY + 50, 20);
    }
    // fishbowl when it is not past 150 on y axis
    ellipse(fbX * 4, fbY * 5, 350, 350);
    rect(fbX + 5, fbY * 3, fbX * 5.8, fbY + 10, 20);

    // goldfish body
    noStroke();
    fill(214, 135, 53);
    // what happens when mouse goes past 200 on y axis
    if (mouseY >= 200) {
        // movement of goldfish when mouse is past 200 on y axis
        push();
        // the fish gets bigger to seem like zooming in
        scale(1.2);
        // the fish starts moving away from the mouse
        rotate(radians(mouseY / 70));
        // goldfish body
        ellipse(fishX * 2.2, fishY * 15, 30, 15);
        ellipse(fishX * 3, fishY * 15, fishX * 1.5, fishX * 1.5);
        triangle(fishX * 3, fishY * 15, fishX * 3.5, fishY * 18, fishX * 2,
                 fishY * 18);
        // goldfish face
        noStroke();
        fill(94, 94, 94);
        ellipse(fishX * 3, fishY * 14, 10, 10);
        // goldfish scales
        noFill();
        stroke(94, 94, 94);
        strokeWeight(2);
        arc(fishX * 2.84, 315, 15, 15, PI, PI / 3);
        arc(fishX * 3.15, 320, 15, 15, PI, PI / 3);
        arc(fishX * 3.06, 306.2, 15, 15, PI, PI / 2);
        pop();
    }

    // what happens when mouse stays between 199 on y axis
    if (mouseY <= 199) {
        // goldfish stays still when mouse go stays between 199 on y axis
        noStroke();
        //goldfish body
        ellipse(fishX * 2.2, fishY * 20, 30, 15);
        ellipse(fishX * 3, fishY * 20, fishX * 1.5, fishX * 1.5);
        triangle(fishX * 3, fishY * 20, fishX * 3.5, fishY * 23, fishX * 2, fishY * 23);
        // goldfish face
        noStroke();
        fill(94, 94, 94);
        ellipse(fishX * 3, fishY * 19, 10, 10);
        // goldfish scales
        noFill();
        stroke(94, 94, 94);
        strokeWeight(2);
        arc(fishX * 2.82, 414, 15, 15, PI, PI / 3);
        arc(fishX * 3.1, 410, 15, 15, PI, PI / 3);
        arc(fishX * 3.07, 421, 15, 15, PI, PI / 2);
        pop();
    }

    // fishfood box
    //the fishfood box position is slightly slanted
    translate(mouseX - 70, mouseY - 150);
    rotate(-50, -50, 55, 55);
    // when the mouse goes past 200 on y axis - fishfood tilts the opposite way
    if (mouseY >= 200) {
        rotate(-26, -26, 0, 0);
        translate(5, 0);
        // fishfood pebbles show after mouse goes past 200 on y axis
        fill(94, 77, 54);
        ellipse(fbX / 2, fbY / 1.5, 20, 20);
        ellipse(fbX / 1.8, fbY, 20, 20);
        ellipse(fbX / 9, fbY, 20, 20);
    }

    // box
    noStroke();
    fill(176, 56, 55);
    rect(50, 40, 125, 200, 10, 10, 10, 10);
    // logo
    fill(94, 94, 94);
    rect(fbX, fbY + 10, 100, 30);
    rect(fbX, 140, fbX + 40, 90);
    fill(214, 135, 53);
    ellipse(fbX + 50, 180, 40, 40);
    triangle(fbX * 2, 190, 110, 210, 140, 200);
}