Yingying Yan – Project 06 – Abstract Clock

sketch

/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project-06
*/

function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
}

function draw() {

    background(13, 18, 54)

	translate(240,240)
    //change hour, min and sec into variables
	var hr = hour();
    var min = minute();
    var sec = second();

    //rotate the entire canvas so people can read it as a clock

    rotate(-90);
    noFill();

    //remap hour into 360 degree angles and draw an
    //arc that keeps track of the hours
    var mappedHr = map(hr % 12, 0, 12, 0, 360);
    push();
    stroke(5, 167, 221);
    strokeWeight (20);
    arc(0,0,300,300, 0, mappedHr);
    pop();
    //remap min into 360 degree angles and draw an
    //arc that keeps track of the minutes
    var mappedMin = map(min, 0, 59, 0, 360);
    push();
    stroke(223, 230, 244);
    strokeWeight(10);
    arc(0,0,200,200, 0, mappedMin);
    pop();

    //remap second into 360 degree angles
    var mappedSec = map(sec, 0, 59, 0, 360);

    //re rotate the circlces or planets
    push()
    rotate(-45)

    //planet one which follows the hour
    push()
    rotate(mappedHr);
    noStroke()
    fill(42, 51, 127, 100);
    ellipse(100, 100, 50, 50);
    pop();

    //planet two which follows the minutes
    push()
    rotate(mappedMin);
    noStroke()
    fill(181, 175, 215);
    ellipse(70, 70, 25, 25);
    pop()
    
    //planet three which follows the seconds
    push();
    rotate(mappedSec);
    strokeWeight(2);
    fill(38, 13, 52);
    ellipse(50, 50, 10, 10);
    line(0,0,47.5,47.5);
    pop();
    pop();

}

For this project, I wanted to make a simple clock without hands or number. But something similar to how one planet rotates around another in a certain amount of time. So I choose to keep track of hour, minutes and sections with a circle similar to the shapes of the planets. I began with something very complicated but I could not figure out how to do that, so I changed my mind to make something simple and abstract.