Katrina Hu – Project-06 – Abstract Clock

sketch_project06

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project-06-Abstract Clock*/

var h;
var s;
var m;
var posHour;
var posSecond;
var posMinute;
var starting = 0;
var hoursCount = [0.0417];
var secCount = [0.01667];
var minCount = [0.01667];

function setup() {
    createCanvas(480, 480);
    background(0);
}

function draw() {
    h = hour();
    s = second();
    m = minute();

    background(0);
    noStroke();
//lime (hour)
    push();
    translate(-30, -27);
    fill(57, 120, 40);
    ellipse(150, 150, 245, 245);
    fill(220, 237, 190);
    ellipse(150, 150, 225, 225);
    fill(172, 219, 125);
    ellipse(150, 150, 207, 207);
    stroke(220, 237, 190);
    strokeWeight(8);
    line(120, 50, 180, 250);
    line(65, 84, 230, 215);
    line(45, 150, 255, 150);
    line(65, 216, 235, 95);
    line(185, 50, 120, 250);
    fill(220, 237, 190)
    ellipse(150, 150, 60, 60);
    pop();
//orange (seconds)
    push();
    translate(-100, -80);
    noStroke();
    fill(255, 140, 0);
    ellipse(250, 450, 245, 245);
    fill(255, 244, 209);
    ellipse(250, 450, 225, 225);
    fill(255, 201, 54);
    ellipse(250, 450, 207, 207);
    stroke(255, 244, 209);
    strokeWeight(8);
    line(220, 350, 280, 550);
    line(165, 384, 330, 515);
    line(145, 450, 355, 450);
    line(165, 516, 335, 395);
    line(285, 350, 220, 550);
    noStroke();
    fill(255, 244, 209);
    ellipse(250, 450, 60, 60);
    pop();
//watermelon (minutes);
    push();
    translate(-95, -35);
    fill(26, 156, 14);
    ellipse(450, 250, 245, 245);
    fill(255);
    ellipse(450, 250, 225, 225);
    fill(255, 146, 140);
    ellipse(450, 250, 210, 210);
    fill(0);
    ellipse(445, 260, 10, 15);
    ellipse(500, 200, 10, 15);
    ellipse(420, 180, 10, 15);
    ellipse(480, 245, 10, 15);
    ellipse(460, 310, 10, 15);
    ellipse(510, 280, 10, 15);
    ellipse(390, 250, 10, 15);
    ellipse(410, 300, 10, 15);
    ellipse(435, 220, 10, 15);
    pop();


//hour clock
    push();
    translate(-30, -27);
    for(posHour = 0; posHour <= h; posHour++) {
        noStroke();
        fill(0);
        arc(150, 150, 250, 250, starting, starting + 2 * PI * hoursCount);
        starting += (2 * PI * hoursCount);
    }
    if (posHour = h){
            starting = 0;
    }
    pop();

//seconds clock
    push();
    translate(-100, -80);
    for(posSecond = 0; posSecond <= s; posSecond++) {
        noStroke();
        fill(0);
        arc(250, 450, 250, 250, starting, starting + 2 * PI * secCount);
        starting += (2 * PI * secCount);
    }
    if (posSecond = s){
            starting =  0;
    }
    pop();

//minutes clock
    push();
    translate(-95, -35);
    for(posMinute = 0; posMinute <= m; posMinute++) {
        fill(0);
        arc(450, 250, 250, 250, starting, starting + 2 * PI * minCount);
        starting += (2 * PI * minCount);
    }
    if (posMinute = m){
            starting = 0;
    }
    pop();
    






}

The lime represents the hour, and a slice is eaten every hour. The watermelon represents the minute, and a slice is taken every minute. Similarly, the orange represents the seconds and a slice is taken every second. The fruit resets every minute/hour/day.

This was a very fun project to do, both in drawing the actual fruits and figuring out how to take a slice from each every second/minute/hour. It was interesting to learn about the time functions and how to creatively implement them into the project. Finally, I was really happy with the way it turned out.

original sketch of the clock

Leave a Reply