daphnel-Project 06-Abstract Clock

Clock

var petals = 0;
var petals2 = 0;
var ellipseSize=200;
var minuteCircleSize=7;

function setup() {
    createCanvas(480, 480);
}
function draw() {
    background(229, 255, 255);
    var H = hour();
    var M = minute();
    var S = second();

    angleMode(RADIANS);
    petals += 4;
    petals2 += 3;
    strokeWeight(0);
    for(var i=0; i<5; i++){
        //increment based on i and to make the zig zag petal pattern;
        var x = width/13 + 100 * i;
        fill(255, 204, 204, 204);
        arc(x, 30 + petals, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        arc(x, 150 + petals, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        arc(x, 270 + petals, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        var x1 = width/5 + 100 * i;
        arc(x1, 90 + petals2, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        arc(x1, 210 + petals2, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        arc(x1, 330 + petals2, 15, 10,PI+QUARTER_PI, QUARTER_PI);
    }

    if(petals>height){
      petals=-50;
      petals2=-50; //to make the petals loop;
    }

    angleMode(DEGREES);
    noStroke();
    //the flower petals that grow by the hour
    if (H==0){
        H = 12;
      }else if(H < 24 & H > 12){
        H -= 11;
      }else{
        H = hour();
      }
    for(h=1; h<H; h++){ //the petals that increase by the hour;
        push();
        translate(width/2, height/2);
        rotate(h*30);
        fill(255, 204, 204, 204);
        ellipse(width/5, 0, ellipseSize,ellipseSize/2);
        pop();
    }
    for(m = 0; m<M; m++){ //the brown circles representing minutes;
        push();
        translate(width/2,height/2);
        rotate(6 * m);
        fill(230, 77, 0, 50); //4th number is for transparency;
        ellipse(width/8,0, minuteCircleSize, minuteCircleSize);
        pop();
      }

    for(s = 0; s<S; s++){ //the yellow stamens representing seconds;
        push();
        translate(width/2,height/2);
        rotate(6 * s);
        strokeWeight(2);
        stroke(255, 255, 204);
        line(0,0,0,-60);
        pop();
    }
}

The hardest part about this assignment was making my code more efficient. After making the petals and the rest of the flower, something seemed to be a little boring so I tried to create a background that would loop in the back, but I just couldn’t think of how to make it loop more efficiently even though it looks like an easy fix. I found it interesting to see the process of my clock actually changing throughout time. Since I like cherry blossoms and the color of the original pink background, I decided to use those as my inspirations for this project. It was hard for me to work with the arc function as it was my first time using it and there were a lot of components to it as well. The top photo below was something I used as sort of an inspiration of how I wanted my clock to look like. I changed up some of the components to match the number of hours, minutes and seconds.