juyeonk-AbstractClock-06

sketch

var prevSec;
var millisRolloverTime;

var startingPoint = -90; //lets the bar-graph clocks start from the 0 o'clock position
var transparency1 = 255; //determines the transparency of the second bar graph
var transparency2 = 255; //determines the transparency of the minute bar graph
var transparency3 = 255; //determines the transparency of the hour bar graph



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

function draw() {
    angleMode(DEGREES);
    
    var heur = hour();
    var minutee = minute();
    var seconde = second();
    var milliseconde = millis();
    
   
    background(0);
    
    
    if (prevSec != seconde) {
        millisRolloverTime = millis();
    }
    prevSec = seconde;
    var mils = floor(millis() - millisRolloverTime);
    
    
    
    
    var secondsWithFraction   = (mils / 1000.0);
    
    //remaps the millisecond accordingly to the width of the path of the bar graphs
    var secondBarWidthSmooth  = map(secondsWithFraction, 0, 1, 0, width-100);
    
    
    //position of the bar graphs; the +50 is so that the left side of the bar graphs would be touching the left wall at second=0
    var position = secondBarWidthSmooth+ 50;
    
    
    
    //to produce an oscillating motion of the bar graphs: if the second is an odd number than the 
    if (seconde % 2 == 1) {
        position = width-50-secondBarWidthSmooth;
    }
    else {
        position = position;
    }
    
    
    
    
    //outline of the clock
    stroke(255)
    noFill();
    ellipse(position, height/2, 100, 100)
    
    
    //hour
    noStroke();
    fill(255-heur*3, 255-heur*2, 255, transparency3);
    arc(position, height/2, 100, 100, startingPoint, startingPoint+360/12*heur);
    
    
    //minute
    noStroke();
    fill(200,100+minutee*2,80+minutee,transparency2);
    arc(position, height/2, 75, 75, startingPoint, startingPoint+360/60*minutee);
    
    
    //second
    noStroke();
    fill(180,10,10, transparency1);
    arc(position, height/2, 50, 50, startingPoint, startingPoint+360/60*seconde);
    
    
    
    
    
    //corresponding bar graph will disappear if the second/minute/hour hand hits zero and then reappear when it hits 1
    if (seconde == 0 || seconde > 59) {
        transparency1 =0;
    }
    else {
        transparency1 = 255;
    }
    
    
    if (minutee == 0) {
        transparency2 = 0;
    }
    else {
        transparency2 = 255;
    }
    
    
    if (heur == 0) {
        transparency3 = 0;
    }
    else {
        transparency3 = 255;
    }
    
  
    
 
}

 

 

For this project I created a clock made of three pie graphs, each representing the second, minute and the hour, that oscillates between the two walls every second. The graphs also change their colors over the course of minute/hour.

At first I didn’t know what/how the clock has to do/look like for it to be ‘abstract’, so I tried to create a clock that looks like Mondrian’s painting.

But then I realized maybe it’s something that tells the time without explicitly displaying what time it is. So I tried to incorporate color/position of the clock itself to imply a change in time.

Hardest part of this project was probably making the clock oscillate accordingly each second smoothly, instead of moving one pixel and then stopping and then moving and then stopping. At first I was thinking of manipulating the framecount, but I figured it’d be easier to play around with the code that was posted on the Deliverables page that created a bar that creeps up smoothly every second. First I had to change it so that the position of the circle is the one changing instead of the width of the rectangle, and then the clock would reset itself to the origin after each second.  And then I had to remap the value of the millisecond so that one second would take up the entire width of the canvas. Then I had to make sure that the clock would change its direction and creeps back towards the origin instead of transporting back to it.