Xu Xu – Project 06 – Abstract Clock

sketch

//Claire Xu
//xux1@andrew.cmu.edu
//Section B
//Project 05
var spacing = 400/30;
var distance = 400/30;
var diam = 4;

function setup() {
    createCanvas(400, 400);

}
function draw() {
    let s = second();
    let m = minute();
    let h = hour();
    background(245);
    //hour
    fill(33, 72, 39);
    arc(width/2, height/2, 350, 350, 0 + TWO_PI * h/12, PI + TWO_PI * h/12);
    noFill();
    strokeWeight(2);
    stroke(100);
    strokeCap(SQUARE);
    arc(width/2, height/2, 220, 220, 0 + TWO_PI * h/12, PI + TWO_PI * h/12);
    arc(width/2, height/2, 190, 190, 0 + TWO_PI * h/12, PI + TWO_PI * h/12);
    arc(width/2, height/2, 160, 160, 0 + TWO_PI * h/12, PI + TWO_PI * h/12);
    //minute
    noStroke();
    fill(163, 199, 139);
    arc(width/2, height/2, 325, 325, 0 + TWO_PI * m/60, PI + TWO_PI * m/60);
    noFill();
    strokeWeight(2);
    stroke(205);
    strokeCap(SQUARE);
    arc(width/2, height/2, 250, 250, 0 + TWO_PI * m/60, PI + TWO_PI * m/60);
    arc(width/2, height/2, 220, 220, 0 + TWO_PI * m/60, PI + TWO_PI * m/60);
    arc(width/2, height/2, 190, 190, 0 + TWO_PI * m/60, PI + TWO_PI * m/60);
    //second
    noStroke();
    fill(241, 225, 191);
    arc(width/2, height/2, 300, 300, 0 + TWO_PI * s/60, PI + TWO_PI * s/60);
    noFill();
    strokeWeight(2);
    stroke(255);
    strokeCap(SQUARE);
    arc(width/2, height/2, 280, 280, TWO_PI * s/60, PI + TWO_PI * s/60);
    arc(width/2, height/2, 250, 250, TWO_PI * s/60, PI + TWO_PI * s/60);
    arc(width/2, height/2, 220, 220, TWO_PI * s/60, PI + TWO_PI * s/60);
    //clock center
    noStroke();
    fill(241, 225, 191);
    circle(width/2, height/2, 100);
    fill("black");
    circle(width/2, height/2, 10);
}

For this project I was inspired by an abstract clock that I saw online, which abstracts the second/minute/hour hands, where it would have entire half-circle plates rotating to count the time. I used arc to draw the half-circles, and instead of trying to rotate the arc through the center, I discovered that I could just redraw the arc at new positions every frame according to the time. I wish I could figure out how to have holes in the half-circle plates like in the real abstract clock images. Unlike the real abstract clock reference, the line that’s tangent to the flat side of the half-circle is where the time is pointed at.

•