Project-06

This is my abstract clock:

In the sunflower I draw, I use its stem to represent the hour, that as time goes, the sunflower will gradually be taller; I use the petal of the flower to represent the minute; I use the color change of the leaf and the text to represent the second.

sketch

function setup() {
    createCanvas(300, 400);
    background(255);
}



function draw() {

    noStroke();
    background(242, 226, 204);

    //background leaf -- represent second
    if (second()%2 == 0) {
        fill(123, 142, 31);
    } else {
        fill(230, 143, 89)
    }

    push();
    translate(140, 200);
    rotate(radians(30))
    ellipse(-10, 0, 50, 15);
    rotate(radians(-60));
    ellipse(10, 30, 40, 10);
    pop();
    
    //base-flowerpot
    var pX = 150;
    var pY = 250
    var pHeight = 8;
    
    fill(187, 160, 133);
    beginShape();
    vertex(pX-50, pY);
    vertex(pX-60, pY+pHeight);
    vertex(pX-50, pY+2*pHeight);
    vertex(pX+50, pY+2*pHeight);
    vertex(pX+60, pY+pHeight);
    vertex(pX+50, pY)
    endShape();

    fill(170,119, 98)
    beginShape();
    vertex(pX-50, pY+2*pHeight);
    vertex(pX-30, pY+10*pHeight);
    vertex(pX+30, pY+10*pHeight);
    vertex(pX+50, pY+2*pHeight);
    endShape();


    //flower stem -- represents hour
    var sWidth = 10
    var sHeight= 50
    sHeight += hour();
    fill(123, 142, 31)
    beginShape();
    curveVertex(pX-sWidth, pY);
    curveVertex(pX-sWidth, pY);
    curveVertex(pX-sWidth/2, pY-sHeight);
    curveVertex(pX-sWidth*2, pY-2*sHeight);
    curveVertex(pX-sWidth, pY-2*sHeight);
    curveVertex(pX+sWidth/2, pY-sHeight);
    curveVertex(pX, pY);
    curveVertex(pX, pY);
    endShape();

    //sunflower petal -- represent minute
    push();
    translate(pX-sWidth, pY-2*sHeight);
    noStroke();
    for (var i=0; i<minute(); i++) {
        rotate(radians(6));
        fill(252, 171, 1);
        ellipse(0, 20, 5, 65);
        fill(228, 121, 1);
        ellipse(0, 20, 3, 35);
    }

    //seeds
    fill(41, 5, 2);
    circle(0, 0, 60);
    fill(37, 22, 1);
    circle(0, 0, 30);
    fill(34, 28, 0);
    circle(0, 0, 20);
    pop();
    
    //Text -- represent second
    if (second() %2 == 0) {
        textSize(25);
        fill(254, 203, 1, 220);
        text('Have A Good Day!', 40, 40);
    } 
   
}

Leave a Reply