Robert Oh Project-03-Dynamic-Drawing

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-03-Dynamic-Drawing

//assigning variables
var i = 0;
var eyes_dir = 0;
var a = 0;
var b = 0;
var col = 0;

//function to make the panda figures
function panda(x, y, eyes, a) {

    //ears
    fill(0);
    ellipse(x - a*25, y - a*30, a*40, a*30);
    ellipse(x + a*25, y - a*30, a*40, a*30);

    //body
    fill(0);
    ellipse(x, y + a*60, a*100, a*100);
    fill(255);
    ellipse(x, y, a*90, a*80);
    ellipse(x, y + a*60, a*80, a*80);
    fill(0);
    strokeWeight(5);
    quad(x - a*5, y + a*55, x - a*3, y + a*55, x + a*5, y + a*65, x + a*3, y + a*65);
    quad(x + a*5, y + a*55, x + a*3, y + a*55, x - a*5, y + a*65, x - a*3, y + a*65);

    //eyes
    noStroke();
    push();
    translate(x - 20, y - 5);
    rotate(radians(-60))
    ellipse(0, 0, a*30, a*20);
    pop();
    push();
    translate(x + 20, y - 5);
    rotate(radians(60))
    ellipse(0, 0, a*30, a*20);
    pop();
    fill(255);
    ellipse(x - 15 + eyes, y - 10, a*5, a*5);
    ellipse(x + 15 + eyes, y - 10, a*5, a*5);

    //nose + mouth
    fill(0);
    ellipse(x, y + 7, a*5, a*5);

    //what happens when the mouse hovers over a panda face
    if (dist(mouseX, mouseY, x, y) <= a*40){
        fill(255, 147, 147);
        arc(x, y+15, a*20, a*20, 0, PI);
        fill(255, 53, 53);
        ellipse(x - 30, y + 15, a*15, a*15);
        ellipse(x + 30, y + 15, a*15, a*15);
    }
    else{
    quad(x - a*1, y + a*7, x + a*1, y + a*7, x + a*1, y + a*15, x - a*1, y + a*15);
    quad(x - a*1, y + a*15, x , y + a*16, x - a*7, y + a*20, x - a*8, y + a*20)
    quad(x + a*1, y + a*15, x , y + a*16, x + a*7, y + a*20, x + a*8, y + a*20)
    }
}

//function to make the panda figures upside down
function panda_down(x, y, eyes, b) {

    //ears
    fill(0);
    ellipse(x - b*25, y + b*30, b*40, b*30);
    ellipse(x + b*25, y + b*30, b*40, b*30);

    //body
    fill(0);
    ellipse(x, y - b*60, b*100, b*100);
    fill(255);
    ellipse(x, y, b*90, b*80);
    ellipse(x, y - b*60, b*80, b*80);
    fill(0);
    strokeWeight(5);
    quad(x - b*5, y - b*55, x - b*3, y - b*55, x + b*5, y - b*65, x + b*3, y - b*65);
    quad(x + b*5, y - b*55, x + b*3, y - b*55, x - b*5, y - b*65, x - b*3, y - b*65);

    //eyes
    noStroke();
    push();
    translate(x - 20, y + 5);
    rotate(radians(60))
    ellipse(0, 0, b*30, b*20);
    pop();
    push();
    translate(x + 20, y + 5);
    rotate(radians(-60))
    ellipse(0, 0, b*30, b*20);
    pop();
    fill(255);
    ellipse(x - 15 + eyes, y + 10, b*5, b*5);
    ellipse(x + 15 + eyes, y + 10, b*5, b*5);

    //nose + mouth
    fill(0);
    ellipse(x, y - 7, b*5, b*5);
    
    //what happens when the mouse hovers over a panda face
    if (dist(mouseX, mouseY, x, y) <= b*40){
        fill(255, 147, 147);
        arc(x, y - 15, b*20, b*20, PI, 0)
        fill(255, 53, 53);
        ellipse(x - 30, y - 15, b*15, b*15);
        ellipse(x + 30, y - 15, b*15, b*15);
    }
    else{
    quad(x - b*1, y - b*7, x + b*1, y - b*7, x + b*1, y - b*15, x - b*1, y - b*15);
    quad(x - b*1, y - b*15, x , y - b*16, x - b*7, y - b*20, x - b*8, y - b*20)
    quad(x + b*1, y - b*15, x , y - b*16, x + b*7, y - b*20, x + b*8, y - b*20)
    }
}

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


function draw() {
    background(146, col, 171);
    noStroke();
    //drawing all the pandas
    for (i = 0; i < 4; i++) {
        //how to make eyse look at the bamboo!
        eyes_dir = (mouseX - (175*i + 60))/100;
        
        //these are the factors I'm multiplying all my values by
        a = mouseY / 300;
        b = (480 - mouseY) / 300;

        if (mouseY >= 300){
            b = 0;
        }
        if (mouseY <= 180){
            a = 0;
        }
        
        panda(175*i + 60, 400, eyes_dir, a);
        panda_down(175*i + 60, 80, eyes_dir, b);
    }

    //drawing the bamboo
    fill(48, 153, 84);
    rect(mouseX - 6, mouseY - 30, 12, 19);
    rect(mouseX - 6, mouseY - 10, 12, 19);
    rect(mouseX - 6, mouseY + 10, 12, 19);
    push();
    fill(97, 255, 76);
    translate(mouseX + 18, mouseY - 25);
    rotate(radians(-30));
    ellipse(0, 0, 20, 8);
    pop();

    //changing the color of the background
    col = mouseY / 2;
}

When I read the prompt for this project, I knew right away that I wanted to do something with eyes. I felt that having a group of eyes staring at your mouse would add some excitement and personality to my project. After figuring that out, I figured I would just add some lovely pandas, and based the rest of the project off of that!