mecha-project03-dynamic-drawing

sketch

//alters
//position of eyebrows, eyes, blush, mouth, bird, face
//color of blush, face, bird
//size of blush, face

var colorR = 0;
var colorG = 0;
var colorB = 0;
var topY = 70;
var bottomY = 640-70;
var ellipseSize = 140;
var angle = 0;

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

function draw() {
    background(210-colorR,240-colorG,240);
    noStroke();

    angle+=1;
    //rotating sun moon thing
        push();
        translate(240,300);
        rotate(angle);
        noStroke();
        fill(255);
        ellipse(-40,-250,40,40)
        pop();
    
    fill(210-colorR,240-colorG,240);
    noStroke();
    rect(0,260,600,600);

    //constrain mouseY so ball doesn't go past top and bottom part of canvas
    var yConstrain = constrain(mouseY, topY, bottomY);
    var ellipseSize = constrain(mouseY-400, 140,220);
    var ellipseSize2 = constrain(mouseY+400,100,140);

    //little bird friend
    //beak
    noStroke();
    fill(230+colorR,180+colorG,130+colorB);
    triangle(230,yConstrain-145,190,yConstrain-120,240,yConstrain-110);
    noFill();
    stroke(80);
    line(240,yConstrain-100,240,yConstrain)
    line(230,yConstrain-100,230,yConstrain)
    noStroke();
    fill(255,160+colorR,160+colorR);
    arc(238,yConstrain-110,50,50,30,220,CHORD);
    ellipse(220,yConstrain-130,40,40);
    //wing
    fill(255,140+colorR,140+colorR);
    arc(250,yConstrain-110,40,40,30,220,CHORD);

    //face
    noStroke();
    fill(230+colorR,180+colorG,130+colorB);
    ellipse(240,yConstrain,ellipseSize,ellipseSize2);

    //eyebrows
    noFill();
    strokeWeight(2);
    stroke(80);
    arc(205, yConstrain-10,40,40,30,70,OPEN);
    arc(270, yConstrain-10,40,40,-270,-230,OPEN);
    
    //eyes and mouth
    //eyes open while mouse is in top part of screen
    if(mouseY<250){
        noStroke();
        fill(80);
        ellipse(220,yConstrain+30,6,6);
        ellipse(260,yConstrain+30,6,6);
        
        noFill();
        stroke(80);
        strokeWeight(2);
        arc(240,yConstrain+35,30,30,40,140,OPEN);

        ellipse(220,yConstrain-125,2,2);

        //blush
        noStroke();
        fill(250+colorR,140+colorG,100+colorB)
        ellipse(200, yConstrain+40, ellipseSize/10, 14);
        ellipse(280, yConstrain+40, ellipseSize/10, 14);

    }
    if(mouseY<450 & mouseY >=250){
        noStroke();
        fill(80);
        ellipse(220,yConstrain+30,6,6);
        ellipse(260,yConstrain+30,6,6);

        stroke(80);
        strokeWeight(2);
        fill(255);
        line(230,yConstrain+45,250,yConstrain+45);

        ellipse(220,yConstrain-125,2,2);

        //text box
        fill(255);
        strokeWeight(1.5);
        noStroke();
        rect(47,yConstrain-150,104,40,30,30,0,30);
        triangle(120,yConstrain-140,120,yConstrain-110,160,yConstrain-110);
        noFill();
        stroke(80);
        strokeWeight(1);
        text("please stop",70,yConstrain-126);

        //blush
        noStroke();
        fill(250+colorR,140+colorG,100+colorB)
        ellipse(200, yConstrain+40, ellipseSize/10, 14);
        ellipse(280, yConstrain+40, ellipseSize/10, 14);

    }
    //eyes closed while mouse is in bottom part of screen
    if(mouseY>=450){
        noFill();
        strokeWeight(2);
        stroke(80);
        line(210,yConstrain+30,220,yConstrain+25);
        line(260,yConstrain+25,270,yConstrain+30);

        noFill();
        stroke(80);
        strokeWeight(2);
        arc(240,yConstrain+45,30,30,180,360,OPEN);

        fill(255);
        strokeWeight(1.5);
        noStroke();
        rect(47,yConstrain-150,104,40,30,30,0,30);
        triangle(120,yConstrain-140,120,yConstrain-110,160,yConstrain-110);
        noFill();
        stroke(80);
        strokeWeight(1);
        text("how could you",62,yConstrain-126);

        strokeWeight(2);
        line(213,yConstrain-126,220,yConstrain-124);

        //blush
        noStroke();
        fill(250+colorR,140+colorG,100+colorB)
        ellipse(200, yConstrain+40, ellipseSize/10, 14);
        ellipse(280, yConstrain+40, ellipseSize/10, 14);

    }
    //changes color of face as mouse goes down
    if(mouseY < height/2){
        if(colorR < 20){
        colorR++;
        colorG--;
        colorB-=5;}
    } else{
        if(colorR > -20){
        colorR--;
        colorG++;
        colorB-=5;
    }
}
}

At first, I struggled with the open ended nature of this prompt. I couldn’t figure out how exactly I wanted to implement all of the changing aspects in such a small canvas without making it seem too cluttered. My first idea was utilizing mouseY to create something that looked like it was being stepped on, and ended up with the code above. Although it ended up a lot different than what I had first planned, I decided that rather than limit myself to a specific sort of theme, I would just roll with whatever came to my mind first. I thought that the hardest part of this was definitely calculating the position of all of the elements I used in relation to mouseY.