Xiaoying Meng – Project 6 Abstract Clock

sketch

//xiaoying meng
//B
//xiaoyinm@andrew.cmu.edu
//Project6
var prevSec;
var millisRolloverTime;

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

function draw() {
    background(0); 

    var H = hour();
    var M = minute();
    var S = second();
    
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
    
    var hourBarWidth   = map(H, 0, 23, 0, width);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);
    angleMode(DEGREES);
    stroke(0);

//hour
    push();
    translate(240,20);
    rotate(hourBarWidth);
    rect(0,0,250,250);
    pop();

//minute
    push();
//vertical left
    stroke(255);
    strokeWeight(5);
    translate(0,minuteBarWidth);
    line(125,155,125,270);
    line(135,155,135,270);
    line(145,155,145,270);
    line(155,155,155,270);
    line(165,155,165,270);
    line(175,155,175,270);
    line(185,155,185,270);
//horizontal
    strokeWeight(2);
    line(190,255,350,255);
    line(190,260,350,260);
    line(190,265,350,265);
    line(190,270,350,270);
//vertical right
    strokeWeight(3);
    line(295,155,295,250);
    line(305,155,305,250);
    line(315,155,315,250);
    line(325,155,325,250);
    line(335,155,335,250);
    line(345,155,345,250);
    pop();    

    push();
    fill(205,49,27);
    translate(0,minuteBarWidth);
    rect(190,0,100,250);
    pop();

//second
    push();
//circle
    fill(0);
    translate(secondBarWidth,secondBarWidth);
    arc(0,0,150,150,120,300);
    fill(255);
    arc(0,0,150,150,300,120);
    pop(); 
//lines
    push();
    translate(secondBarWidth,secondBarWidth);
    rotate(-105);
    stroke(255);

    line(-480,-480,480,480);
    pop();

    push();
    translate(secondBarWidth,secondBarWidth);
    rotate(50);
    stroke(255);
    line(-480,-480,480,480);
    pop();
}

I decided to use abstract art as my idea for the abstract clock. As time passes, each shape representing second, minute and hour changes locations. Thus, creating, different compositions.