## Aaron Lee – Project – 06 – Abstract Clock

``````/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-06-Abstract Clock
*/

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

function draw(){

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

for (H = 0; H < 23; H++) {
noStroke();
let z = map(H, 0, 23, 255, 0);// mapping background day and night
let m = map(H, 0, 23, 0, 240); //mapping moon and sun
background(0, z, 255); //druing the day it is light blue, during night it is dark blue
fill (252, m, 3); //during the day it is red(sun) during night it is yellow (moon)
ellipse(width / 2, height / 2, 200, 200);

stroke(255);//satellite that represents seconds
noFill();
let sec1 = map (S, 0, 60, 360, 0);
arc (200, 200, 300, 300, sec1, 0);
stroke(0, z, 255)
let sec2 = map (S-1, 0, 60, 360, 0);
arc (200, 200, 300, 300, sec2, 0);

stroke(255);//satellite that represents minutes
noFill();
let min1 = map (M, 0, 60, 0, 360);
arc (200, 200, 250, 250, 0, min1);
stroke(0, z, 255);
let min2 = map (M-1, 0, 60, 0, 360);
arc (200, 200, 250, 250, 0, min2);

stroke(255);//satellite that represents hours
noFill();
let hr1 = map (H, 0, 24, 0, 360);
arc (200, 200, 350, 350, 0, hr1);
stroke(0, z, 255);
let hr2 = map (H-1, 0, 24, 0, 360);
arc (200, 200, 350, 350, 0, hr2);
}

}``````

Color of the background and the sphere changes in order to indicate time. The movement of the satellites that orbit around each represent hr, min and sec.

## Sydney Salamy: Project-06-Abstract-Clock

Because of the time of year, I decided to make mine about Halloween. I based my design on the Charlie Brown Halloween special “It’s The Great Pumpkin, Charlie Brown”. I looked up a bunch of photos from this special and started taking what I liked from them and mixing them into my sketch. I had my sketch be of the pumpkin patch where the kids would wait for the Great Pumpkin, and would have the sun and moon tell what time of day it was. I also decided to have the sky change color in response to these. I used if statements and the hour() variable in order to accomplish this. I then went about creating the patch, using for loops to create lots of leaves and also the lines dividing a fence. I individually created each pumpkin in the patch, making the main one the kids are behind the largest and bumpiest.

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

var backColorR = 168;//red value
var backColorG = 215;//green value
var backColorB = 255;//blue value
var lSW = 10;//leaf width
var lSH = 10;//leaf height
var gSP = 20;//space between columns
var vSP = 20;//space between rows
var gA = 20;//# added to g
var vA = 350;//# added to v
var dotX = 213;//x value of girl's dot
var dotY = 352;//y valye of girl's dot
var lineX = 244;//x value of first stripe point
var lineY = 345;//y value of first stripe point
var bFaceX = 258;//x value of center of boy's head
var bFaceY = 316;//y value of center of boy's head
var gFaceX = 211;//x value of center of girl's head
var gFaceY = 316;//y value of center of girl's head

function draw() {
var H = hour();
//"clock" part
push();
noStroke();
//sky colors
//changes sky color according to real hours
if(H > 20){//black
backColorR = 0;
backColorG = 0;
backColorB = 0;
}
else if(H > 16){//dark blue
backColorR = 1;
backColorG = 25;
backColorB = 145;
}
else if(H > 12){//blue
backColorR = 143;
backColorG = 182;
backColorB = 255;
}
else if(H > 8){//light blue
backColorR = 168;
backColorG = 215;
backColorB = 255;
}
else if(H > 4){//yellow
backColorR = 255;
backColorG = 227;
backColorB = 143;
}
else{//pink
backColorR = 255;
backColorG = 94;
backColorB = 129;
}
pop();

background(backColorR,backColorG,backColorB);//sky
//fence
fill("white");
rect(367,300, 112,70);//fence
for(var i = 0; i < 7; i++){//fence dividers
line((i * 16) + 367,300, (i * 16) + 368, 370);//draws dividers
}
//sun
//changes sun position and color according to real hours
if(H > 12 & H < 19){//13 and above
fill(255, 219, 56);
ellipse(width / 2, (H * 23), (width / 2) - 10,(height / 2) - 10);
}
//moon
else if(H > 18){//19 to 0/24
fill(255, 217, 79);
ellipse(width / 2, height - (H * 15), (width / 2) - 10,
(height / 2) - 10);
}
//sun
else{//0 to 12
fill(255, 219, 56);
ellipse(width / 2, height - (H * 30), (width / 2) - 10,
(height / 2) - 10);
}
pop();
noLoop();
//decorations
push();
strokeWeight(.2);
line(374,308, 374,318);//fence line (FL) 1
line(378,310, 378,330);//FL2
line(390,334, 390,346);//FL3
line(405,305, 405,315);//FL4
line(410,311, 410,330);//FL5
pop();
push();
fill("green");
noStroke();
rect(0,360, 480,120);//grass background
ellipse(width / 2,393, 640,100);//grass hill
pop();
//leaves on the ground
push();
noStroke();
for(var g = 0; g < 20; g++){//increments elements
for(var v = 0; v < 10; v++){//draws ellipses
fill(2, 84, 24);//darkest green
ellipse((g * (gSP + 7)) + (gA - 10),(v * (vSP - 5)) + (vA + 7),
lSW,lSH + 2);
ellipse((g * (gSP + 7)),(v * (vSP - 5)) + (vA + 20), lSW,lSH - 4);
ellipse((g * (gSP + 7)) + gA,(v * (vSP - 5)) + (vA + 15),
lSW,lSH + 1);
ellipse(((g + (gA - 1)) * (gSP - 3)) - (gA * 12.5),(v * (vSP - 5))
+ vA, lSW,lSH + 1);
fill(15, 99, 56);//dark green
ellipse((g * (gSP + 9)) + gA,(v * (vSP - 5)) + (vA + 7),
lSW,lSH + 2);
ellipse((g * (gSP * 2.25)),(v * (vSP - 5)) + (vA + 20), lSW,
lSH + 3);
ellipse((g * (gSP * 1.75)) + gA,(v * (vSP - 5)) + (vA + 15),
lSW,lSH);
fill(158, 83, 2);//dark orange
ellipse((g * (gSP * 2.5)) + (gA + 7),(v * (vSP * 2)) + (vA + 7),
lSW + 3,lSH);
ellipse((g * (gSP * 1.5)) - (gA - 5),(v * (vSP * 2.25)) +
(vA + 25), lSW,lSH - 3);
fill(2, 158, 43);//green
ellipse((g * (gSP * 1.75)) + (gA + 7),(v * vSP) + (vA + 7),
lSW,lSH);
ellipse((g * (gSP * 2)) - (gA / 4),(v * (vSP * 2.5)) + (vA + 20),
lSW,lSH);
fill(158, 18, 2);//red
ellipse((g * (gSP * 3.4)) + (gA - 10),(v * (vSP + 5)) + (vA + 4),
lSW,lSH - 1);
fill(122, 108, 26);//olive green
ellipse((g * (gSP * 2.25)) + (gA + 7),(v * vSP) + (vA + 7),
lSW,lSH);
ellipse((g * (gSP * 1.5)) - (gA / 4),(v * (vSP + 15)) + (vA + 3),
lSW,lSH - 2);
}
}
pop();
//characters
push();
noStroke();
//_girl's hair
fill("yellow");
ellipse(gFaceX,gFaceY - 1, 26,26);//main hair
ellipse(gFaceX + 5,gFaceY, 28,20);////right hair
ellipse(gFaceX - 5,gFaceY + 2, 28,20);//left hair
ellipse(gFaceX - 2,gFaceY - 17, 10,10);//main bun
ellipse(gFaceX - 2,gFaceY - 16, 15,7);//left and right buns
//-skin-
fill(250, 217, 162);//skin color
//boy skin
quad(bFaceX - 5,330,bFaceX - 3.5,328, bFaceX + .5,328,
bFaceX + 1,331);//boy's neck
ellipse(bFaceX - 3,bFaceY + 2, 24,20);//boy's cheek
ellipse(278,332, 7,7);//boy's right hand
ellipse(233,329, 7,7);//boy's left hand
ellipse(bFaceX + 11,bFaceY + 4, 5,5);//right ear
ellipse(bFaceX - 13,bFaceY - 1, 5,5);//left ear
//girl skin
quad(gFaceX + 1.5,332,gFaceX + 2,327, gFaceX + 4,327,
gFaceX + 6.5,331);//girl's neck
triangle(206,338, 222,370, 226,336);//right and left arm
ellipse(gFaceX + 12,gFaceY - 1, 5,5);//right ear
ellipse(gFaceX - 12,gFaceY + 2, 5,5);//left ear
pop();
//-clothes-
//boy clothes
fill("red");
//girl clothes
fill("lightBlue");
ellipse(222,336, 7,7);//right shirt sleeve
ellipse(210,338, 7,7);//left shirt sleeve
ellipse(212,302.5, 5,8);//right side of bow
ellipse(206,303, 5,8);//left side of bow
//_boy's hair
line(bFaceX - 3,bFaceY - 13, bFaceX - 6,bFaceY - 10);
line(bFaceX,bFaceY - 13, bFaceX - 3,bFaceY - 10);
line(bFaceX + 3,bFaceY - 12, bFaceX,bFaceY - 9);
line(bFaceX + 6,bFaceY - 10, bFaceX + 3,bFaceY - 7);
line(bFaceX + 9,bFaceY - 7, bFaceX + 6,bFaceY - 5);
line(bFaceX + 10,bFaceY - 4, bFaceX + 7,bFaceY - 2);
line(bFaceX + 10,bFaceY - 1, bFaceX + 8,bFaceY);
push();
//-small details-
strokeWeight(1.5);
//_eyes
//boy
point(bFaceX + 2,bFaceY - 2);//boy left eye
point(bFaceX - 6,bFaceY - 4);//boy right eye
//girl
point(gFaceX - 5,gFaceY - 4);//girl left eye
point(gFaceX + 3,gFaceY - 5);//girl right eye
//_on clothes
//boy's stripes
line(244,345, 264,350);//bottom
line(lineX + 2,lineY - 4, lineX + 19,lineY + 1);//2
line(lineX + 5,lineY - 7, lineX + 18,lineY - 3);//3
line(lineX + 7,lineY - 11, lineX + 17,lineY - 8);//top
line(lineX + 20,lineY - 12, lineX + 21,lineY - 5);//right sleeve
line(lineX + 5,lineY - 14, lineX + .5,lineY - 7);//left sleeve
//girl's dots
point(dotX,dotY);//left
point(dotX + 6, dotY - 6);//middle
point(dotX + 7, dotY - 12);//right
point(dotX + 2, dotY - 17);//right
point(dotX + 10, dotY - 18);//right sleeve
point(dotX - 3, dotY - 14);//left sleeve
point(dotX - 8, dotY - 50);//bow left
point(dotX, dotY - 48);//bow right
point(dotX - 2, dotY - 52);//bow right top
push();
//_smiles
//boy's
fill("red");
arc(255,320, 7, 6, 0, PI, CHORD);
//girl's
noFill()
arc(211,319, 8, 6, 0, PI, OPEN);
pop();
pop();
//-pumpkins-
push();
fill("orange");
//main pumpkin
ellipse(width / 2, (height / 2) + 132, 40,47);//middle bump
ellipse((width / 2) - 11, (height / 2) + 133, 47,46);//left bump
ellipse((width / 2) + 11, (height / 2) + 133, 47,46);//right bump
ellipse(width / 2, (height / 2) + 135, 55,45);//big pumpkin base
ellipse((width / 2) - 10, (height / 2) + 135, 35,45);//left inner gump
ellipse((width / 2) + 10, (height / 2) + 135, 35,45);//right inner gump
ellipse((width / 2), (height / 2) + 137, 20,45);//most inner bump lines
//other pumpkins
fill(224, 132, 4);
ellipse(width - 140,height - 30, 20,18);//1 (medium)
ellipse(width - 140,height - 30, 10,18.5);//1 middle part
fill(227, 127, 27);
ellipse((width / 2) - 40,height - 30, 40,48);//2 (long / big)
ellipse((width / 2) - 40,height - 30, 20,48);//2 middle part
fill(227, 104, 27);
ellipse((width / 2) - 50,height - 100, 9,7);//3 (small)
ellipse((width / 2) - 50,height - 100, 5,7);//3 middle part
fill(255, 81, 0);
ellipse(width - 25,height - 130, 30,35);//4 (upper right)
ellipse(width - 25,height - 130, 20,35);//4 middle part
fill(224, 96, 4);
ellipse(width / 8,height - 60, 40,30);//5 (left)
ellipse(width / 8,height - 60, 20,30);//5 middle part
fill(255, 86, 48);
ellipse(width / 12,height - 110, 20,17);//6 (upper left)
ellipse(width / 12,height - 110, 10,17);//6 middle part
fill(242, 59, 22);
ellipse(width - 180,height - 70, 15,15);//7 (right of main)
ellipse(width - 180,height - 70, 10,15);//7 middle part
fill(227, 98, 7);
ellipse(width - 15,height - 15, 20,20);//8 (left corner)
ellipse(width - 15,height - 15, 12,20.5);//8 middle part
pop();
}``````

## Julia Nishizaki – Project 06 – Abstract Clock

``````//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 06, Abstract Clock

var islandX = 240; //starting X coordinate of island center
var islandY = 210; //y coordinate of island center, stays constant
var islandHalfWidth = 75;
var islandH = 100; //tallest height of island mountain
var islandSpeed = 0.001; //controls the lag of island movement
var sheepSpeed = 0.01;
var gearWidth = 12; //the radius of the gear (represents radius of inner "circle")
var gearThick = 2;
var sheepW = 20;
var sheepH = 15;
var ear = 4; //size of sheep ear ellipse
var eye = 2; //size of sheep eye ellipse
var sheepX = 0;

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

function draw() {
background(220);
var h = hour(); //24 hour clock
var m = minute();
var s = second();
difisland = islandX - mouseX;
islandX = constrain(islandX, islandHalfWidth * 3, width - islandHalfWidth * 3) + difisland * islandSpeed; //causes the island to move slowly to mouse position

colorMode(HSB, 100); //change color mode in order to help with darkening/lightening the sky
if (h > 18 & h < 24 || h > -1 && h < 6) {
b = 15;
}if (h > 5 & h < 13) {
b = 15 + (h * 7);
} if (h > 11 & h < 19) {
b = 99 - ((h - 12) * 7);
}
c = color(55, 60, b);
fill(c);
rect(width / 2, height / 2, width, height);

//ground
colorMode(RGB); //switch back to RGB from HSB
fill(92, 147, 13);
rect(width * 0.5, height - 25, width, 50);

//mountain on island
stroke(92, 147, 13);
fill(92, 147, 13);
strokeWeight(14);
strokeJoin(ROUND);
beginShape(); //vertices that form the mountain
vertex(islandX - islandHalfWidth, islandY);
vertex(islandX - islandHalfWidth * 0.3, islandY - islandH * 0.75);
vertex(islandX - islandHalfWidth * 0.1, islandY - islandH * 0.6);
vertex(islandX + islandHalfWidth * 0.2, islandY - islandH);
vertex(islandX + islandHalfWidth * 0.65, islandY - islandH * 0.3);
vertex(islandX + islandHalfWidth * 0.8, islandY - islandH * 0.3);
vertex(islandX + islandHalfWidth, islandY);
vertex(islandX - islandHalfWidth, islandY);
endShape();

//door in mountain
var doorH = 45
noStroke();
fill(58, 109, 29);
rect(islandX - islandHalfWidth * 0.3, islandY - doorH * 0.5, 20, doorH, 15, 15, 0, 0);
noStroke(); //door knob
fill(44, 84, 41);
ellipse(islandX - islandHalfWidth * 0.375, islandY - doorH * 0.5, 3, 3);

//window in mountain
var winHalfLength = 25 * 0.5 //radius of window
if (h > 7 & h < 19) {
fill(58, 109, 29);
ellipse(islandX + islandHalfWidth * 0.2, islandY - islandH * 0.5, 25, 25);
} else { //makes the window glow yellow when it's "dark" outside
fill(255, 197, 68);
ellipse(islandX + islandHalfWidth * 0.2, islandY - islandH * 0.5, 25, 25);
}
stroke(44, 84, 41);
strokeWeight(3); //bars of the window:
line((islandX + islandHalfWidth * 0.2) - winHalfLength, islandY - islandH * 0.5, (islandX + islandHalfWidth * 0.2) + winHalfLength, islandY - islandH * 0.5);
line(islandX + islandHalfWidth * 0.2, (islandY - islandH * 0.5) - winHalfLength, islandX + islandHalfWidth * 0.2, (islandY - islandH * 0.5) + winHalfLength);

//underneath the island
stroke(44, 84, 41);
fill(44, 84, 41);
strokeWeight(18);
beginShape(); //vertices that form the underside
vertex(islandX - islandHalfWidth, islandY);
vertex(islandX - islandHalfWidth * 0.75, islandY + islandH * 0.4);
vertex(islandX - islandHalfWidth * 0.5, islandY + islandH * 0.5);
vertex(islandX - islandHalfWidth * 0.3, islandY + islandH * 0.75);
vertex(islandX - islandHalfWidth * 0.1, islandY + islandH * 0.85);
vertex(islandX + islandHalfWidth * 0.2, islandY + islandH * 0.6);
vertex(islandX + islandHalfWidth * 0.5, islandY + islandH * 0.5);
vertex(islandX + islandHalfWidth * 0.65, islandY + islandH * 0.3);
vertex(islandX + islandHalfWidth * 0.8, islandY + islandH * 0.25);
vertex(islandX + islandHalfWidth, islandY);
vertex(islandX - islandHalfWidth, islandY);
endShape();

//gear, rotates every second
push();
strokeWeight(2);
stroke(255);
translate(islandX + islandHalfWidth * 0.99, islandY + islandH * 0.1);
for (var g = 0; g < 60; g ++) {
if (g > s || g < s) {
push();
rotate(180 + g * 6);
line(0, gearWidth, 0, gearWidth + gearThick);
pop();
} else { //highlights the second hand on the gear
push();
stroke(124, 17, 17);
rotate(180 + g * 6);
gearMiddle(0, 0); //rotates the center cutouts of the gear
line(0, gearWidth, 0, gearWidth + 2 * gearThick); //the second hand
pop();
}
}
pop();

//ladder, increases by one rung each minute
var ladderX = islandX - islandHalfWidth;
stroke(153, 124, 232);
strokeWeight(2);
for (var i = 0; i < m; i += 1) {
var ladderY = (islandY - 3)  + 4 * i; //Y coordinate for the start of the ladder
if (i < 9 || i > 9 & i < 19 || i > 19 && i < 29 || i > 29 && i < 39 || i > 39 && i < 49 || i > 49) { //creates everything but the 10's
stroke(255);
} else {
stroke(153, 124, 232);
}
stroke(153, 124, 232);
}

//text: hour, minute, second, colons
noStroke();
textSize(14);
var textX = width * 0.5;
var textY = height - 20;
var coltextdistX = 20;
var coltextdistY = 2; //adds to the Y coordinates for the colons, to visually center them vertically
fill(255);
rect(textX, textY - 5, 100, 25, 30, 30, 30, 30);
fill(255, 197, 68);
textAlign(RIGHT); //hour text
if (h < 10) {
text(nf(h, 1, 0), textX - 1.4 * coltextdistX, textY);
} else {
text(nf(h, 2, 0), textX - 1.4 * coltextdistX, textY);
}
fill(92, 147, 13);
textAlign(CENTER); //colon and minute text
text(':', textX - coltextdistX, textY - coltextdistY); //colon between hour and minute
text(':', textX + coltextdistX, textY - coltextdistY); //colon between minute and second
fill(153, 124, 232);
text(nf(m, 2, 0), textX, textY);
textAlign(LEFT); //second text
fill(124, 17, 17);
if (s < 10) {
text(nf(s, 1, 0), textX + 1.4 * coltextdistX, textY);
} else {
text(nf(s, 2, 0), textX + 1.4 * coltextdistX, textY);
}

//sheep stack
difsheep = mouseX - sheepX;
sheepX = constrain(sheepX, sheepW, (width - sheepW * 1.5)) + difsheep * sheepSpeed; //causes the sheep to move slowly to mouse position
for (var y = 0; y < h; y += 1) {
sheep(sheepX, (height * 0.95 - sheepH * 2) - (y * sheepH * 1.15));
if ((sheepX - mouseX) > 0) {
sheepHead(- sheepW * 0.25 + (sheepX  * 0.5), (height * 0.95 - sheepH * 2) - (y * sheepH * 1.15));
} else {
sheepHead(sheepW * 0.25 + (sheepX  * 0.5), (height * 0.95 - sheepH * 2) - (y * sheepH * 1.15));
}
}
}

//gear cutouts
function gearMiddle(x, y) { //creates the center cutouts of the gear
for (var d = 0; d < 4; d ++) {
push()
stroke(255);
strokeWeight(2);
rotate(d * 45);
line(x, y - gearWidth - 2 * gearThick, x, y + gearWidth + 2 * gearThick);
pop();
}
}

//sheep
function sheep(x, y) {
push();
translate(x, y);
stroke(0);
strokeWeight(2);
line(-sheepW * 0.25, 0, -sheepW * 0.25, sheepH * 0.6); //sheep leg left
line(sheepW * 0.25, 0, sheepW * 0.25, sheepH * 0.6); //sheep leg right
noStroke();
fill(0);
ellipse(-sheepW * 0.5, 0, ear, ear); //sheep tail left
ellipse(sheepW * 0.5, 0, ear, ear); //sheep tail right
fill(255);
stroke(255, 197, 68)
strokeWeight(1.25);
rect(0, 0, sheepW, sheepH, 15, 15, 15, 15); //sheep body
pop();
}

push();
translate(x, y);
noStroke();
fill(0);
ellipse(x - sheepHeadW * 0.5, (y / 600) - sheepHeadH * 0.2, ear, ear); //left sheep ear
ellipse(x + sheepHeadW * 0.5, (y / 600) - sheepHeadH * 0.2, ear, ear); //right sheep ear
fill(255);
ellipse(x - 2, y / 600, eye, eye); //left sheep eye
ellipse(x + 2, y / 600, eye, eye); //right sheep eye
pop();
}
``````

While I didn’t really explore unconventional ways to read time through this project, I tried to seamlessly embed time into a simple but fun illustration, so that it became more of an artefact, rather than something really practical. I was initially inspired by the concept of cuckoo clocks, but my clock eventually warped into a floating island. I ended up creating a 24 hour clock, where the number of sheep represent the hour, the number of rungs on the ladder represent the minute, and the gear on the island shows the seconds.

## Lauren Park-Project-06-Abstract Clock

``````var sun = 220;
var moon = 235;
var cloud = 260;

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

function draw() {
background(0);
noFill();

if (second % 2 === 0) {
if (hour >= 8 & hour < 13) {
background(182, 224, 239);
// base()
// morning()
} else if (hour >= 13 & hour < 17) {
background(141, 194, 214);
// base()
// afternoon()
} else if (hour >= 17 & hour < 22) {
background(79, 130, 150);
// base()
// twilight()
} else if (hour >= 22 & hour < 23.5) {
background(34, 79, 96);
// base()
// night();
}
} else if (hour >= 0 & hour < 8) {
base()
}

//minutes
for (var j = 0; j < minute(); j ++){
sun = map(j, 0, 70, 220, 255);
moon = map(j, 0, 60, 125, 255);
cloud = map(j, 0, 50, 280, 255);
stroke(sun, moon, cloud);
fill(37, 179, 255);
ellipse(240, 240, 8*j, 8*j);
}
push();

//seconds
noFill();
translate(width/2, height/2);
for (var i = 0; i < second(); i ++) {
sun = map(i, 0, 70, 210, 71);
moon = map(i, 0, 60, 345, 204);
cloud = map(i, 0, 50, 0, 234);
stroke(sun, moon, cloud);
stroke(50, 75, 255);
ellipse(0, 0, 30, 450);
}

pop();

{

}

strokeWeight(2);
noFill();
translate(width/2, height/2);
//hours
for (var k = 0; k < hour(); k ++){
sun = map(k, 0, 70, 255, 255);
moon = map(k, 0, 60, 255, 255);
cloud = map(k, 0, 60, 102, 255);
stroke(sun, moon, cloud, 190);
ellipse(0, 0, 150, 400);

}

}``````

For my abstract clock, I initially started with an idea revolving around an outer space theme. I wanted to use ellipses to form loophole-like forms and a harmonious shape overalls that move in rhythm to a ticking clock. It was really difficult figuring out how to implement time and speed with these shapes I wanted to incorporate. However, it was really enjoyable to experiment and finally create an artwork that changes depending on how much time has passed, and that the image will not stay the same.

## Margot Gersing – Abstract Clock

``````//Margot Gersing - Project 06 - mgersing@andrew.cmu.edu - Section E

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

}

function draw() {
background(255, 237, 233);
translate(width/1000, height);
rotate(270); // to start at top of screen

//time variables
var s = second();
var m = minute();
var h = hour() % 12;

//outline of ellipse - mapped to reflect time
var ah = map(h, 0, 12, 0, 360);
var am = map(m, 0, 60, 0, 360);
var as = map(s, 0, 60, 0, 360);

//ellipse size - mapped to reflect time
var eh = map(h, 0, 12, 300, 400);
var em = map(m, 0, 60, 150, 250);
var es = map(s, 0, 60, 10, 100);

// ellipse - radius increase to reflect time
noStroke();
fill(255, 192, 44); //hour circle
ellipse(width/2, height/2, eh, eh);
fill(111, 163, 118); //minute circle
ellipse(width/2, height/2, em, em);
fill(246, 195, 203); //second circle
ellipse(width/2, height/2, es, es);

//outlines
//seconds
noFill();
stroke(229, 56, 26);
strokeWeight(5);
arc(width/2, height/2, es, es, 0, as); //outline to reflect seconds passing

//minutes
noFill();
stroke(14, 94, 67);
strokeWeight(10);
arc(width/2, height/2, em, em, 0, am); //outline to reflect minutes passing

//hours
noFill();
stroke(255, 233, 105);
strokeWeight(15);
arc(width/2, height/2, eh, eh, 0, ah); //outline to reflect hour passing

}``````

For this project I wanted to create a bullseye shape that reflected the time in two ways, the outline and the size. I tried to make each circle proportionally sized so that the hour is largest, and second is the smallest. The outline is a more obvious way of showing the time and the size of the circle is much more subtle especially when it comes to the minute and hours.

## Fanjie Jin – Project-06-Abstract-Clock

``````//Fanjie Jin
//Section C
//fjin@andrew.cmu.edu
//Project 6

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

function draw() {
background(15, 20, 60);

//change the hour, min and sec into variables
var S = second();
var M = minute();
var H = hour();

//display the grid for percentages
stroke(255)
strokeWeight(1)
line(240, 25, 240, 455)

stroke(255)
strokeWeight(1)
line(20, 240, 480, 240)

//display the percentage signs
fill(255);
text(" 0% ", 450, 237);
fill(255);

text(" 25% ", 228, 470);
fill(255);

text(" 50% ", 5, 237);

fill(255);
text(" 75% ", 228, 18);

//outer circle
stroke(255);
noFill();
ellipse(240, 240, 400, 400);

//arc plate displays hours overall percentage of hour
MappedH = H / 24;
strokeWeight(1);
fill(100, 140, 222);
arc(240,240, 400, 400, 0, MappedH *2 * PI);

//outer circle
fill(15, 20, 60);
stroke(255);
ellipse(260, 240, 300, 300);

//display the grid for hours
for(a = 0 ;a < 360; a += 15){
push();
translate(240,240);
strokeWeight(1);
stroke(255, 255, 0);
line(0,0,200,0);
pop();
}

//outer circle
fill(15, 20, 60);
stroke(255);
ellipse(260, 240, 300, 300);

//display the grid for seconds and how many seconds have passed
for(i = 0 ;i < 360; i += 6){
push();
translate(260,240);
stroke(255, 0, 0);
line(0,0,150,0);
pop();
}
push();
translate(260,240);
stroke(255);
line(0,0,150,0);
pop();

fill(15, 20, 60);
ellipse(270, 240, 200, 200);

//display how many minutes have passed
MappedM = M / 60;
push();
translate(270, 240);
noStroke();
fill(100, 108, 222);
arc(0,0, 200, 200, 0, MappedM *2 * PI);
pop();

//draw grid for minutes
for(a = 0 ;a < 360; a += 6){
push();
translate(270,240);
strokeWeight(1);
stroke(255, 255, 0);
line(0,0,100,0);
pop();
}

//inner ellipse 3
fill(15, 20, 60);
stroke(255);
ellipse(249, 240, 150, 150);

//circle at the center would expand based on seconds
fill(50, 20, 60);
noStroke();
ellipse(249, 240, S * 2.5, S * 2.5);

//display the actual time at the middle of the canvas
fill(255);
text(nf(H, 2,0) + ":", 220, 237);
text(nf(M, 2,0) + ":", 240, 237);
text(nf(S, 2,0), 260, 237);

//line showing the beginning
stroke(255);
strokeWeight(2);
line(240, 240, 600, 240);
}

``````

In this abstract clock project, I have decided to treat it with a minimalistic approach. Overall, there are three rings, and from the center to the outer ring, the minutes, seconds, and hours are being displayed. The gird has showed the percentage, so from the clock, viewer will be understand how much percent of the day has been passed. There is a circle expanding constantly at the center of the clock based on how many seconds have been passed. Lastly, I have experimented with the idea of offset so compositionally, its more intriguing.

## Sarah Kang-Project-06-Abstract Clock

``````//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-06-clock

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

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

//remap
var RMH = map(H, 0, 23, 0, 360);
var RMM = map(M, 0, 59, 0, 360);
var RMS = map(S, 0, 59, 0, 360);
var sec = S / 60;

var dim = 80;
var dim2 = 40;
var dim3 = 30;
var x1 = 220;
var y1 = 160;
var x2 = 350;
var y2 = 260;
var x3 = 200;
var y3 = 340;
var x4 = 80;
var y4 = 390;
var x5 = 400;
var y5 = 60;

angleMode(DEGREES);

//first bubble
fill(63, 57, 64);
noStroke();
ellipse(220, 160, sec * dim, sec * dim); //center
//big ring for hours
noFill();
stroke(105, 9, 46);
strokeWeight(1);
//med ring for minutes
stroke(240, 192, 201);
strokeWeight(4);
//small ring for seconds
stroke(201, 231, 255);
strokeWeight(7);

//second bubble
fill(94, 86, 93);
noStroke();
ellipse(350, 260, sec * dim, sec * dim); //center
//big ring for seconds
noFill();
stroke(105, 9, 46);
strokeWeight(4);
//med ring for minutes
stroke(240, 192, 201);
strokeWeight(8);
//small ring for hours
stroke(201, 231, 255);
strokeWeight(12);

//third bubble
fill(99, 101, 115);
noStroke();
ellipse(200, 340, sec * dim2, sec * dim2); //center
//big ring for seconds
noFill();
stroke(105, 9, 46);
strokeWeight(1);
//med ring for seconds
stroke(240, 192, 201);
strokeWeight(2);
//small ring for seconds
stroke(201, 231, 255);
strokeWeight(4);

//4th bubble
fill(140, 143, 161);
noStroke();
ellipse(80, 390, sec * dim2, sec * dim2); //center
//big ring for seconds
noFill();
stroke(105, 9, 46);
strokeWeight(1);
//med ring for seconds
stroke(240, 192, 201);
strokeWeight(2);
//small ring for seconds
stroke(201, 231, 255);
strokeWeight(4);

//5th bubble
fill(149, 140, 161);
noStroke();
ellipse(400, 60, sec * dim3, sec * dim3); //center
//big ring for seconds
noFill();
stroke(105, 9, 46);
strokeWeight(1);
//med ring for seconds
stroke(240, 192, 201);
strokeWeight(2);
//small ring for seconds
stroke(201, 231, 255);
strokeWeight(4);

}``````

I wanted to make a bubble clock and vary the hour, minute, and second variables by the layers of the bubbles. To make the frame changes more apparent, I used more seconds variables in the visualization.

## Project 06 Abstract Clock – Ellan Suder

For my clock I made a scene at the ocean. The small clock shows the progression of an hour (when it’s near the end of the screen the hour’s about to change) and the big cloud shows the progression of a minute. The water is controlled by a sin function so it makes a whole cycle in a minute. There is a transparent layer on top of the water (called oceanLight) that also expands and contracts sinusoidally. It has the same x,y value (`0,2*height/3+yMin`) so that it follows the blue water exactly.

There is also a simple function to make the sky more orange during specific hours (6am to 6pm) and more blue otherwise.

``````/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-06
*/

var skyColor;
var oceanColor;
var oceanColorLight;
var sandColor;
var logColor;
var notchColor;
var orangeSky;
var purpleSky;
var boatColor;

var prevSec;
var millisRolloverTime;
var hr;

function setup() {
skyColor = color(140,220,240);
oceanColor = color(60,140,190);
oceanColorLight = color(219,222,236,150);
sandColor = color(220,190,110);
logColor = color(97,54,35);
notchColor = color(141,94,43);
orangeSky = color(248,170,66,40);
purpleSky = color(129,36,229,40);
boatColor = color(200,50,50);
createCanvas(480, 480);
noStroke();

//gets accurate starting time
hr = hour() + minute()/60 + second()/60/60;
}

function draw() {
background(skyColor);

//fetch current time
var H = hour();
var M = minute();
var S = second();
if (prevSec != S) {
millisRolloverTime = millis();
}
prevSec = S;
var mils = floor(millis() - millisRolloverTime);
//smooth out seconds and minutes
var secondsWithFraction = S + (mils / 1000.0);
var minutesWithFraction  = M + (mils / 60000.0);
var cloudPositionSec = map(secondsWithFraction,  0, 60, -150, width + 50);
var cloudPositionMin = map(minutesWithFraction,  0, 60, -75, width + 25);

//ocean - full cycle every minute
var seconds = hr + (millis() * 0.001) /60;
var yMin = sin(seconds * TWO_PI) * height/4; //highest value is 2*height/3 + height/4, lowest is 2*height/3 - height/4. one full cycle is a minute
var yMin2 = sin(seconds * TWO_PI) * height/20;
fill(oceanColor);
rect(0,2*height/3+yMin,
width,height/4-yMin); //2*height/3 is middle value/start of sin wave. goes up and then down

//sand + log + light water
fill(logColor);
rect(height/4,height/2-30,55,height/2-30,5,5);
fill(notchColor);
triangle(height/4+55,2*height/3-5, //top
height/4+35,2*height/3,
height/4+55,2*height/3+10);

fill(oceanColorLight);
rect(0,2*height/3+yMin,
width,height/20+yMin2);//sits on top of blue water/yMin

fill(sandColor);
ellipse(width/2,height-30,width+500,70);
ellipse(height/4+55/2,height-53,120,30);

//cloud that moves across screen in an hour
fill(225,235,240);
drawCloud(cloudPositionMin,height/3,50);
//cloud that moves across screen in a minute
fill(250,250,250);
drawCloud(cloudPositionSec,height/5);

boatY=2*height/3+yMin+20;

drawBoat(width/2,boatY);

//night and day overlay color
if(H >= 6 & H < 18) {
fill(orangeSky);
} else {
fill(purpleSky);
}
rect(0,0,width,height);
}

function drawCloud(x,y,size = 100) {
push();
noStroke();
//fill(230);
ellipse(x, y, size, size);
ellipse(x + size*.5, y + size*.05, size, size);
ellipse(x + size, y, size, size*.8);
ellipse(x + size*.3, y - size*.2, size*.8, size*.8);
ellipse(x + size*.7, y - size*.35, size*.8, size*.8);
pop();
}

function drawBoat(x=width/2,y=height/2) {
fill("black");
rect(x+30,y-220,
12,220);
fill("white");
triangle(x+42,y-220,
x+150,y-103,
x+42,y-90);
fill(boatColor);
beginShape();
vertex(x-20, y-80);
vertex(x+220, y-80);
vertex(x+170, y);
vertex(x, y);
endShape(CLOSE);
}
``````

## Sarah Choi – Project – 06 – Abstract Clock

My representation of the clock showed three different parts of the clock. I wanted to portray hours, minutes, and seconds in three different manners. By doing this, I was able to code the outside of the circle with an arc, showing the hour. I made an inner loop with the minutes by using stroke lines. And finally, the seconds were done with the squares in the perimeter.

``````//Sarah Choi
//Section D
//sychoi@andrew.cmu.edu
//Project-06

var x = 0;
var y = 0;
var dX = 1;
var dY = 1;

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

function draw() {
var h = hour();
var m = minute();
var s = second();
var rects = [];

background(0);

//seconds
//top half right side
stroke(0);
strokeWeight(1);
for (i = 0; i < 8; i++) {
x1 = 281 - (37.5 / 2) + i * 37.5;
y1 = 0;
rects.push([x1, y1, s > i]);
}

for (i = 8; i < 25; i++) {
x1 = 600 - 37.5;
y1 = (i - 8) * 37.5;
rects.push([x1, y1, s > i]);
}

for (i = 25; i < 39; i++) {
x1 = 600 - (37.5 * (i - 23));
y1 = 600 - 37.5;
rects.push([x1, y1, s > i]);
}

for (i = 39; i < 55; i++) {
x1 = 0;
y1 = 600 - (37.5 * (i - 38));
rects.push([x1, y1, s > i]);
}

for (i = 55; i < 61; i++) {
x1 = (i - 54) * 37.5;
y1 = 0;
rects.push([x1, y1, s > i]);
}

for (i = 0; i < 61; i++) {
if (rects[i][2]) {
x1 = rects[i][0];
y1 = rects[i][1];
fill(255);
rect(x1, y1, 37.5, 37.5);
}
else {
x1 = rects[i][0];
y1 = rects[i][1];
fill(255, 153, 0);
rect(x1, y1, 37.5, 37.5);
}
}

//minute
for (a = 0; a < m; a++) {
fill(255);
circle(300, 300, 300 - (5 * a), 300 - (5 * a));
}

//hour
noFill();
strokeWeight(20);
stroke(0, 0, 255);
arc(300, 300, 360, 360, -HALF_PI, TWO_PI * (h / 12) - HALF_PI);

//time
noStroke();
fill(0);
textSize(30);
text(nf(h % 12, 2, 0) + ":" + nf(m, 2, 0) + ":" + nf(s, 2, 0), 240, 285, 300, 300);
}``````

## Crystal-Xue-Project-06

``````//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//Project_06

var eyeballSize = 180;
var eyeChange = 20;

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

function draw() {
background(230, 194, 152);
frameRate(600);
var h = hour();
var m = minute();
var s = second();
var eyeWidth = 150;

//eyebag
translate(120, 400)
fill(210, 180, 152);
noStroke();
beginShape();
for (var i = - 1; i < 12; i++) {
curveVertex(0.1 * PI * eyeWidth * i - 50, sin(0.1 * i * PI) * (110 + m) - 50);
}
endShape();

//drawing the eye shape
translate(-50, - 100);
stroke(0);
strokeWeight(10);
fill(255);

//drawing upper half of the eye
beginShape();
for (var i = -1; i < 12; i++) {
curveVertex(0.1 * PI * eyeWidth * i, -sin(0.1 * i* PI) * (110 + m));
}
endShape();

//drawing lower half of the eye
fill(255);
beginShape();
for (var i = - 1; i < 12; i++) {
curveVertex(0.1 * PI * eyeWidth * i, sin(0.1 * i * PI) * (110 + m));
}
endShape();

//change of eyeball colors
var r1 = 200 + 25 * sin(millis() / 100.0 );
var g1 = 200 + 25 * sin(millis() / 100.0 + HALF_PI);
var b1 = 200 + 25 * sin(millis() / 100.0 - HALF_PI);
var eyeballX = 5 * h;
var eyeballY = 0;
x = sin(frameCount / 10) * eyeChange;
y = cos(frameCount / 10) * eyeChange;

//drawing eyeball
translate(200, 0);
noStroke();
fill(r1, g1, b1);
ellipse(eyeballX, eyeballY, eyeballSize + x,  eyeballSize + y);
if (s % 2 == 0) {
fill(0);
ellipse(eyeballX, eyeballY, 100, 100);
fill(255);
ellipse(eyeballX + 20, eyeballY - 20, 10, 10);
}else {
fill(0);
ellipse(eyeballX, eyeballY, 130, 130);
fill(255);
ellipse(eyeballX + 20, eyeballY -20, 15, 15);
}

//closing lid and eye bag when tired
if (h < 8) {
translate(-200,0);
fill(230, 194, 152);
stroke(0);
strokeWeight(10);
beginShape();
for (var i = -1; i < 12; i++) {
curveVertex(0.1 * PI * eyeWidth * i, -sin(0.1 * i* PI)* (110 + m));
}
endShape();
}

}
``````

This is a project represent a normal student eye in a day. The pupil is changing its size every second, and the eye size is increasing based on minutes. And the entire eyeball is moving from left to right based on hours. during sleeping hours (12:00 – 8:00 am) the top eyelid is closed because of fatigues.