Mug Clock

//Nakshatra Menon
//Section C

var cupHeight; 

function setup() {
    createCanvas(480, 480);
    background(246, 242, 240);
}



function draw() {
    push();
    colorMode(HSB);
    background(180, hour()*2, 42);         
    pop()
    fill(44, 28, 7);
    noStroke();
    rect(0, 300, width, 200);             
    cup(240, 300);
}


function cup(x,y){ // draws cup
    cupHeight = -minute();                           // makes the cup taller with the min  
    push();
    translate(x,y)                                   // center of the liquid becomes the origin 
    // cup handle
    strokeWeight(10);
    stroke(170);
    noFill(); 
    ellipse(70, cupHeight+40, 48-cupHeight, 44);

    // saucer
    strokeWeight(1);
    noStroke();
    c();                               // color 
    ellipse(0, 75, 120, 20);
    fill(0, 0, 0, 50);                // shadow 
    ellipse(0, 75, 100, 15); 
 
    // body of cup 
    strokeWeight(1); 
    noStroke();
    c();                               // color 
    beginShape();
        curveVertex(-76, cupHeight);
        curveVertex(-76, cupHeight);
        curveVertex(-62, 27);
        curveVertex(-38, 60);
        curveVertex(0, 75);
        curveVertex(38, 60);
        curveVertex(62, 27);
        curveVertex(76, cupHeight);
        curveVertex(76, cupHeight);
    endShape();

    // liquid
    strokeWeight(5);
    stroke(170);
    fill(110, 69, 17);
    ellipse(0, cupHeight, 150, 20);
    pop();

    // steam 
    push();
    translate(x, y-45)                      
    steam();
    pop();
}
    
function c(){ // changes the color based on the hour 
    // rounds up the number
    var f = ceil(hour()/2)                            
    var f2 = ceil(hour()/3)
    var f3 = ceil((hour()-12)/2)
    var f4 = ceil((hour()-12)/3) 

    // color changes based on hour 
    if(hour()>= 0 & hour()<= 4){                   // color goes from red to green
        fill((255-63*hour()),63*hour(), 0)
    }

    if (hour() > 4 && hour() <= 8){                 // color goes from green to blue
        fill(0,(255-63*f),43*f)
    }

    if(hour()> 8 && hour()<= 12){                   // color goes from blue to red
        fill(43*f2, 0, (255-43*f2))
    }

    if(hour()> 12 && hour()<= 16){                // color goes from red to green
        fill((255-43*(hour()-12)),43*(hour()-12), 0)
    }

    if (hour() > 16 && hour() < 20){             // color goes from green to blue
        fill(0,(255-43*(f3)),43*(f3))
    }

    if(hour()>= 20 && hour()<= 24){             // color goes from blue to red
        fill(43*(f4), 0, (255-43*(f4)))
    }   
}


function steam(){ // steam changes based on second 
    if (second()<=30){                           // when sec less/equal than 30
        fill(255, 255, 255, 120-2*second());    // the opacity changes depending on the second 
        beginShape()                            // shape 1 
            curveVertex(0, -12);
            curveVertex(0, -12);
            curveVertex(-16+second(), -34);
            curveVertex(-53+second(), -57);
            curveVertex(-52+second(), -107);
            curveVertex(21+second(), -119);
            curveVertex(10+second(), -158);
            curveVertex(47, -171);
            curveVertex(54-second(), -108);
            curveVertex(18-second(), -80);
            curveVertex(42-second(), -43);
            curveVertex(13-second(), -24);
            curveVertex(0, -12);
            curveVertex(0, -12);
        endShape();
    }
    if (second()>30){                           // when sec greater than 30
        fill(255, 255, 255, 120-2*second());   // opacity changes based on second 
        beginShape()                           // shape 2 
            curveVertex(0, -12);
            curveVertex(0, -12);
            curveVertex(-16-second(), -34);
            curveVertex(-53-second(), -57);
            curveVertex(-52-second(), -107);
            curveVertex(21-second(), -119);
            curveVertex(10-second(), -158);
            curveVertex(47, -171);
            curveVertex(54+second(), -108);
            curveVertex(18+second(), -80);
            curveVertex(42+second(), -43);
            curveVertex(13+second(), -24);
            curveVertex(0, -12);
            curveVertex(0, -12);
        endShape();
    }
}