EanGrady-Project06-Abstract Clock.

my-sketch.js

//Ean Grady
//section A
//egrady@andrew.cmu.edu
//Project-06

var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(300, 300);
    millisRolloverTime = 0;
}

function draw() {
    background(255);
    
    var H = hour();
    var M = minute();
    var S = second();
    
    fill(128, 100, 100);
    text("Hour: "   + H, 15, 22);
    text("Minute: " + M, 120, 22);
    text("Second: " + S, 220, 22);
    text("THIS IS A CLOCK", 100, 300);
    
    var hourBarWidth   = map(H, 0, 24, 0, TWO_PI);
    var minuteBarWidth = map(M, 0, 60, 0, TWO_PI);
    var secondBarWidth = map(S, 0, 60, 0, TWO_PI);
    var secondcolor = map(S, 0, 60, 255, 0);
    var minutecolor = map(M, 0, 60, 255, 0);
    var hourcolor = map(H, 0, 24, 255, 0);
    
    fill(hourcolor, 255, 100)
    arc(150, 150, 220, 220, 0, hourBarWidth, PIE);
    fill(minutecolor);
    arc(150, 150, 160, 160, 0, minuteBarWidth, PIE);
    fill(secondcolor, 255, 200);
    arc(150, 150, 100, 100, 0, secondBarWidth, PIE);

}

This project allowed me to familiarize myself with using arcs more comfortably, I also understand how to implement time in p5.js better.