## atraylor – Project 06 – Section B

// atraylor@andrew.cmu.edu
// Section B
// Project 06

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

function draw() {
background(255, 230, 154);
var offset = sin(millis()) * 2; // movement of hour circle

var h = hour();
var m = minute();
var s = second();

var hCol = map(h, 0, 23, 0, 255); //mapping hour to shade

fill(hCol);
ellipse(width/2, height/2 + offset, 50, 50); // hour circle

for (var i = 0; i < s; i++) { //drawing second dots
c = color(0);

drawSec(i, c);
}

for (var i = 0; i < m; i++){ //drawing minute circles
c = color(0, 40);
drawMin(i, c);
}
}

function drawSec(count, col, offset, offset2) { // fucntion for second dots
push();
offset = cos(millis()/ 350) * random(20, 50); // creating random oscillation
offset2  = sin(millis()/ 350) * random(20, 50);
translate(200, 200);
rotate(radians(count * 6));
fill(col);
ellipse(150 + offset, 0 + offset2, 8, 8);
pop();
}

function drawMin(count, col, offset, a){ // function for minute circles
push();
a = random(50, 70);
offset = sin(millis()) * random(1, 2);
translate(200, 200);
rotate(radians(count * 6));
fill(col);
ellipse(60 + offset, 0, a, a);
pop();
}

Time keeping is an interesting subject to me, especially when you begin to think about inaccuracy. My design is inspired by time keeping by measuring oscillation and resonance. I remember visiting NIST in elementary school to see their atomic clock which measures the resonance frequency of cesium to determine a second, and is the basis of time keeping in the US. While my design doesn’t illustrate a cesium atom’s resonance or the mechanics of atomic clocks, I was inspired to represent oscillation.

## hyt-Project-06: Clock Works

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-06-clock

function setup() {
createCanvas(480, 300);
angleMode(DEGREES);
}

function draw() {

// current time
var H = hour();
var M = minute();
var S = second();

// color palette
var transparency = 170; // alpha value
var red = color(255, 0, 0, 170);
var orange = color(255, 100, 0, 170);
var green = color(7, 150, 70, 170);
var yellow = color(255, 250, 55, transparency);
var blue = color(0, 155, 250, 170);
var purple = color(142, 78, 201, 170);

// draw rainbows
var hDiff = 30;// height difference each time
var initialHL = 190; // initial height on the left
var initialHR = 20; // initial height on the right

background(200 - H, 255 - M * 0.5, 210 - S * 0.7); // bg color randomizes as time goes by

//red
strokeWeight(25); // line thickness
stroke(red);
line(0, initialHL, width, initialHR);
//orange
stroke(orange);
line(0, initialHL + hDiff, width, initialHR + hDiff);
//green
stroke(green);
line(0, initialHL + hDiff * 2, width, initialHR + hDiff * 2);
//blue
stroke(blue);
line(0, initialHL + hDiff * 3, width, initialHR + hDiff * 3);
//purple
stroke(purple);
line(0, initialHL + hDiff * 4, width, initialHR + hDiff * 4);

//----------------------------

// HOURS dots
for (var dotH = 1; dotH <= 24; dotH++) {
noStroke();
fill(yellow);
rect(20 * H, initialHL + 30 - 7.1 * H, 3, 3);
// pacman shape
noStroke();
fill(yellow);
var angle1 = 20;
var angle2 = 310;
arc(20 * H - 20, initialHL + 40 - 7.1 * H, 20, 20, angle1, angle2);
}

// MINUTES dots
for (var dotM = 1; dotM <= 60; dotM++) {
noStroke();
fill(yellow);
rect(7.9 * M, initialHL + 60 - 2.8 * M, 3, 3);
// pacman shape
noStroke();
fill(yellow);
var angle1 = 20;
var angle2 = 310;
arc(7.9 * M - 20, initialHL + 70 - 2.8 * M, 20, 20, angle1, angle2);
}

// SECONDS dots
for (var dotS = 1; dotS <= 60; dotS++) {
noStroke();
fill(yellow);
rect(7.9 * S, initialHL + 90 - 2.8 * S, 3, 3);
// pacman shape
var angle1 = 20;
var angle2 = 310;
arc(7.9 * S - 20, initialHL + 100 - 2.8 * S, 20, 20, angle1, angle2);
}

// clock time shown on the left top side
fill(0, 100);
rotate(-20);
textFont("Courier New", [60]);
time = H + ":" + M + ":" + S;
text(time, -10, 163);

}

For this project, I had several ideas in mind, and somehow thought of the viral Nyan cats looped video on Youtube. Inspired by that, I decided to make a rainbow background with each Pacman moving as a way of representing the clock’s hour, minute, and seconds.

(A really rough sketch for ideation phase)

However, later I realized the extreme difficulty of drawing an arc movement for the Pacman, and resorted to a simpler version of straight lines of rainbow. Some of the variations within the projects are play with colors, transparency, movements and the background color gradient throughout time. I like how the final results turned out, and also enjoyed the process of making.

## Jihee Kim_SectionD_Project-06-Abstract-Clock

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//project6 Abstract Clock
//section D

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

function draw() {
background(127, 87, 75);
drawGrid(); // draw a picnic table pattern in the background with grid
var H = hour()%12; //the hour restarts on a 12-hour basis
var M = minute();
var S = second();

//SECONDS
//for every second, a salt particle comes out of the shaker
//draw the salt shaker
stroke(180);
strokeWeight(2);
fill(220);
ellipse(77.5, 120, 55, 55); // head of the shaker
fill(255);
stroke(180);
quad(35, 20, 50, 120, 105, 120, 120, 20); // the body of salt shaker
line(55, 20, 70, 120); // left profile line of shaker
line(100, 20, 85, 120); // right profile line of shaker
noStroke();
fill(180);
ellipse(73, 138, 5, 5); // hole left
ellipse(82, 138, 5, 5); // hole right
ellipse(77.5, 144, 5, 5); // hole middle
//have the salt particles come out every second
for (var i = 0; i < S; i ++) {
fill(255);
rect(76, 152 + i*5, 2.5, 2.5);
}

// MINUTES
// a ring forms on the plate of eggs every minute
//draw the plate of eggs
fill(230);
noStroke();
ellipse(width*3/4-1, height/4+3, 403, 403); // plate shadow for volume
fill(255);
ellipse(width*3/4, height/4, 400, 400); // plate
//draw navy blue patterns on the plate
noFill();
stroke(155, 187, 234);
strokeWeight(1);
//have ring draw every minute
for (var i = 0; i < M; i++) {
ellipse(width*3/4, height/4, 390-i*6.5, 390-i*6.5);
}

//draw the eggs
noStroke();
//Egg1
fill(239, 228, 202); //428
ellipse(270, height/2-96, 153, 133); //egg white shadow for volume
fill(249, 245, 232);
ellipse(270, height/2-100, 150, 130); //egg white
fill(237, 130, 37);
ellipse(width-230, height/2-85, 53, 53); //egg yolk shadow for volume
fill(242, 139, 40);
ellipse(width-232, height/2-86, 50, 50); //egg yolk
//Egg2
fill(239, 228, 202); //362
ellipse(width*3/4+2, height/2-5, 153, 133); //egg white shadow for volume
fill(249, 245, 232);
ellipse(width*3/4, height/2-9, 150, 130); //egg white
fill(237, 143, 50);
ellipse(width-133, height/2-13, 53, 53); //egg yolk shadow for volume
fill(242, 152, 54);
ellipse(width-135, height/2-14, 50, 50); //egg yolk

//HOURS
//a sausage will appear every hour
//the tray of sausages will clear every 12 hours
//draw a tray for sausage
fill(255);
rect(width/3-45, height-100, width*2/3+45, 100);
rect(width/3-30, height-115, width*2/3+30, 15);
ellipse(width/3-30, height-100, 30, 30); //round the corner of the tray
//draw patterns on the tray
noFill();
stroke(160, 157, 78);
strokeWeight(1);
line(width/3-42, height-100, width/3-42, height);
line(width/3-27, height-112, width, height-112);
arc(width/3-27, height-97, 30, 30, PI, 3*PI/2);
//draw sausage (a sausage appears every hour)
var X = [130, 160, 190, 220, 250, 280, 310, 340, 370, 400, 430, 460];
var Y = 410;
for (var i = 0; i < H; i++) {
stroke(147, 49, 28);
strokeWeight(15); //thickness of the sausage
line(X[i], Y, X[i] + 15, Y + 40);
}
}

function drawGrid() {
// cover canvas with vertical lines to depict a wood table
for (var y = 0; y < height; y ++) {
for (var x = 50; x < width; x += 50) {
stroke(102, 69, 56);
strokeWeight(3);
line(x, y, x, height);
}
}
}

For this project, I created an abstract clock in a picnic setting. I used a hierarchy in size to depict the seconds, minutes and hours. The smallest element, which is the salt particles, represent the seconds. The second in size, which is the blue rings/pattern that form on the plate, depict the minutes. Lastly, the biggest element, the sausages represent the hours. The tray of sausages clears every 12 hours, making this clock based on a 12hr system.

## kyungak-project-06-abstract-clock

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Project 06

var ellcenx = 85;
var ellceny = 100;
var dia = 140;

function setup() {
createCanvas(480, 200);
angleMode(DEGREES);
noStroke();
}

function draw() {

background(213,158,153); //pink background

var h = hour();
var m = minute();
var s = second();

var mappedH = map(h, 0,23, 0,255);
var mappedM = map(m, 0,59, 0,255);
var mappedS = map(s, 0,59, 0,255);

//donut base
fill(195,132,46); //donut brown
ellipse(ellcenx,ellceny,dia,dia); //left donut base
ellipse(ellcenx+155,ellceny,dia,dia); //middle donut base
ellipse(width-ellcenx,ellceny,dia,dia); //right donut base

noStroke();
//chocolate filling on left donut
//color changes according to hours (blue - pink)
fill(mappedH,100,150);
beginShape();
for (var a = 0; a < 360; a += 40) {
let x = 60 * sin(a+1) + ellcenx;
let y = 60 * cos(a+1) + ellceny;
vertex(x,y);
}
endShape(CLOSE);

//chocolate filling on middle donut
//color changes according to minutes (red - yellow)
fill(200,mappedM,50);
beginShape();
for (var a = 0; a < 360; a += 40) {
let x = 60 * sin(a+1) + ellcenx+155;
let y = 60 * cos(a+1) + ellceny;
vertex(x,y);
}
endShape(CLOSE);

//chocolate filling on right donut
//color changes according to seconds (brown - purple)
fill(100,50,mappedS);
beginShape();
for (var a = 0; a < 360; a += 40) {
let x = 60 * sin(a+1) + width-ellcenx;
let y = 60 * cos(a+1) + ellceny;
vertex(x,y);
}
endShape(CLOSE);

//donut hole
fill(213,158,153);
ellipse(ellcenx,ellceny,dia-100,dia-100); //left donut hole
ellipse(ellcenx+155,ellceny,dia-100,dia-100); //middle donut hole
ellipse(width-ellcenx,ellceny,dia-100,dia-100); //right donut hole

//left donut sprinkle
fill(250,233,3);
rect(ellcenx-30,ellceny-30,3,7);
rect(ellcenx-38,ellceny-10,7,3);
rect(ellcenx-10,ellceny+30,3,7);
rect(ellcenx+20,ellceny-40,7,3);
rect(ellcenx+30,ellceny+35,3,7);
rect(ellcenx-30,ellceny+20,7,3);
rect(ellcenx,ellceny-40,3,7);
rect(ellcenx+30,ellceny-20,7,3);
rect(ellcenx+40,ellceny+10,7,3);
rect(ellcenx+10,ellceny+30,7,3);
rect(ellcenx-40,ellceny+10,3,7);

//middle donut sprinkle
fill(255);
rect(ellcenx-30+155,ellceny-30,3,7);
rect(ellcenx-38+155,ellceny-10,7,3);
rect(ellcenx-10+155,ellceny+30,3,7);
rect(ellcenx+20+155,ellceny-40,7,3);
rect(ellcenx+30+155,ellceny+35,3,7);
rect(ellcenx-30+155,ellceny+20,7,3);
rect(ellcenx+155,ellceny-40,3,7);
rect(ellcenx+30+155,ellceny-20,7,3);
rect(ellcenx+40+155,ellceny+10,7,3);
rect(ellcenx+10+155,ellceny+30,7,3);
rect(ellcenx-40+155,ellceny+10,3,7);

//right donut sprinkle
fill(255,145,0);
rect(width-ellcenx-30,ellceny-30,3,7);
rect(width-ellcenx-38,ellceny-10,7,3);
rect(width-ellcenx-10,ellceny+30,3,7);
rect(width-ellcenx+20,ellceny-40,7,3);
rect(width-ellcenx+30,ellceny+35,3,7);
rect(width-ellcenx-30,ellceny+20,7,3);
rect(width-ellcenx,ellceny-40,3,7);
rect(width-ellcenx+30,ellceny-20,7,3);
rect(width-ellcenx+40,ellceny+10,7,3);
rect(width-ellcenx+10,ellceny+30,7,3);
rect(width-ellcenx-40,ellceny+10,3,7);

fill(0);
textSize(10);
text( h + " hour(s) " + m + " minute(s) " + s + " second(s) ", 20,20);
}

For this project, I wanted to make three donuts that each represented hours, minutes, and seconds of time. Instead of tallying the time changes with visual elements, I wanted to express it through color. For me, using color meant taking more of an abstract approach to time, which is always expressed as exact numbers. By letting time gradually alter the icing color of the donut, I wanted the viewers to not be able to tell the time in a glance but to feel the time tick and change. Because hours and minutes don’t go by so quickly, I put a reference on the top to let people know that the clock is working. But by paying attention to the color changes, one can easily tell that the clock is doing its job, but in a unique way.

## mmiller5-Project-06

//Michael Miller
//Section A
//mmiller5@andrew.cmu.edu
//Project-06

//Coordinates for pandas
var pandaX = [30, 90, 150, 210, 270, 330, 390, 450,
30, 90, 150, 210, 270, 330, 390, 450,
30, 90, 150, 210, 270, 330, 390, 450];
var pandaY = [298, 298, 298, 298, 298, 298, 298, 298,
455, 455, 455, 455, 455, 455, 455, 455,
200, 200, 200, 200, 200, 200, 200, 200];

function setup() {
createCanvas(480, 480);
frameRate(1);
noStroke();
}

function draw() {
//relates time to ratio of circular motion for sun and moon
var hourRat = ((hour() + (minute() / 60)) / 24) * 2 * PI;
var bambooX = [];
var bambooY = [];
//darkens during night, brightens during day
var bgCol = color(49, 49, constrain(160 + 120 * -cos(hourRat), 49, 200));
background(bgCol);
//sun
fill(255, 255, 0);
ellipse(width / 2 - sin(hourRat) * 200, height / 2 + cos(hourRat) * 200,
150, 150);
//moon
fill(230);
ellipse(width / 2 + sin(hourRat) * 200, height / 2 - cos(hourRat) * 200,
100, 100);
fill(bgCol);
ellipse(width / 2 + sin(hourRat + .2) * 200,
height / 2 - cos(hourRat + .2) * 200,
75, 75);
//midground
fill(116, 116, 55);
rect(0, 2 * height / 3 - 100, width, 2 * height / 3 - 100);
//foreground
fill(154, 116, 55);
rect(0, 2 * height / 3, width, 2 * height / 3);
//time tracking mechanics
bambooFall(width / 2, 2 * height / 3);
//every hour, a new panda comes to feast on the accumulated bamboo
for(var i = 0; i < hour(); i ++) {
panda(pandaX[i], pandaY[i]);
}
bambooGrow(width / 2, 2 * height / 3);
}
//central bamboo grows one stalk per second, making happy pandas
function bambooGrow(x, y) {
for(var sec = 0; sec < second(); sec ++) {
fill(120, 180, 56);
rect(x, y - 4 * sec, 3, 3);
fill(128, 75, 35);
rect(x, y - 4 * sec - 1, 3, 1);
}
}
//when bamboo gets too tall, it falls in a half circle, stacking up every minute
function bambooFall(x, y) {
for(var min = 0; min < minute(); min ++) {
fill(177, 200, 60);
push();
translate(x, y);
rotate(radians(2 + (min / 60) * 176));
rect(0, 0, 180, 3);
pop();
}
}
//panda and its body parts
function panda(x, y) {
pandaBody(x, y);
pandaHead(x, y - 40);
}
function pandaHead(x, y) {
fill(255);
ellipse(x, y, 50, 50);
fill(0);
ellipse(x - 20, y - 20, 15, 15);
ellipse(x + 20, y - 20, 15, 15);
ellipse(x - 10, y, 10, 10);
ellipse(x + 10, y, 10, 10);
ellipse(x, y + 7, 8, 6);
fill(255);
ellipse(x - 9, y - 1, 2, 4);
ellipse(x + 9, y - 1, 2, 4);
}
function pandaBody(x, y) {
fill(255);
ellipse(x, y, 55, 50);
fill(0);
ellipse(x - 18, y - 12, 20, 25);
ellipse(x + 18, y - 12, 20, 25);
ellipse(x - 19, y + 13, 25, 23);
ellipse(x + 19, y + 13, 25, 23);
}

Yep, more bamboo.  Why?  I was inspired by the exceptional speed at which bamboo grows, but then I thought, “Now what if it grew super fast?”  The consequences of lightning bamboo are staggering — potential building material, fuel, and of course, food for pandas!  Imagine an infinity ice cream dispenser, except that you never get full (or fat, we’ll ignore that too) — that’s exactly what this is for pandas!  I think word of this would spread pretty quickly, but pandas are slow so they take a while to get there (1 hour exactly, actually.  Punctual pandas).

Now I don’t actually do all that much art, so my product probably doesn’t look as amazing as it could — the pandas are a buncha colored circles — but I think it works.  The coding was pretty fun for this project, and it took me some time to figure out how to make the time countable.  I probably would’ve been more comfortable doing something more abstract, but I thought I’d give this a try, and I think it worked out in the end.

## jennyzha-Project 06

// Jenny Zhang
// Section D
// jennyzha@andrew.cmu.edu
// Project 06

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var r = 100;
var b = 100;
var g = 100;
var e1 = 100;
var e2 = 100;
var e3 = 100;
var mouthSizeW = 5;
var mouthSizeH = 10;
var prevSec;
var millisRolloverTime;

function setup() {
createCanvas(480, 480);
millisRolloverTime = 0;
}

function draw() {
background(255,250,200);

// Fetch the current time
var H = hour();
var M = minute();
var S = second();

if (prevSec != S) {
millisRolloverTime = millis();
}
prevSec = S;
var mils = floor(millis() - millisRolloverTime);

var hourBarWidth   = map(H, 0, 23, 0, width);
var minuteBarWidth = map(M, 0, 59, 0, width);
var secondBarWidth = map(S, 0, 59, 0, width);

var secondsWithFraction   = S + (mils / 1000.0);
var secondsWithNoFraction = S;
var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, width);

noStroke();
fill(255, 200, 200);
ellipse(width/2, height/2, hourBarWidth, hourBarWidth);
var eyeLX = width/2 - hourBarWidth*0.25;
var eyeRX = width/2 + hourBarWidth * 0.25;
fill(0,90,150);
ellipse(eyeLX, height/2, minuteBarWidth/3, minuteBarWidth/3);
ellipse(eyeRX, height/2, minuteBarWidth/3, minuteBarWidth/3);
fill(226,43,42);
var mouth = width/2
ellipse(mouth, height-height/4, secondBarWidthChunky/3, secondBarWidthChunky/3)
}

This project was inspired by our third project, the variable faces, where I made the head the hour, the eyes the minute, and the mouth a function of the seconds. I enjoyed going back to my previous project and reviewing, improving, and understanding my past code on a deeper level as I refined it into an abstract clock for this project.

## Jdbrown – Project 6 – Nature Clock

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Project 6: Clock
// Section C

var slowVel = 1.0;
var medVel = 1.5;
var speedyVel = 2;

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

function draw () {
background (25, 150, 150, 150);

var S = second ();
var M = minute ();
var H = hour ();

// setting up the Sun (measurement of seconds);

push ();
stroke (255);
strokeWeight (2.5);
translate (width, 0);
rotate (radians (S * 6));
fill (0, 0);
arc (0, 0, 320, 320, radians (0), radians (45));
arc (0, 0, 320, 320, radians (55), radians (100));
arc (0, 0, 320, 320, radians (110), radians (155));
arc (0, 0, 320, 320, radians (165), radians (210));
arc (0, 0, 320, 320, radians (220), radians (265));
arc (0, 0, 320, 320, radians (275), radians (310));
arc (0, 0, 320, 320, radians (320), radians (350));
fill (200, 180, 70);
ellipse (0, 0, 200 + (H * 3), 200 + (H * 3));   // draws the sun
fill (255);
ellipse (0, 0, S + 75, S + 75);     // draws the white ball in the sun, growing every second
pop ();

push ();
stroke (255);
strokeWeight (1.5);
translate (width, 0);
rotate (radians (S * -6));
fill (0, 0);
arc (0, 0, 300, 300, radians (0), radians (45));
arc (0, 0, 300, 300, radians (55), radians (100));
arc (0, 0, 300, 300, radians (110), radians (155));
arc (0, 0, 300, 300, radians (165), radians (210));
arc (0, 0, 300, 300, radians (220), radians (265));
arc (0, 0, 300, 300, radians (275), radians (310));
arc (0, 0, 300, 300, radians (320), radians (350));
fill (200, 180, 70);
pop ();

push ();
stroke (255);
strokeWeight (1);
translate (width, 0);
rotate (radians (S * 6));
fill (0, 0);
arc (0, 0, 280, 280, radians (0), radians (45));
arc (0, 0, 280, 280, radians (55), radians (100));
arc (0, 0, 280, 280, radians (110), radians (155));
arc (0, 0, 280, 280, radians (165), radians (210));
arc (0, 0, 280, 280, radians (220), radians (265));
arc (0, 0, 280, 280, radians (275), radians (310));
arc (0, 0, 280, 280, radians (320), radians (350));
fill (200, 180, 70);
pop ();

// making the scenery, measuring hours;

if (H >= 12) {

noStroke();
fill (100 - (H * 3), 205 - (H * 3), 50, 200);
rect (0, 0 - 15, 150, 400); // filter (top)
fill (100 - (H * 3), 205 - (H * 3), 50, 200);
rect (0, height - 75, 200, 400);    // filter (bottom)
fill (100 - (H * 3), 205 - (H * 3), 50, 200);
rect (200, 150, 200, 400);    // filter (side)
fill (25, 150, 150);
ellipse (365, 190, 105, 105); // curve
fill (100 - (H * 3), 205 - (H * 3), 50, 200);
ellipse (365, 190, 50, 50); // curve
fill (40 - (H * 3), 75 - (H * 3), 200, 150);
ellipse (0, height, 400, 500);  // waterfall
fill (67 - (H * 3), 75 - (H * 3), 100, 150);
ellipse (0, height, 300, 300);  // waterfall shadow
fill (100 - (H * 3), 75 - (H * 3), 100, 150);
ellipse (0, height, 120, 150);  // waterfall shadow

}

if (H < 12) {

noStroke();
fill (100 + (H * 3), 205 + (H * 3), 50, 200);
rect (0, 0 - 15, 150, 400); // filter (top)
fill (100 + (H * 3), 205 + (H * 3), 50, 200);
rect (0, height - 75, 200, 400);    // filter (bottom)
fill (100 + (H * 3), 205 + (H * 3), 50, 200);
rect (200, 150, 200, 400);    // filter (side)
fill (25, 150, 150);
ellipse (365, 190, 105, 105); // curve
fill (100 + (H * 3), 205 + (H * 3), 50, 200);
ellipse (365, 190, 50, 50); // curve
fill (40 + (H * 3), 75 + (H * 3), 200, 150);
ellipse (0, height, 400, 500);  // waterfall
fill (67 + (H * 3), 75 + (H * 3), 100, 150);
ellipse (0, height, 300, 300);  // waterfall shadow
fill (100 + (H * 3), 75 + (H * 3), 100, 150);
ellipse (0, height, 120, 150);  // waterfall shadow

}

// drawing little bird boi;

birdBoi();

// drawing sky stuff, measuring minutes;

var cloudX = -100;

fill (255 - (M * 3), 200);
ellipse (cloudX + slowVel, 50, 200, 25);
ellipse ((cloudX + medVel), 90, 200, 25);
ellipse ((cloudX + speedyVel) - 250, 150, 200, 25);

slowVel += 1 + (M / 10);
medVel += 1.2 + (M / 5);
speedyVel += 1.5 + (M / 2.5);

// making sure that clouds will respawn on the other side;

if (cloudX + slowVel > width + 100) {
cloudX = -200;
slowVel = 1;
}
if (cloudX + medVel > width + 100) {
cloudX = -200;
medVel = 1.2;
}
if (cloudX + speedyVel > width  + 400) {
cloudX = -200;
speedyVel = 1.5;
}
}

// making the bird boy

function birdBoi () {

var H = hour();
var M = minute ();
var S = second ();

for (var i = 0; i < 20; i++) {
push ();
translate (30, 250);
rotate (radians (i * 6));
rotate (radians (i));
stroke (0);
strokeWeight (2.5);
line (0, 0, 10 + i, 10 + i);
pop ();
}

fill (0);
triangle (30, 245, 75, 245, 35, 255);  // beak
fill (255);
ellipse (30, 270, 30, 30);  // body
ellipse (35, 250, 25, 25);  // head
fill (200);
ellipse (25, 270, 18, 25);  // body shadow
fill (200);
ellipse (32, 251.5, 18, 20);  // head shadow
fill (0);
ellipse (40, 248, 5, 5);    // eye

for (var i = 0; i < 20; i++) {
push ();
translate (20, 255);
rotate (radians (i * 6));
rotate (radians (i));
stroke (0);
strokeWeight (2.5);
line (0, 0, 10 + i, 10 + i);
pop ();
}
}

For this project, I had a lot of different ideas. Most of them were HORRIBLE. But I settled on a peaceful scene, a hummingbird-boi partying and communing with nature.

The “clock” portion of the design is as follows:

Seconds are measured by the rotation of the sun’s rays, as well as the little white ball in the middle of the sun.

Minutes are measured by the clouds’ speed and color.

Hours are measured by pigment changes in the physical landscape (bright, warm for morning and dark blues for night).

## mjanco – project6-abstractclock-sectionB

//Michelle Janco
//Section B
//mjanco@andrew.cmu.edu
//Project06-AbstractClock

function setup() {
createCanvas(600, 800);
}

function draw() {
noStroke();
background(228,200,30);

var mapH = map(hour(), 0,30, 0, width);

//make ellipse that grows depending on the hour
fill(250, 150, 0);
ellipse(300,400, mapH, 50);

for (var i = 0; i < 60; i++){
var c = color(240, 200, 0);
//make seconds red
if (second() == i) {
c = color(240, 80, 30);
}
//if not, purple
else {
c = color(130, 100, 180);

//getting the minutes to gradually make the clock green as time goes on
if (i < minute() & i != second()) {
c = color(100, 150, 30);
}
}
drawMark(i, c);
}
}
function drawMark(count, col) {
push();
translate(300, 400);
rotate(radians(count*6));
fill(col);
strokeWeight(1);
ellipse(50,50, 300,3);
pop();
}

For this assignment, I was inspired by wacky 60’s / 70’s room accessories, with their bright colors and abstract shapes. It took me a while to figure out how to make the minutes add up and then reset once 60 minutes pass, but eventually i figured it out, and learned a lot from doing this project.

## rsp1-Project06-Abstract-Clock

/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 06: Abstract Clock*/

var prevSec;
var millisRolloverTime;

function setup() {
createCanvas(620, 620);
noStroke();
millisRolloverTime = 0;
}

function draw() {
background(17,76,98);

// Fetch the current time
var H = hour();
var X = (H%12);//so that the clock becomes a 12hr clock instead of 24 hr
var M = minute();
var S = second();

if (prevSec != S) {
millisRolloverTime = millis();
}
prevSec = S;
var mils = floor(millis() - millisRolloverTime);

//showing text of time
fill(255);
text(nf(X,2,0) + ':' + nf(M,2,0) + ':' + nf(S,2,0),width/2-30,15);

var hourBarWidth   = map(H, 0, 23, 0, width);
var minuteBarWidth = map(M, 0, 59, 0, width);
var secondBarWidth = map(S, 0, 59, 0, width);

// Making the seconds into a smoother transition
var secondsWithFraction   = S + (mils / 1000.0);
var secondsWithNoFraction = S;
var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, width);

//floorbed
fill(250,247,196);
rect(0,height-115,width,200);

//drawing the snail (hour)
noStroke();
fill(207,230,239);
rect(0, 500, hourBarWidth, 10);
fill(234,207,239);
ellipse(hourBarWidth,484,45,45);
fill(155,124,161);
ellipse(hourBarWidth,505,70,10);
fill(155,124,161);
ellipse(hourBarWidth+20,483,5,45);
fill(155,124,161);
ellipse(hourBarWidth+30,483,5,45);
fill(255);
ellipse(hourBarWidth+20,465,15,15);
fill(255);
ellipse(hourBarWidth+30,465,15,15);
fill(25);
ellipse(hourBarWidth+20,465,8,8);
fill(25);
ellipse(hourBarWidth+30,465,8,8);

//drawing fish hook (seconds)
push();
noFill();
strokeWeight(10);
stroke(160);
arc(100,secondBarWidthSmooth,70,70,0,PI);
strokeWeight(5);
arc(135,secondBarWidthSmooth-110,10,10,0,TWO_PI);
strokeWeight(6);
rect(133,secondBarWidthSmooth-100,5,100,10);
stroke(50);
rect(133,0,2,secondBarWidthSmooth-110,5);

pop();

//drawing the fish (minute)
fill(94,229,239);
ellipse(minuteBarWidth,275,100,80);
fill(255);
ellipse(minuteBarWidth+25,250,40,40);
fill(0);
ellipse(minuteBarWidth+35,250,20,20);
fill(94,191,239);
triangle(minuteBarWidth-80,255,minuteBarWidth-80,295,minuteBarWidth-40,270);
//and exclamation point
fill(255);
rect(minuteBarWidth-5,130,10,60,10);
ellipse(minuteBarWidth,210,10,10);

}

For my project, I wanted to make a clock but visually represented in a unique way. Here, I decided to make an instance/ scene of a fish underwater. The snail on the floorbed represents the hours (bc snails are slow anyway), the fish represents the minutes, and the fish hook represents the seconds. The scene here is that the fish is swimming away from the oncoming hook while the snail is just crawling away in a leisurely pace. As seen in the sketch, I initially wanted to use bubbles to represent the seconds, but went ahead and changed my idea to the fish hook instead.

(not sure if it’s just me, but for some reason I have to refresh the page a couple times to see the code work.)

## jamieh-Project06-Abstract-Clock

/*
Jamie Ho
jamieh@andrew.cmu.edu
10:30
Project 6
*/

var d1 = 24;	//hour
var d2 = 60;	//minutes/seconds
var slope1;		//slope of the diagonal line from hour triangle
var slope2;		//slope of the diagonal line from minute triangle

function setup() {
createCanvas(200, 400);
}

function draw() {
//this if statement inverts the black-white colours depending on AM or PM
if(hour()>11){		//PM
background(0);
} else {			//AM
background(255);
}
//HOUR
slope1 = (height/2-height/8)/d1;
for(var i = 0; i < d1; i++){
//12am, 3am, 6am, 9am, 12pm, 3pm, 6pm, 9pm
//longer and thicker line
if(i%3 == 0){
if(hour()>11){
stroke(200);
} else {
stroke(0);
}
strokeWeight(1);
line(0, height/8+i*slope1,
width/2+d1-i, height/8+i*slope1);
} else {
//thin lines for all other times
stroke(100);
strokeWeight(0.5);
line(0, height/8+i*slope1,
width/2-d1+i, height/8+i*slope1);
}
//blue triangle fill for HOUR
noStroke();
fill(26, 136, 255, 200);
if(i == hour()){
triangle(width/2+d1-i, height/8+i*slope1,
width/2-d1+i, height/8+i*slope1,
width/2, height/2);
}
}
//MINUTE
slope2 = (height*(7/8)-height/2)/d2;
for(var j = 0; j <= d2; j++){
//10 min, 20 min, 30 min, 40 min, 50 min, 60 min
if(j%10 == 0){
if(hour()>11){		//PM
stroke(200);
} else {			//AM
stroke(0);
}
strokeWeight(1);
line(width/2-j, height/2+j*slope2,
width, height/2+j*slope2);
}
//blue quad fill for MINUTE
noStroke();
fill(0, 99, 204, 200);
if(j == minute()){
quad(width/2-d2, height*(7/8),
width/2+d2, height*(7/8),
width/2+d2-j, height*(7/8)-j*slope2,
width/2-d2+j, height*(7/8)-j*slope2);
}
//SECOND
stroke(179, 204, 255);
strokeWeight(2);
if(j == second()){
line(width/2, height/2, width/2, height/2+j*slope2)
}
}
//TWO TRIANGLES
if(hour()>11){		//PM
stroke(255);
} else {			//AM
stroke(0);
}
strokeWeight(2);
noFill();
//hour triangle
triangle(width/2-d1,height/8,
width/2+d1, height/8,
width/2, height/2);
//minutes triangle
triangle(width/2, height/2,
width/2-d2, height*(7/8),
width/2+d2, height*(7/8));
}

For this project, I wanted to do something similar to the hourglass, but make it more geometric with just triangles and lines. The lines and background colours invert when AM switches to PM and vice versa.