aerubin-Project-06-Abstract-Clock

For this project, I wanted to create a clock out of an everyday object. I came to the conclusion that flowers could be made into an analog clock with the petals acting as the hands and the timekeeper. I thought the largest outside petals could symbolize the largest hour hand, the middle petals could represent the minute hand, and the smallest petals could act as the second hand. In addition, I added a hand in the center of the flower that represents the seconds in a smooth transition that follows the seconds petals. Overall, I am very satisfied with my product and I think it would be feasible to create and implement in today’s clock designs.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-06-Abstract-Clock

var a = 0;
var b = 255;
var n = 255;
var c = 0;
var d = 255;
var m = 255;
var e = 0;
var f = 255;
var o = 255;
var flowerx = 110;
var flowery = 110;
var nn = 255;
var mm = 255;
var oo = 255;
var nnn = 255;
var mmm = 255;
var ooo = 255;
var offset = 0;
var mil_start = 0;

function setup() {
    createCanvas(450, 450);   

    //millisecond hand in sinc with second petals
    var sc_start = second();
    mil_start = millis();
    offset = sc_start*6;
}

function draw() {
    background(204, 235, 197);
    
    //Flower Pot
    noStroke();
    fill(236, 211, 207);
    strokeWeight(1);
    stroke(0);
    quad(134, 325, 316, 325, 281, 375, 169, 375);
    ellipse(width/2, 430, 180, 140);
    noStroke();
    quad(135, 325, 315, 325, 280, 375, 170, 375);
    fill(205, 179, 176);
    strokeWeight(1);
    stroke(0);
    ellipse(width/2, 325, 182, 30);

    //Flower Leaves
    push();
    noStroke();
    rotate(radians(45));
    fill(82, 100, 35);
    ellipse(358, 12, 20, 50);
    pop();

    push();
    noStroke();
    rotate(radians(42));
    fill(82, 100, 35);
    ellipse(330, 60, 50, 20);
    pop();

    noFill();
    stroke(82, 100, 35);
    strokeWeight(6);
    //Yellow Flower Stem
    arc(50+430-90, 55+236+46, 70+330-100, 70+280-100, PI, PI+QUARTER_PI);
    //Orange Flower Stem
    arc(50+105, 55+274, 70+50, 70+50-30, PI+90, QUARTER_PI-19.5);
    //Pink Flower Stem
    arc(50+83, 55+269, 70+50+70, 70+50-30+100+170, PI+90, QUARTER_PI-19.5);

    noStroke();

    var darkpink = color(194, 20, 69); 
    var mediumpink = color(249, 109, 170);
    var lightpink = color(233, 186, 193);

    //Center of Pink Flower
    fill(253, 184, 50);
    ellipse(flowerx+80, flowery, 57, 57);
    fill(243, 121, 33);
    ellipse(flowerx+80, flowery, 57-15, 57-15);
    fill(243, 82, 30);
    ellipse(flowerx+80, flowery, 57-30, 57-30);

    var mil = millis();

    //Pink Flower Second Hand
    push();
    translate(flowerx+80, flowery);
    rotate(radians((6/1000)*(mil-mil_start)+offset));
    stroke(darkpink);
    strokeWeight(2);
    line(0, 0, 0, -26);
    pop();

    //Pink Flower Clock
    push();
    translate(flowerx+80, flowery);
    for (var i = 0; i < 60; i++) {
        if (second() == i) {
            n = 255;
        }
        else {n = darkpink;}
        secondPetals(i, n);
    }

    for (var j = 0; j < 60; j++) {
        if (minute() == j) {
            m = 255;
        }
        else {m = mediumpink;}
        minutePetals(j, m);
    }

    for (var k = 0; k < 24; k++) {
        if (hour() == k) {
            o = 255;
        }
        else {o = lightpink;}
        hourPetals(k, o);
    }
    pop();

    var darkyellow = color(192, 152, 32);
    var mediumyellow = color(229, 220, 49);
    var lightyellow = color(250, 247, 71);

    //Center of Yellow Flower
    fill(125, 69, 67);
    ellipse(flowerx+235, flowery+100, 57, 57);
    fill(82, 38, 27);
    ellipse(flowerx+235, flowery+100, 57-15, 57-15);
    fill(48, 45, 48);
    ellipse(flowerx+235, flowery+100, 57-30, 57-30);

    //Yellow Flower Second Hand
    push();
    translate(flowerx+235, flowery+100);
    rotate(radians((6/1000)*(mil-mil_start)+offset));
    stroke(mediumyellow);
    strokeWeight(2);
    line(0, 0, 0, -26);
    pop();

    //Yellow Flower Clock
    push();
    translate(flowerx+235, flowery+100);
    for (var ii = 0; ii < 60; ii++) {
        if (second() == ii) {
            nn = 255;
        }
        else {nn = darkyellow;}
        secondPetals(ii, nn);
    }

    for (var jj = 0; jj < 60; jj++) {
        if (minute() == jj) {
            mm = 255;
        }
        else {mm = mediumyellow;}
        minutePetals(jj, mm);
    }

    for (var kk = 0; kk < 24; kk++) {
        if (hour() == kk) {
            oo = 255;
        }
        else {oo = lightyellow;}
        hourPetals(kk, oo);
    }
    pop();

    var darkorange = color(243, 82, 30);
    var mediumorange = color(243, 121, 33);
    var lightorange = color(253, 184, 50);

    //Center of Orange Flower
    fill(0);
    ellipse(flowerx-20, flowery+160, 57, 57);
    fill(207, 52, 32);
    ellipse(flowerx-20, flowery+160, 57-15, 57-15);
    fill(253, 217, 101);
    ellipse(flowerx-20, flowery+160, 57-30, 57-30);

    //Orange Flower Second Hand
    push();
    translate(flowerx-20, flowery+160);
    rotate(radians((6/1000)*(mil-mil_start)+offset));
    stroke(mediumorange);
    strokeWeight(2);
    line(0, 0, 0, -26);
    pop();

    //Orange Flower Clock
    push();
    translate(flowerx-20, flowery+160)
    for (var iii = 0; iii < 60; iii++) {
        if (second() == iii) {
            nnn = 255;
        }
        else {nnn = darkorange;}
        secondPetals(iii, nnn);
    }

    for (var jjj = 0; jjj < 60; jjj++) {
        if (minute() == jjj) {
            mmm = 255;
        }
        else {mmm = mediumorange;}
        minutePetals(jjj, mmm);
    }

    for (var r = 0; r < 24; r++) {
        if (hour() == r) {
            ooo = 255;
        }
        else {ooo = lightorange;}
        hourPetals(r, ooo);
    }
    pop();
}

function secondPetals(a, b) {
    push();
    noStroke();
    rotate(radians(a*6));
    fill(b);
    ellipse(0, -35, 3.5, 9);
    pop();
}

function minutePetals(c, d) {
    push();
    noStroke();
    rotate(radians(c*6));
    fill(d);
    ellipse(0, -48, 4.6, 15);
    pop();
}

function hourPetals(e, f) {
    push();
    noStroke();
    rotate(radians(e*15));
    fill(f);
    ellipse(0, -80, 20, 50);
    pop();
}

Initial Sketch of Product (petals are not drawn to scale)