# Matthew Erlebacher Project-06 Abstract Clock

``````// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-06

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

function draw() {
background(125);

var H = hour();
var M = minute();
var S = second();
// Sets up variables for time

var mappedH = map(H, 0, 23, 20, 240);
var mappedM = map(M, 0, 59, 0, width);
var mappedS = map(S, 0, 59, 0, width / 2);
// Maps time variables to different values

fill(255);
ellipse(width / 2, height / 2, width, height);
// Creates giant circle in the background

fill(75);
rect(width / 2 - 5, 0, 10, mappedS);
// Creates rectangle that extends downward length is connected to seconds

fill(0);
rect(0, height - 20, mappedM, 20);
// Creates rectangle at the bottom extends rightward lenght is connected to minutes

fill(0);
ellipse(width / 2, mappedS, mappedH, mappedH);
// Creates circle in the middle of canvas radius connected to hours

fill(125);
text(H, width / 2, 3 * height / 4 + 40);
text(M, width / 2, 3 * height / 4 + 60);
text(S, width / 2, 3 * height / 4 + 80);
// Creates texts that list time
}``````

The end design was definitely very abstract. The design was a circle that lowers as each second passes. The radius of the circle increases by the hour, and there is a bar at the bottom that increases by the minute. I also included the time in text since I thought it might be unclear as to what everything meant. Originally the circle was supposed to come from the bottom, but I realized that it would be easier to implement, and it also looked better in the end. While I would have liked to make a more interesting design, I didn’t have the time since I was already struggling with arrays, and the time variables. Despite this, I enjoyed what I came up with, and its overall simplicity.