Project 6: Clock

sketch

function setup() {
    createCanvas(350, 350);
}

function draw() {
    background(225, 213, 197);
    var s = second();
    var h = hour();
    var m = minute();
    mini(m); //blue circles (minute)
    horse(h); // black rectangle (hour)
    circ(s); // yellow circle (seconds)
}

//yellow circle grows according to seconds and red rectangle gets longer
function circ(s) {
    noStroke();
    fill("orange")
    ellipse(175, 175, s * 3, s * 3);
    fill(209, 54, 48)
    rect(50, 0, 30, s * 6)
    //rect(300, 0, 30, s * 6)
}

//blue circles grow according to the minute
function mini(m) {
    noStroke();
    fill(37, 105, 193)
    ellipse(0, 175, m * 6, m * 6)
    ellipse(350, 175, m * 6, m * 6)
    //triangle(0, 350, m * 5, m * 5, 0, 0)
}

//hour is represented by black rectangle, width and height grow every hour
function horse(h) {
    noStroke();
    rectMode(CENTER);
    fill("black")
    rect(175, 80, h * 5, h * 5)
}

This project was a doozy. I decided to make it in the style of Bauhaus because to me that it was abstract design encompasses. With this design that I made, the circle in the middle and the reed line correspond to the seconds, the square in the center corresponds to the hour, and the blue circles represent the minutes.