Project 06 – Abstract Clock

I created a boba clock which is milk tea with boba from noon to midnight and juice with lychee jelly from midnight to noon. The number of Jelly/Boba inside the cup, including one inside the straw, represents the hour. Juice/milk shrinks per second, and the full amount disappears per minute. Lastly, a Jelly/Boba stuck inside the straw moves upward per minute and got out from the straw each hour. 

sketchDownload
//Alicia Kim
//Section B

var x = [];
var y = [];
var angle = [];


function setup() {
    createCanvas(300, 400);
    for (var i=0; i<(hour()%12-1); i+=1) {
        x[i] = random (120,190);
        y[i] = random (200,340);
        angle[i] = random(360);
    }

    for(var j=0; j<height; j+=1){
        stroke(lerpColor(color(255,232,239) ,color(255,253,208),j/height));
        line(0,j,width,j);
    }
}

function draw() {
    var s = second();
    var min = minute();
    stroke(0);    

//juice with lychee jelly from midnight to noon
//& milk tea with boba from noon to midniht
    push();
    if (hour()>12){
        drawMilk(s);
    }
    else if (hour()<=12){
        drawJuice(s);
    }
    pop();
    
    push ();
    drawCup();
    pop();

    push();
    drawStraw();
    pop();

    push();
    if (hour()>12){
        drawBoba();
        strawBoba(min);
    }
    else if (hour()<=12){
        drawJelly();
        strawJelly(min);
    }
    pop();

}

// juice inside the cup shrinks per sec
function drawJuice(s){
    fill(255,203,164); //orange
    quad(70,75,230,75,215,350,85,350); //juice

    //cover
    fill(255);
    quad(70,75,230,75,230-(15/60)*s,75+s*(275/60),70+(15/60)*s,75+s*(275/60));

    stroke(255,178,120); //dark orange 
    fill(255,203,164);
    ellipse (width/2, 75+(275/60)*s, 160-(0.5)*s, 60);
}

function drawCup(){
// bigger circle
    fill(224,255,255); //light cyan
    ellipse (width/2, 75 , 160, 60);
// smaller circle
    push();
    if (hour()<=12){
        fill(255,203,164);
    }
    else if (hour()>12){
        fill(247,231,200);
    }
    ellipse (width/2, 350, 130, 50);
    pop();

//connecting lines
    line (70, 75, 85, 350);
    line (230, 75, 215, 350);
}

function drawStraw(){
// straw body
    push();
    fill(0,191,255,50); //sky blue
    rect(140,30,20,300);
    pop();
// straw holes 
    ellipse(width/2,30,20,10);
    ellipse(width/2,330,20,10);
    fill(224,255,255); //light cyan
    arc (width/2, 75 , 160, 60, 0, PI, OPEN);
}

// number of jelly inside the cup represents the hour
function drawJelly(){ 
    for (var i=0; i<(hour()%12-1); i++) {
        push();
        translate(x[i],y[i]);
        rotate(radians(angle[i]));
        noStroke();
        fill(249,246,231,150); //lychee 
        rect (0,0,10,30); //lychee jelly
        pop();  
    }
}

// jelly inside the straw moves up per minute
function strawJelly(m){
        noStroke();
        fill(255,255,142);
        rect (width/2-5,300-(225/60)*m,10,30);
}

// milk inside the cup shrinks per sec
function drawMilk(s){
    stroke(236,220,194); //dark milk color
    fill(247,231,200); //milk color
    quad(70,75,230,75,215,350,85,350); //juice

    
    //cover
    fill(255);
    quad(70,75,230,75,230-(15/60)*s,75+s*(275/60),70+(15/60)*s,75+s*(275/60));

 
    fill(247,231,200); //milk color
    ellipse (width/2, 75+(275/60)*s, 160-(0.5)*s, 60);
}

// number of boba inside the cup & straw represents the hour
function drawBoba(){
    for (var i=0; i<(hour()%12-1); i++) {
        push();
        stroke(70, 51, 51,100); //darker brown
        fill(88,59,57,150); //dark brown 
        ellipse (x[i],y[i],20,20); //boba
        pop();
    }
}

// boba inside the straw moves up per minute
function strawBoba(m){
    noStroke();
    fill(88,59,57);
    ellipse (width/2,300-(225/60)*m,20,20);
}

Leave a Reply