Sharon Yang Project 06 Abstract Clock

Project

/*Sharon Yang
Section C
junginny
Project-06
*/

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

function draw() {
    //fetch time
    var H = hour();
    var M = minute();
    var S = second();
    background(182,211,232);
    angleMode(DEGREES);

    //ground
    fill(109,67,48);
    noStroke();
    rect(0,455,640,480);

    //rain drops for seconds
    strokeWeight(2);
    stroke(255);
    var rainSpeed;
    rainSpeed = 0;
    frameRate(1);
    for (var i = 0; i <= S; i++) {
        push();
        translate(random(10,width-10),rainSpeed);
        line(0,rainSpeed,0,rainSpeed+30);
        rainSpeed+=15; 
        pop();
    }

    //plants for minutes
    var amountMap; //number of plants = minutes
    var plantY;
    fill(97,120,50);
    if (M == 1) {
        strokeWeight(2);
        stroke(97,120,50);
        push();
        translate(width/2,height-25);
        plantY = random(-20,-60);
        line(0,0,0,plantY);
        noStroke();
        ellipse(-5,plantY,10,5);
        ellipse(5,plantY,10,5);
        pop();
    }
    else {
        for (var amount = 1; amount <= M; amount++) {
            amountMap = map(amount-1,0,M-1,15,width-25); 
            strokeWeight(2);
            stroke(97,120,50);
            push();
            translate(0,height-25);
            plantY = random(-20,-60);
            line(amountMap,0,amountMap,plantY);
            noStroke();
            ellipse(amountMap-5,plantY,10,5);
            ellipse(amountMap+5,plantY,10,5);
            pop();
        }
    }

    //petals on the flower for hours
    if (H > 12) { //0~12 hours 
        H = H % 12
    }
    stroke(97,120,50);
    strokeWeight(4);
    line(320,230,320,455);
    noStroke();
    fill(242,155,174);
    for (var i = 0; i < H; i++) {
        push();
        translate(320,220);
        rotate(i * 30);
        ellipse(0,-25,15,60);
        pop();
    }
    noStroke();
    fill(175,23,104);
    ellipse(320,220,40,40);//bigger flower center
    fill(95,40,100);
    ellipse(320,220,25,25);//smaller flower center

}

For this project, I wanted to incorporate graphics with the clock function, and so I decided to make a flower to indicate the hours, the plants to indicate the minutes and the raindrops to indicate the seconds. I encountered several challenges including placing the plants without them overlapping as their number increases each minute. I resolved that my using the map function. The rotation and translation of the flower petals was also quite difficult but it became more simple once I converted the time to 12 hours instead of 24 hours.