/*
Emma Nicklas-Morris
Section B
enicklas
Project-06 (Abstract clock)
*/
var adj = 85;
var rMin = 200; // radius of min circle
var rH = 300; // radius of hour circle
var rectW = 18;
var rectH = 8;
var totMin = 60;
var hours = 12;
var mAngle = 6; // minute angle
var hAngle = 30; // hour angle
var start;
var stop;
// for color gradient
var center = 128;
var width2 = 127;
var y = - 165; // y position of rectangle
function setup() {
createCanvas(400, 400);
}
function draw() {
background("#f2f2f2");
// sets the time
var sec = nf(second(), 2);
var min = nf(minute(), 2);
var hourCir = hour() % hours; // accounts for a 12 hour clock, not 24 hour
if (hourCir === 0) { // if 0, set to 12
hourCir = numHours;
}
// draws the current time in the corner
time = hourCir + ":" + min + ":" + sec;
textSize(20);
fill("black");
text(time, width - adj, adj/3);
// draw hours circle
drawHours();
// draw minute circle
drawMinute();
// draws seconds on the outside
drawSeconds();
}
function drawSeconds() {
var secs = nf(second(), 2);
var freq = .1;
push();
translate(width/2, height/2);
for (var s = 0; s < 60; s ++) {
rectMode(CENTER);
// rotate the rectangles to make different circular patterns each second
rotate(secs * mAngle);
// color changes every second
noStroke();
red = sin(freq * secs) * width2 + center;
b = sin(freq * secs + 2) * width2 + center;
g = sin(freq * secs + 4) * width2 + center;
fill(red, g, b);
// draws rectangles
rect(0, y, rectW, rectH);
}
pop();
}
function drawMinute() {
// set minute value
var mins = nf(minute(), 2);
push();
translate(width/2, height/2); // put in center of canvas
noStroke();
// // angles to get the left side of the purple wedge at 12 o'clock
var top = 270;
pAngle = mins / totMin; // slowly rotates circle constantly
// smooth rotation for the minute
currAngle = mins * mAngle + (mAngle * pAngle);
rotate(radians(currAngle + top));
for (var m = 0; m < 360; m += 6) {
var freq = .1;
if (m === 0) { // if its the first wedge, start at 0
start = 0;
}
else { // set the start position to the previous wedge's stop position
start = stop;
}
stop = start + TWO_PI * (1 / totMin); // sets the current wedge's stop position
// colors based on sin wave to make rainbow
i = m / 6;
red = sin(freq * i) * width2 + center;
b = sin(freq * i + 2) * width2 + center;
g = sin(freq * i + 4) * width2 + center;
fill(red, g, b);
arc(0, 0, rMin, rMin, start, stop, PIE);
}
pop();
}
function drawHours() {
//set the hour and minutes
var hCir = hour() % hours;
var mins = nf(minute(), 2);
push();
translate(width/2, height/2); // put in center of canvas
noStroke();
// angles to get the left side of the purple wedge at 12 o'clock
var top = 270;
partAngle = mins / totMin; // slowly rotates circle constantly
// smooth rotation for the hour
currAngle = hCir * hAngle + (hAngle * partAngle);
rotate(radians(currAngle + top));
// draws the 12 wedges
for (var h = 0; h < 360; h += 30) {
var freq2 = .2;
if (h === 0) { // if its the first wedge, start at 0
start2 = 0;
}
else { // set the start position to the previous wedge's stop position
start2 = stop2;
}
stop2 = start2 + TWO_PI * (1 / hours); // sets the current wedge's stop position
// colors based on sin wave to make rainbow
hWedge = h / 12;
red2 = sin(freq2 * hWedge) * width2 + center;
blue = sin(freq2 * hWedge + 2) * width2 + center;
green = sin(freq2 * hWedge + 4) * width2 + center;
fill(red2, green, blue);
arc(0, 0, rH, rH, start2, stop2, PIE);
}
pop();
}
For this project I knew I wanted to use something with colors and have it still be readable to some degree. I came up with the idea of having the different colors being the “numbers” on the clock. For the seconds, I was thinking of doing rectangles increasing as it goes around the circle, but what I have in my final product, I think looks “cooler.” The most difficult part was trying to get the color gradient to work how I envisioned. As you play with the frequency, the colors change. Also, for the second, I struggled to get what I originally intended, but a happy accident happened and I like my final product. You can still tell the time to some degree. At 12:00:00 both circles will have the purple wedge at the top (left side exactly at top). And the 00 seconds have one single purple rectangle at the top too.