mmirho – Project 6 – Blood clock

The goal of this was to create something ominous, slightly spooky, but very easy to tell the general time of day.

I really enjoyed how satisfying the millisecond smooth movement was, so it made sense to make it relate to some liquid.

sketch

var prevSec;
var millisRolloverTime;

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


function draw() {
    background(240);
    
    // 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);
    
    //fill(128,100,100);
    //text("Hour: "   + H, 10, 22);
    //text("Minute: " + M, 10, 42);
    //text("Second: " + S, 10, 62);
    //text("Millis: " + mils, 10, 82);
    
    var hourBarWidth   = map(H, 0, 23, 0, width-75);
    var minuteBarWidth = map(M, 0, 59, 0, width-75);
    var secondBarWidth = map(S, 0, 59, 0, width-75);
    
    // Make a bar which *smoothly* interpolates across 1 minute.
    // We calculate a version that goes from 0...60, 
    // but with a fractional remainder:
    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, height-75);
    var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, height-75);
    
    noStroke();

    fill(140, 0, 0);

    //This block makes the red pool at the top
    //And connects it smoothly to the drips
    fill(140, 0, 0);
    rect(0,0,width,100);
    fill(240);
    ellipse(230,105,182,60);
    ellipse(414,105,160,60);
    ellipse(95, 105, 62, 30);
    ellipse(0, 105, 100, 50);
    fill(140, 0, 0);
    

    rect(50, 75, 15, hourBarWidth);
    ellipse(57.5, hourBarWidth + 75, 15, 35);
    //Far left, slowest blood drip

    rect(125, 75, 15, minuteBarWidth);
    ellipse(132.5, minuteBarWidth + 75, 15, 35);
    //Middle, slow blood drip

    rect(320, 75, 15, secondBarWidthSmooth);
    ellipse(327.5, secondBarWidthSmooth + 75, 15, 35);
    //Far right, fastest drip

    text("H", 50, height-10);
    text("M", 125, height-10);
    text("S", 320, height-10);
    //Labels the bloog drips

}