Miranda Luong-Project-06-Abstract-Clock

sketch

/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-06
*/

var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(300, 300);
}

function draw() {
    background(154,191,219);
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // Reckon the current millisecond, 
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
   
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    // print current time next to corresponding colors
    noStroke();
    fill(0);
    text("Hour: "   + H, 30, 22);
    text("Minute: " + M, 30, 42);
    text("Second: " + S, 30, 62);
    text("Millis: " + mils, 30, 82);

    fill(0);
    ellipse(15,18,12,12);
    fill(255/3);
    ellipse(15,38,12,12);
    fill(255*(2/3));
    ellipse(15,58,12,12);
    fill(255);
    ellipse(15,78,12,12);
    
    //Hours
    var hStart = 0 - HALF_PI //first arc always starts at 0
    var hRadius = 100+(200/24) //first arc radius
    //loop creates individual wedges, the number of wedges corresponding to current hour
    for (var a = 0; a < H; a ++){
        stroke(255);
        fill(0);
        //creates arc from point of 'start' to 'start' plus the 'i'th wedge
        arc(50 + width / 2, 10 + height / 2, hRadius, hRadius, hStart, hStart + (TWO_PI/24), PIE);
        //reassigns start with the addition of 'i'th wedge
        hStart += (TWO_PI/24)
        hRadius += (200/24)
    }

    //Minutes 
    var mStart = 0 - HALF_PI
    var mRadius = 75+(200/60) //first arc radius
    //loop creates individual wedges, the number of wedges corresponding to current minute
    for (var a = 0; a < M; a ++){
        fill(255/3);
        stroke(255);
        //creates arc from point of 'start' to 'start' plus the 'i'th wedge
        arc(50 + width / 2, 10 + height / 2, mRadius, mRadius, mStart, mStart + (TWO_PI/60), PIE);
        //reassigns start with the addition of 'i'th wedge
        mStart += (TWO_PI/60)
        //reassigns radius of next wedge to 
        mRadius += (200/60)
    }

    var sStart = 0 - HALF_PI
    var sRadius = 25+(200/60) //first arc radius
    //loop creates individual wedges, the number of wedges corresponding to number of values in array
    for (var a = 0; a < S; a ++){
    //loop generates shades of grey, value increasing in accordance to number of values in array
        fill(255*(2/3));
        stroke(255);
        //creates arc from point of 'start' to 'start' plus the 'i'th wedge
        arc(50 + width / 2, 10 + height / 2, sRadius, sRadius, sStart, sStart + (TWO_PI/60), PIE);
        //reassigns start with the addition of 'i'th wedge
        sStart += (TWO_PI/60)
        sRadius += (200/60)
    }

    var msStart = 0 - HALF_PI
    var msRadius = 0 //first arc radius
    //loop creates individual wedges, the number of wedges corresponding to number of values in array
    for (var a = 0; a < mils; a ++){
    //loop generates shades of grey, value increasing in accordance to number of values in array
        fill(255);
        //creates arc from point of 'start' to 'start' plus the 'i'th wedge
        arc(50 + width / 2, 10 + height / 2, msRadius, msRadius, msStart, msStart + (TWO_PI/1000), PIE);
        //reassigns start with the addition of 'i'th wedge
        msStart += (TWO_PI/1000)
        msRadius += (200/1000)
    }
}

This was a really fun project. I found it interesting thinking of a new way to display time. My project isn’t very abstract, in fact, I think it’s much more literal than a normal clock, seeing as it counts for every increase in every hour, minute and second of time. My code references the tally assignment we had to do the week prior, so it was a great way of implementing old knowledge.