Project 06: Abstract Clock

I found this project a little challenging, but I do like what I was able to make in the end! There were elements that I was really hoping to add, like an inverted color for the background and lines between the morning and afternoon, but my hours function was not working so I wasn’t able to include that aspect. But I mainly wanted to create a clock that created a full picture with the end of a day. The circles on the right count the minutes and sections and the lines on the right create a grid that has lines added each hour.

//Jacky Lococo
//jlococo
//Section C
function setup() {
    createCanvas(370, 600);
}

function draw() {
    background(0);
    var sec = second() // variable ofr the seconds
    var min = minute() // variable for minutes
    var h = hour()
    var strokeLine = 255 // varible for stroke (ended up not working)

    //white lines that divide seconds, minutes, hours
    strokeWeight(1)
    stroke(strokeLine)
    line(330, 0, 330, 600)

    strokeWeight(1)
    stroke(strokeLine)
    line(290, 0, 290, 600)

    //y value for the seconds cirlces
    for (var y = 10; y <= 10*(sec); y += 10) {
        strokeWeight(0)
        fill(255, 204, 204)
        ellipse(350, y, 10, 10);
    }
    //y value for the minutes since x is the same for each added cirlce
    for(var ym = 10; ym <= 10*(min); ym +=10){
        strokeWeight(0)
        fill(255, 102, 102)
        ellipse(310, ym, 10, 10)
    }

    //hour-horizontal and verticle lines will be drawn with each hour to create a grid
    //y value change for the hours - horizontal visualization
    for(var yh = 25; yh <= 25*(h); yh += 25){
        strokeWeight(1)
        stroke(strokeLine)
        line(0, yh, 290, yh)
    } 
    //x valye for the change in hour - verticle depiction 
    for(var xh = 290/24; xh <= (290/24)*(h); xh += 290/24){
        strokeWeight(1)
        stroke(strokeLine)
        line(xh, 0, xh, 600)
    }

    //red cirlces that follow the hour lines
    strokeWeight(0)
    fill(255, 51, 51)
    ellipse(275, yh - 25, 10, 10)

    strokeWeight(0)
    fill(255, 51, 51)
    ellipse(xh-290/24, 580, 10, 10)


}