//Name: Alessandra Fleck
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-06
function setup() {
createCanvas(480, 480);
noStroke();
}
function draw() {
background(255);
//set for for hour,minutes and seconds
var h = hour();
var m = minute();
var s = second();
//blue waves going down
for (var i = 0; i < (s*10); i ++) { //increments at x10 the distance
stroke(179,223,222);
strokeWeight(0.3);
line(i*4, 0, width, i);
line(i*2, 0, height * 2, i);
line(i*4, 0, height * 4, i);
line(i*2, 0, height * 0.75, i + 20);
line(i*4, 0, height * 0.6, i + 20);
line(i*2, 0, height * 0.5, i + 100);
}
//brown waves going down
for (var i = 0; i < (s*20); i +=5) { //increments at x20 the distance
stroke(255);
strokeWeight(0.5);
line(i*2, 0, width, i);
line(i*2, 0, height * 2, i);
line(i*2, 0, height * 4, i);
line(i*2, 0, height * 0.75, i + 200);
line(i*2, 0, height * 0.6, i + 200);
line(i*2, 0, height * 0.5, i + 600);
}
//black waves going down for the minutes
for (var i = 0; i < m; i +=5) { //strings will slowly branch out black for every minute
stroke(0);
strokeWeight(0.3);
line(i*2, 0, width, i);
line(i*2, 0, height * 2, i);
line(i*2, 0, height * 4, i);
line(i*2, 0, height * 0.75, i + 200);
line(i*2, 0, height * 0.6, i + 200);
line(i*2, 0, height * 0.5, i + 600);
}
//white circle_01
fill(100,10+(s*50),255);
noStroke();
ellipse(50,s*10,30,30);
//white circle_01_hour
fill(255);
stroke(0);
strokeWeight(1);
ellipse(50,h*10,30,30);
}
For this project I wanted the abstraction of the clock to be something that is completed as time passes. Instead of the long skinny arms of a clock being the seconds passing, I instead made them the minute hands and had the seconds move down in a parametric curve to create a wave in the background.
The sketch above shows a bit of the process in the form of the clock.