Project 06 Abstract Clock John Legelis

sketch

// John Legelis
// Section D


// candle dimensions
var ctop = 90
var xi = 7
var spacing = 40
var wcandle = 25
var hcandle = 150
var radius = 7

// flame dimensions
var flameEh = 20
var flameEw = 10

// holder dimensions
var holderWtop = 30
var holderWmid = 20
var holderHtop = 20
var holderHmid = 40
var holderWbot = 40


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


function draw() {
    background(0)

    //assign variables to current time in hours and minutes
    var hsub = hour()
    var msub = minute()
    
    // Hours variable
    var h = ((hsub - 1) % 12) + 1
    var haway = abs(12 - h)
    
    // Minute variable
    var m = msub
    var maway = abs(60 - m)
    // dimensions of curent hour candle in relation to minutes
    var hcandleshort = hcandle * maway/60
    var ctopshort = ctop + hcandle - hcandleshort

    // loop through number of hours
    for(i = 0; i <= haway; i++) {
        
        var cx = xi + spacing * i

        // for hours to come that arent current ours
        if (i < haway){
            fill("yellow")
            rectMode(CORNER)
            rect(cx, ctop, wcandle, hcandle, radius, radius, 0, 0)
            flame(cx + wcandle/2, ctop)
            holder(cx + wcandle/2, ctop + hcandle)
        }
        // for current hour hieght is minute dependant
        else {
            fill("yellow")
            rectMode(CORNER)
            rect(cx, ctopshort, wcandle, hcandleshort, radius, radius, 0, 0)
            flame(cx + wcandle/2, ctopshort)

        }
    }
    // loop through every possible hour and draw candlestick and number
    for (i = 0; i < 12; i++){
        var cx = xi + spacing * i
        holder(cx + wcandle/2, ctop + hcandle)

        fill(255)
        textAlign(CENTER)
        textSize(20);
        text(abs(12-i), (xi + wcandle/2 + (spacing * i)), ctop + hcandle + 50)

    }

    //update every 1 second
    frameRate(1)
}


// draw flame with bottom center at x, y
function flame(x,y) {
    var h = random(5,62)
    var s = random(0,92)
    colorMode(HSB)
    fill(h,s,100)
    ellipseMode(CENTER)
    ellipse(x, y - flameEh/2, flameEw, flameEh)
}

// draw holder with top center at x, y
function holder(x,y){
    colorMode(RGB)
    fill(244,0,0)
    rectMode(CORNER)
    rect(x - holderWtop/2, y, holderWtop, holderHtop, radius)
    rect(x - holderWmid/2, y + holderHtop, holderWmid, holderHmid)
    rect(x - holderWbot/2, y+ holderHtop + holderHmid, holderWbot, holderHtop, radius)
}

This project made me think about ancient ways of keeping track of time. One of which was by candle. I chose to recreate this in a intuitive way while also making the candles seem lifelike. The hour is represented by the rightmost lit candle, and the minutes are represented by how far down the current hour candle has burned. The further into the hour it gets, the more burned down the candle becomes. The flames flicker every second.