Project 06: Abstract-Clock

For this project, the inner circle represents every second, the outer circle shows the seconds turning to minutes, the different colored rays of the “sun” show the different minutes, and the pink background shows the number of hours in the day!

sketch
function setup() {
    createCanvas(350, 350);
    background(173, 216, 230);
}

function draw() {
    background(173, 216, 230);
    hoursBackground();
    minutesCircle();
    secondsCircle();
}

function hoursBackground() { //creates pink rectangles every hour
    push();
    for(var i = 0; i < hour(); i++) {
        strokeWeight(0.1);
        fill(243, 196, 207);
        rect(0,0, width/24, height);
        translate(width/24,0);
    }
    pop();
}

function minutesCircle() { //every minute, a new ray appears coming out of the inner circle
    push();
    strokeWeight(11);
    translate(width/2, height/2);
    for (var i = 0; i < minute(); i ++) {
        angleMode(DEGREES);
        if(i % 2 == 0) { //if i mod 2 is 0, then a short yellow line is drawn
            stroke(253, 253, 150, 200);
            line(0,0, 0, -100);
            rotate(6);
        }else{ // else a long orange line is drawn
            stroke(255, 179, 71, 200);
            line(0,0, 0, -125);
            rotate(6);
        }   
    }
    pop();
}

function secondsCircle() {
        fill(173, 216, 230); //creates inner blue circle
        strokeWeight(0.1);
        circle(width/2, height/2, 40);

        strokeWeight(10); //creates outer white circle that counts 60 seconds in a minute
        stroke(255);
        noFill();
        arc(width/2, height/2, 250, 250, 270, 270 + second()*6);

        strokeWeight(1); // creates inner circle that visually shows every second
        fill(255);
        arc(width/2, height/2, 30, 30, 270, 270 + millis()*0.36);
}

Leave a Reply