## Project-06-Abstract-Clock

For this project, I wanted to make the time easy to tell. I did not want the viewer to have to analyze every detail to be able to understand what time it was. Therefore I tried to keep it simple by having the boxes represent the hour number, the sky background represent what time of the day it is, and the coins to represent how many minutes have passed. I also made the piranha plant rise with respect to every second. When a minute passes, the piranha plant starts back at the base of the pot. While doing this project, I had a lot of difficult making each detail of Mario. I did not want to just import an image of him, and wanted to challenge myself by creating him through layers of shapes. In my thought process, I wrote down a lot of color combinations for each part of Mario, but I mainly referred to an actual image/screenshot of a Mario game (attached below.) Also attached to this post is some progress photos I took as I worked on the project.

sketch
//Annie Kim
//anniekim@andrew.cmu.edu
//SectionB
//Project-06

function setup() {
createCanvas(480, 480);
background(95, 201, 247);

}
function draw() {
var h = hour();
var s = second();

if (h < 18 & h > 6) {
//if it is morning time, background = light color
background(95, 201, 247);
}
else {
//if it is night, background = dark color
background(20, 25, 68);
}
//yellow ovals in background
fill(220, 137, 20);
stroke(180, 107, 40);
ellipse(5, 360, 60, 100); //shape
line(0, 320, 23, 320); //lines on air balloons
line(0, 330, 28, 330);
line(0, 340, 32, 340);
line(0, 350, 34, 350);
line(0, 360, 35, 360);
ellipse(100, 350, 90, 130);
line(100, 315, 138, 315);
line(100, 330, 142, 330);
line(100, 345, 144, 345);
line(90, 360, 140, 360);
line(90, 375, 140, 375);
ellipse(240, 345, 80, 90);
line(207, 320, 273, 320);
line(200, 345, 280, 345);
line(207, 370, 273, 370);
ellipse(275, 380, 60, 110);
line(245, 380, 305, 380);
line(240, 365, 303, 365);
line(242, 360, 302, 360);
line(244, 355, 301, 355);
line(246, 350, 300, 350);
line(246, 345, 297, 345);
line(255, 340, 294, 340);
ellipse(470, 370, 70, 85);
line(445, 340, 480, 340);
line(443, 345, 480, 345);
line(441, 350, 480, 350);
line(439, 355, 480, 355);
line(437, 360, 480, 360);
line(435, 365, 480, 365);
line(437, 370, 480, 370);
line(437, 375, 480, 375);
line(437, 380, 480, 380);
line(437, 385, 480, 385);
ellipse(400, 390, 100, 110);
line(350, 390, 450, 390);
line(352, 375, 449, 375);
line(361, 355, 445, 355);

//trees in background
fill(75, 165, 75);
noStroke();
rect(0, 400, 480, 80);
circle(10, 400, 80);
circle(8, 360, 30);
circle(75, 400, 40);
circle(105, 400, 30);
circle(135, 400, 70);
circle(113, 380, 30);
circle(135, 370, 40);
circle(160, 380, 30);
circle(165, 400, 40);
circle(195, 400, 50);
circle(260, 400, 80);
circle(245, 370, 40);
circle(260, 360, 40);
circle(275, 370, 40);
circle(315, 400, 30);
circle(350, 400, 60);
circle(400, 400, 40);
circle(450, 400, 60);

//clouds
fill(250, 130); //half transparent alpha
noStroke();
ellipse(40, 60, 100, 28);
ellipse(240, 190, 190, 40);
ellipse(350, 15, 130, 20);
ellipse(420, 100, 180, 30);

//** MARIO **
//the ground of the scene
noStroke();
fill(250, 220, 103); //orange-yellow layer
rect(0, 445, 480, 35);
orangecircles(); //call for orange curtain pattern
fill(108, 220, 68);
rect(0, 430, 480, 17); //green layer
greencircles(); //call for green curtain pattern

//Mario's left shoe
fill(105, 67, 45); //brown color
circle(33, 407, 32); //heel of shoe
circle(80, 415, 36); //mid of shoe
circle(89, 416, 39); //toe of shoe
quad(33, 422, 80, 432.5, 80, 400, 33, 400); //sole of shoe

//Mario's left leg that is planted on the ground
fill(31, 73, 180);
quad(60, 300, 130, 300, 80, 395, 25, 390); //leg
ellipse(53, 395, 61, 27); //hem of pants
stroke(31, 73, 180); //filling in spaces for the shape
line(78, 370, 80, 395);

//Mario's left arm
fill(244, 44, 42); //red
noStroke();
quad(148, 235, 110, 205, 155, 140, 180, 150); //arm
fill(255); //white glove
ellipse(162, 140, 60, 50); //glove

//visor part of hat
fill(147, 42, 43); //red
ellipse(158, 118, 140, 30);

fill(248, 217, 191); //skin tone
ellipse(125, 115, 95, 110);
ellipse(124, 148, 85, 90);
rect(70, 105, 50, 100); //neck

//Mario's nose
fill(248, 217, 191); //skin tone
ellipse(175, 152, 30, 25); //tip of nose
ellipse(160, 162, 45, 10);

//Mario's hair
fill(74, 45, 32); //brown hair
rect(60, 65, 35, 100);
ellipse(90, 155, 20, 25); //behind ear
circle(63, 158, 20);
circle(75, 160, 30);
triangle(135, 100, 130, 150, 100, 100); //sideburn
ellipse(122, 135, 15, 30);
ellipse(123, 140, 15, 23);
circle(128, 144, 14);
triangle(133, 145, 135, 100, 125, 125);

//red Mario hat
fill(224, 44, 42); //red
noStroke();
rect(60, 75, 120, 40);
beginShape(); //connecting shape to make rounded top
curveVertex(80, 98);
curveVertex(80, 98);
curveVertex(80, 58);
curveVertex(105, 43);
curveVertex(130, 42);
curveVertex(150, 41);
curveVertex(160, 39);
curveVertex(170, 38);
curveVertex(179, 60);
curveVertex(177, 70);
curveVertex(177, 70);
endShape();
line(175, 30, 180, 30);
noStroke();
ellipse(177, 73, 60, 75);
ellipse(67, 85, 50, 60);

//white Mario logo on hat
fill(255); //white circle
stroke(255);
ellipse(197, 80, 20, 40);
//red M letters
stroke(224, 44, 42);
strokeWeight(4);
line(195, 70, 193, 92);
line(195, 70, 198, 80);
line(198, 81, 201, 68);
line(201, 68, 203, 89);

//Mario's ear
fill(248, 217, 191);
stroke(208, 177, 151);
strokeWeight(1);
ellipse(100, 128, 30, 40);
stroke(238, 207, 181); //inner ear crevice
ellipse(100, 128, 15, 20);

//Mario's eye
fill(255); //white of his eye
ellipse(160.5, 135, 14, 30);
fill(105, 180, 255); //blue of eye
noStroke();
ellipse(163, 139, 8, 20);
fill(0); //black of eye
ellipse(164, 141, 5, 10);

//Mario's eyebrow
stroke(60, 50, 50);
strokeWeight(3);
noFill();
arc(162, 128, 10, 25, PI + QUARTER_PI, 0);

//darker red of visor part of cap
fill(204, 2, 3);
noStroke();
arc(195, 100, 80, 40, 0 + 0.5*QUARTER_PI, PI, CHORD);
triangle(155, 100, 195, 100, 227, 114);

//drawing Mario's abdomen
fill(41, 93, 200); //blue jean clothing color
noStroke();
ellipse(100, 250, 100, 130);
circle(90, 210, 80, 50);
circle(100, 225, 80);
circle(80, 280, 70); //butt area

//the following lines fill space to make smooth abdomen
strokeWeight(10);
stroke(41, 93, 200);
line(55, 250, 51, 270);
line(80, 310, 100, 310);
line(55, 220, 55, 250);

//Mario's right shoe in the air
fill(105, 67, 45); //brown color
noStroke();
circle(164, 362, 32); //heel of shoe
circle(201, 350, 36); //mid of shoe
circle(207, 347, 39); //toe of shoe
quad(165, 377, 205, 366.5, 195, 340, 165, 350); //sole of shoe

//Mario's right leg that is in the air
fill(41, 93, 200);
noStroke();
ellipse(125, 290, 120, 50);
circle(165, 280, 50); //knee cap
quad(140, 300, 190, 280, 201, 330, 150, 345); //calf
quad(200, 329, 203, 328, 150, 355, 150, 344); //calf

//pant hem
beginShape(); //curve shape so the hem looks curved
curveVertex(150, 354);
curveVertex(150, 354);
curveVertex(160, 352);
curveVertex(180, 347);
curveVertex(195, 335);
curveVertex(200, 330);
curveVertex(202, 327);
curveVertex(202, 327);
endShape();
strokeWeight(10);
stroke(41, 93, 200);
line(165, 259, 145, 255); //line making thigh look filled

//making jean lines
stroke(31, 83, 170);
strokeWeight(3);
line(90, 200, 90, 270); //side seam
line(118, 246, 149, 251); //line on top thigh
line(145, 313, 163, 288); //line at knee
line(172, 305, 180, 345); //line at right calf
stroke(21, 63, 140); //darker line for darker leg
line(90, 317, 50, 407); //left leg line
noStroke();

//Mario's right arm that goes off the screen
fill(244, 44, 42);
noStroke();
ellipse(85, 200, 60, 50);
quad(45, 160, 95, 180, 90, 225, 45, 210); //bicep area
quad(45, 160, 0, 180, 0, 230, 45, 210); //forearm

//yellow button on Mario's overalls
fill(255, 253, 104);
ellipse(135, 220, 10, 20);

//Mario's mustache
fill(35, 23, 17);
//edge of mustache
arc(145, 160, 20, 10, 0, PI + QUARTER_PI);
//inner part of mustache
arc(158, 164, 15, 10, 0, PI + QUARTER_PI);
//Mario's smile
stroke(100);
noFill();
strokeWeight(2);
arc(158, 170, 20, 10, 0.5*PI, PI);

//PIRANHA PLANT MOVES WITH SECONDS

//stem of plant growing with seconds
stroke(79, 145, 45);
strokeWeight(10);
//line(425, 366, 425, 366 - s);
quad(423, 380, 423, 340 - s, 427, 340 - s, 427, 380);

fill(215, 15, 15);
noStroke();
circle(425, 330 - s, 80); //red circle
fill(255);
circle(423, 360 - s, 13); //white spots on piranha head
circle(395, 325 - s, 13);
circle(405, 345 - s, 15);
circle(435, 340 - s, 13);
circle(457, 325 - s, 10);
circle(455, 345 - s, 10);

//making the mouth of piranha open
if (h < 18 & h > 6) {
//using light blue color to match background
fill(95, 201, 247);
}
else {
//using dark blue color to match bckground
fill(20, 25, 68);
}
triangle(425, 345 - s, 340, 280 - s, 510, 280 - s);

//teeth of piranha mouth
stroke(220); //outline color = grayish
fill(245); //white teeth
strokeWeight(1);
triangle(418, 320 - s, 416, 340 - s,  408, 330 - s);
triangle(405, 310 - s, 403, 330 - s, 395, 320 - s);
triangle(434, 320 - s, 441, 330 - s, 431, 340 - s);
triangle(450, 310 - s, 457, 320 - s, 447, 330 - s);

//white lips of piranha mouth
fill(245);
noStroke();
circle(382, 315 - s, 15);
triangle(377, 320 - s, 425, 345 - s, 385, 308 - s); //left lip
circle(468, 315 - s, 15);
triangle(463, 309 - s, 425, 345 - s, 473, 320 - s); //right lip

//pot for the plant
fill(75, 118, 68);
noStroke();
rect(400, 380, 50, 50); //base of pot
stroke(55, 98, 48);
strokeWeight(1);
rect(390, 370, 70, 20); //top part of pot

//draws coin for each minute
for (m = 0; m < minute(); m ++) {
row = Math.floor(m / 4);
//15 rows of coins, 4 columns of coins
coins(240 + (m - 4 * row) * 28, 19 + (29 * row));
}
//draws boxes for each hour
for (h = 0; h < hour(); h ++) {
row1 = Math.floor(h / 6);
//3 rows of boxes,
//4 columns in each row
boxes(336 + (h - 6 * row1) * 24, 10 + (35 * row1));
}

//MUNCHKIN stomach
fill(143, 121, 91);
noStroke();
ellipse(210, 429, 18, 11);
ellipse(210, 426, 16, 4);

fill(134, 80, 50); //brown body color
//munchkin feet
ellipse(202, 433, 13, 8);
ellipse(218, 433, 13, 8);
noStroke();
//layering body shaper
ellipse(210, 400, 30, 40);
circle(203, 410, 30);
circle(217, 410, 30);
rect(203, 410, 14, 15);
triangle(200, 385, 190, 403, 210, 400);
triangle(220, 385, 230, 403, 210, 400);
// munchkin eyes
fill(255); //white of eyes
stroke(230);
ellipse(204, 400, 6, 13);
ellipse(217, 400, 6, 13);
fill(0); //black of eyes
ellipse(205, 399, 5, 8);
ellipse(216, 399, 5, 8);
fill(255); //white dot in eyes
circle(205, 398, 1);
circle(216, 398, 1);
//munchkin mouth
fill(255);
stroke(210);
strokeWeight(1);
triangle(197, 414, 199, 408, 202, 412); //teeth
triangle(223, 414, 221, 408, 218, 412); //teeth
stroke(0);
strokeWeight(2);
noFill();
arc(210, 415, 25, 4, PI, 0); //frown line

//munchkin left eyebrow
stroke(0);
strokeWeight(2);
noFill();
beginShape();
curveVertex(193, 384)
curveVertex(193, 384);
curveVertex(195, 383);
curveVertex(197, 383);
curveVertex(199, 384);
curveVertex(202, 387);
curveVertex(203, 389);
curveVertex(205, 392);
curveVertex(207, 394);
curveVertex(207, 394);
endShape();
//munchkin right eyebrow
beginShape();
curveVertex(213, 394);
curveVertex(213, 394);
curveVertex(215, 392);
curveVertex(217, 389);
curveVertex(219, 387);
curveVertex(221, 384);
curveVertex(223, 383);
curveVertex(225, 383);
curveVertex(228, 384);
curveVertex(228, 384);
endShape();
}

function coins(x, y) {
fill(242, 220, 95); //yellow color
stroke(222, 200, 75); //darker yellow to highlight shape
ellipse(x, y, 13, 25); //shape of coin
fill(222, 200, 75);
rect(x - 1, y - 10, 3, 21); //vertical line on coin
}

function boxes(x, y) {
fill(151, 88, 53); //brown color
strokeWeight(2); //outline of box
stroke(0);
square(x, y, 24); //size of each box
strokeWeight(1); //thickness of brick lines
line(x, y + 8, x + 24, y + 8); //lines to make bricks
line(x, y + 16, x + 24, y + 16);
line(x + 12, y, x + 12, y + 8);
line(x + 8, y + 8, x + 8, y + 16);
line(x + 16, y + 8, x + 16, y +16);
line(x + 12, y + 16, x + 12, y + 24);
}

function greencircles() { //will "curtain" the green grass
for (var a = 0; a < 485; a += 20) {
fill(108, 220, 68); //green color
circle(a, 445, 20);
}
}

function orangecircles() { //layer that will "curtain" yellow grass
for (var b = 0; b < 485; b += 25) {
fill(238, 117, 40); //dark orange color
ellipse(b, 463, 35, 17);
fill(250, 220, 103); //orange-yellow color
ellipse(b, 457, 35, 17);

}
}

## Project-06-Abstract Clock

For the clock I wanted to create something that had a gradient, and where the time could not always be seen at every second, to get people to focus a bit more on the changing condition. Eventually I settled on a clock which had a gradient of boxes which changed every two seconds, and slowly revealed the time in the middle of the smallest box, with circles. I also liked the idea of using the same shape for both the minutes and hours, with only the size to differentiate the two.

sketch
var theta = [];
var side = [];
var c = [];
var s;
var h;
var mx = [];
var my = [];

function setup() {
createCanvas(480, 480);
background(220);

h = hour();

for (let i = 0; i <= 29; i++) {
theta[i] += 2;
c[i] = ((8.5*i));
if (i == 0) {
side[i] = 480
} else if (i > 0) {
side[i] = (side[i-1])-((side[i-1])/40);
}
}

for (let i = 0; i < 60; i++) {
if (i %6 == 0) {
mx[i] = -5;
} else {
mx[i] = mx[i-1]+20;
}
if (i < 6) {
my[i] = -90;
} else {
my[i] = my[i-6]+20;
}
}
}

function draw() {
s = floor((second())/2);
translate(240,240);
rectMode(CENTER);

for (let i = 0; i <= s; i++) {
noStroke();
fill(c[i]);
rect(0,0,side[i],side[i]);
}

if (h > 12) {
h = h-12;
}

if (h < 7) {
for (let i = 1; i <= h; i ++) {
fill(0);
circle(-80,-122+(i*35),30);
}
} else {
for (let i = 1; i <= 6; i ++) {
circle(-80,-122+(i*35),30);
}
for (let i = 1; i <= h-6; i++) {
circle(-45,-122+(i*35),30);
}
}

for (let i = 0; i < minute(); i++) {
circle(mx[i],my[i],17);
}
}

## Project-06-Abstract Clock

sketch
var walking = 0;
var rising = 230;
function setup() {
createCanvas(480, 480);
background(0);

}

function draw() {

background(98, 97, 153);

noStroke();

fill(135, 154, 206);
//moon
ellipse(380, 126, 228, 228);

var hr = map(hour(), 0, 59, 152, 620);
//circle eclipses moon at hourly pace
push();
fill(98, 97, 153);
ellipse(hr, 126, 228, 228);
pop();

//background graves
fill(22, 13, 71);
ellipse(370, 408,1074, 311);

for(var g = 304; g < 440; g+=52){
graves2(g, 225);

}

//backgroung fence
fence2(435, 203, 0.4);

//zombie moves at seconds pace
push();
translate(map(second(), 0, 59, -20, width+ 20), walking);
zombie();
pop();

fill(38, 34, 98);
ellipse(57, 480,1074, 311);

//foreground fence
fence1(12, 200);

//foreground graves
for(var d = 47; d < 370; d+=130){
graves1(d, 292);

}

//hand raises from ground at minute pace
push();
translate(rising, map(minute(), 0, 59, 500, 410));
hand();
pop();

//ground in front of hand
fill(38, 34, 98);
rect(0, 410, 400, 200);
}

function graves1(x,y) {

push();
translate(x,y);
noStroke();

fill(22, 13, 71);
rect(-13, 0, 67, 100);
//grave front
fill(38, 34, 98);
rect(0, 0, 67, 100);

fill(22, 13, 71);
rect(9, 12, 51, 5);
fill(22, 13, 71);
rect(8.5, 24, 51, 5);

pop();

}

function graves2(x,y) {

push();
translate(x,y);
noStroke();

fill(22, 13, 71);
rect(0, 0, 27, 41);

pop();

}

function fence1(x,y) {

push();
translate(x,y);
noStroke();

fill(38, 34, 98);
rect(-24, 15, 145, 8);

rect(0, 0, 8, 139);

rect(30, 0, 8, 139);

rect(60, -5, 8, 139);

rect(90, -2, 8, 139);

pop();

}

function fence2(x,y,s) {

push();
translate(x,y);
scale(s);
noStroke();

fill(22, 13, 71);
rect(-24, 15, 145, 8);

rect(0, 0, 8, 139);

rect(30, 0, 8, 139);

rect(60, -5, 8, 139);

rect(90, -2, 8, 139);

pop();

}

function zombie() {

push();

noStroke();

fill(38, 34, 98);

ellipse(7, 238, 14, 20);

//shoulders
ellipse(7, 250, 14, 4.5);

//arm1
rect(10, 255, 29, 4);
ellipse(39, 260, 5.5, 10);

//neck
rect(4, 246, 5.5, 7.5);

//torso
rect(0, 250, 14, 26);

//leg1
rect(0, 276, 8, 35);

//foot1
rect(0, 311, 16, 3);

ellipse(8, 311, 16, 6);

//arm2
push();
translate(-86,235);
rect(5, 5, 29, 4);
pop();
ellipse(34, 248, 5.5, 10);

push();
translate(-86,235);
//leg1
rect(-3, 26, 8, 35);

//foot1
rect(-3, 61, 16, 3);

ellipse(5, 61, 16, 6);
pop();
pop();

}

function hand() {

push();

scale(1.7);
noStroke();
push();

fill(22, 13, 71);

beginShape();
vertex(0, 0);
vertex(0, -18);
vertex(-6, -25);
vertex(-5.8, -30.8);

vertex(-4.5, -34);
vertex(-2.7, -33);
vertex(-3, -28);
vertex(-0.2, -26);

vertex(0.2, -36);
vertex(-1.5, -38);
vertex(0, -40);
vertex(3, -36.7);

vertex(3, -28.5);
vertex(4.5, -37);
vertex(2.25, -40.5);
vertex(3.9, -42.25);

vertex(6.7, -38);
vertex(6.7, -30);
vertex(8.6, -37);
vertex(7.2, -41);

vertex(8.6, -42.7);
vertex(11.2, -37.4);
vertex(9.8, -28.3);
vertex(12, -34.8);

vertex(12, -38);
vertex(13.5, -38.5);
vertex(14.1, -34.5);
vertex(10.8, -20);

vertex(10.5, 0);

endShape(CLOSE);

pop();

pop();

}

## Project-06-Abstract Clock

For this project I wanted to create a hospital scene to demonstrate time, and how lucky we are to experience time and have a beating heart. The IV drip represents minutes with markers indicating mid and quarter points. The heart monitor represents seconds, and the window scene outside indicates if it is morning or evening. Additionally, I threw in some moving clouds and spinning stars to make the window view more dynamic! Below are also pictures of how it looks during day and night time.

graanak-06
//Graana Khan
// Section B
// graanak@andrew.cmu.edu
// Porject-06

/* Seconds is shown by the heart monitor, minutes are shown by the blood bag IV decreasing,
and hours are shown by whether the window displays a nighttime or daytime scene. */

function setup() {
createCanvas(480, 480);
background(220);
var x = 0;
}

function draw() {
let h = hour();
let m = minute();

background(237, 237, 239);
noStroke();
fill(56, 46, 35);
rect(0, 407, 481, 73);

//window frame
noStroke();
fill(190, 195, 198);
rect(164, 268, 258, 20);
rect(175, 30, 235, 241);

//iv drip
fill(216);
rect(18, 457, 80, 5, 10);
rect(56, 127, 5, 333, 10);
rect(59, 134, 48, 5, 10);
rect(103, 135, 4, 9, 10);

//iv drip bag and wire
stroke(225, 224, 252);
strokeWeight(2);
noFill();
rect(88.5, 144, 34, 62.5, 10);
strokeWeight(1);
fill(147, 6, 6);
beginShape();
curveVertex(103, 206);
curveVertex(103, 206);
curveVertex(103, 293);
curveVertex(106, 322);
curveVertex(128, 342);
curveVertex(182, 357);
curveVertex(291, 357);
curveVertex(292, 353);
curveVertex(182, 353);
curveVertex(129, 338);
curveVertex(109, 319);
curveVertex(107, 293);
curveVertex(107, 206);
curveVertex(107, 206);
endShape();

//iv blood with changing minutes
noStroke();
fill(147, 6, 6);
rect(90, 145+m, 30, 60-m, 10);

// iv bag lines showing mid points of the minutes
stroke(225, 224, 252);
strokeWeight(2);
line(89, 160, 93, 160);
line(89, 175, 99, 175);
line(89, 190, 93, 190);

//window appearance
if(h < 18 & h > 5){
daytime();
} else{
nighttime();
}

//table
noStroke();
fill(255);
rect(92, 308, 6, 141, 10);
rect(338, 308, 6, 141, 10);
rect(92, 305, 252, 12, 10);

//flower vase
stroke(50, 132, 50);
strokeWeight(2);
line(312, 302, 312, 243);

stroke(225, 224, 252);
strokeWeight(1);
noFill();
rect(298, 263, 28, 46, 7);

//water
fill(187, 201, 249, 100);
noStroke();
rect(298, 280, 28, 29, 7);

//flower
noStroke();
fill(244, 132, 196);
ellipse(307, 244, 11, 2);
ellipse(318, 244, 11, 2);
push();
translate(308, 247);
ellipse(0, 0, 11, 2);
pop();
push();
translate(317, 247);
ellipse(0, 0, 11, 2);
pop();
push();
translate(310, 249);
ellipse(0, 0, 11, 2);
pop();
push();
translate(314, 249);
ellipse(0, 0, 11, 2);
pop();
push();
translate(308, 242);
ellipse(0, 0, 11, 2);
pop();
push();
translate(317, 242);
ellipse(0, 0, 11, 2);
pop();
push();
translate(310, 239);
ellipse(0, 0, 11, 2);
pop();
push();
translate(320, 260);
ellipse(0, 0, 11, 2);
pop();
fill(255, 223, 87);
ellipse(312, 244, 4, 3);

//heart monitor
fill(255);
rect(143, 202, 135, 103, 20);
fill(49, 49, 51);
rect(147, 206, 128, 97, 20);
fill(194, 255, 69);
rect(240, 290, 19, 8, 10);
fill(72, 72, 255);
ellipse(233, 294, 8, 8);

//hospital bed
fill(180, 178, 191);
rect(73, 364, 310, 16, 20);
rect(73, 331, 15, 45, 20);
push();
translate(450, 268);
rect(10, 0, 18, 134, 20);
fill(199, 221, 239);
rect(-17, 15, 27, 117, 40);
pop();
fill(199, 221, 239)
rect(89, 337, 285, 27, 20);

fill(180, 178, 191);
rect(80, 368, 5, 93, 10);
rect(378, 368, 5, 93, 10);

stroke(216);
strokeWeight(3);
fill(255);
ellipse(82, 461, 18, 18);
ellipse(380, 461, 18, 18);

//heart monitor seconds tracker
let sec = map(second(), 0, 60, 0, 120);
var x = sec;
heartmonitor(x);

}

function daytime(){
noStroke();
fill(213, 231, 247);
rect(186, 42, 211, 217);
fill(255, 255, 255, 150);
rect(210 + (mouseX/50), 55, 52, 21, 20);
rect(238 + (mouseX/50), 68, 39, 21, 10);
rect(331 + (mouseX/50), 86, 48, 28, 10);
rect(261 + (mouseX/50), 168, 38, 21, 10);
rect(244 + (mouseX/50), 179, 38, 21, 10);
fill(247, 221, 109, 100);
circle(292, 80, 63);
fill(247, 221, 109);
circle(292, 80, 50);
}

function nighttime(){
noStroke();
fill(12, 33, 48);
rect(186, 42, 211, 217);
noFill();
stroke(234, 234, 139, 200);
strokeWeight(2);
push();
translate(360, 75);
line(0, -5, 0, 5);
line(-5, 0, 5, 0);
pop();
push();
translate(357, 166);
line(0, -5, 0, 5);
line(-5, 0, 5, 0);
pop();
push();
translate(226, 121);
line(0, -5, 0, 5);
line(-5, 0, 5, 0);
pop();
push();
translate(292, 80);
noStroke();
fill(255, 255, 255, 100);
circle(0, 0, 63);
fill(255);
circle(0, 0, 50);
pop();
}

function heartmonitor(x){
noStroke();
fill(247, 8, 162);
beginShape();
curveVertex(149 + x, 255);
curveVertex(149 + x, 255);
curveVertex(148 + x, 254);
curveVertex(147 + x, 255);
curveVertex(149 + x, 258);
curveVertex(151 + x, 255);
curveVertex(150 + x, 254);
curveVertex(150 + x, 254);
endShape();
}

## Project 06- Abstract Clock

sketch

//Shruti Prasanth
//Section C
//Project 6 - Abstract Clock

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

function draw() {

push();
background(175, 298, 173); //mint green
translate(width / 2, height / 2); //origin now center canvas
pop();

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

let sAngle = map(s, 0, 60, 0, 360);
let mAngle = map(m, 0, 60, 0, 360);
let hAngle = map(h, 0, 24, 0, 360);

translate(width / 2, height / 2);

//drawing the second hand ring
fill(255);
noStroke();
push();
for (var i = 0; i < s; i ++){
rotate(radians(sAngle)); //creates a pattern based on current second
ellipse(0, -200, 20, 20);
}
pop();

//drawing the minute hand ring
push();
fill(207, 187, 208); //purple
for (var j = 0; j < m; j ++){
rotate(radians(mAngle)); // pattern based on what minute it is
ellipse(0, -130, 30, 30);
}
pop();

//the hour hand ring
push();
fill(43, 97, 109);
for (var k = 0; k < h; k ++){
rotate(radians(hAngle)); // pattern based on hour
ellipse(0, -50, 40, 40);

}
pop();

// drawing the middle clover
circle(0,0,20);
circle(0,15,20);
circle(0,-15,20);
circle(15,0,20);
circle(-15,0,20);

}

## Project – 06

sketch
//Shaun Murray, Section B

var x
var y
var cDisPos = 0
var cDisNeg = 0

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

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

//ground
push();
noStroke();
fill(0, 150, 50);
rect(x, y + 145, width, 180);
fill('Brown');
rect(x, y + 150, width, 180);
pop();

x = width/2
y = height/2

//cloud
push();
translate(cDisPos, y - 100);
cloud(0, );
cDisPos += 1
if (cDisPos > width + 50) {
cDisPos = -50
}
pop();

push();
translate(cDisNeg, y);
cloud(0, 0);
cDisNeg -= 1
if (cDisNeg < -width) {
cDisNeg = width
}
pop();

//pipes
pipe(x , y + 45);
pipe(x - 150, y + 45);
pipe(x + 150, y + 45);

//stars
push();
translate(width * 0.813, height * .15 + second() * 6.8); //6.8 is the scale for seconds on the Y axis of 'pipe'
rotate(frameCount / 50);
star(0, 0, 13, 26, 5);

//eyes
fill(1);
ellipse(-5, 0, 3, 10);
ellipse(5, 0, 3, 10);
pop();

push();
translate(width * 0.5, height * .15 + minute() * 6.8);//6.8 is the scale for minutes on the Y axis of 'pipe'
rotate(frameCount / 50);
star(0, 0, 13, 26, 5);

//eyes
fill(1);
ellipse(-5, 0, 3, 10);
ellipse(5, 0, 3, 10);
pop();

push();
translate(width * 0.19, height * .15 + hour() * 17);//17 is the scale for hours on the Y axis of 'pipe'
rotate(frameCount / 50);
star(0, 0, 13, 26, 5);

//eyes
fill(1);
ellipse(-5, 0, 3, 10);
ellipse(5, 0, 3, 10);
pop();

}

function pipe(x, y) {

rectMode(CENTER);
push();
translate(x, y);
fill(0, 255, 50);
rect(0, 0, 75, height);
fill('Green');
rect(0, 0, 50, height);
fill(0, 200, 50);
stroke(1);
rect(0, -250, 90, 30);
fill(0, 200, 150);
noStroke();
rect(-25, -250, 20, 28);
pop();
}

let angle = TWO_PI / points;
let halfAngle = angle / 2;
beginShape();
fill(255, 255, 0);
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + cos(a) * rad2;
let sy = y + sin(a) * rad2;
vertex(sx, sy);
sx = x + cos(a + halfAngle) * rad1;
sy = y + sin(a + halfAngle) * rad1;
vertex(sx, sy);

}
endShape(CLOSE);
}

function cloud(x, y) {
push();
translate(x, y);

//cloud
noStroke();
fill(255);
ellipse(-5, -17, 43, 43);
fill(245);
ellipse(-3, -15, 40, 40);
//eyes
fill(1);
ellipse(-10, -25, 3, 10);
ellipse(0, -25, 3, 10);

fill(255);
ellipse(18, -12, 30, 30);
fill(245);
ellipse(20, -10, 27, 27);

fill(255);
ellipse(-20, -9, 25, 23);
fill(245);
ellipse(-17, -6, 23, 20);

fill(255);
ellipse(0, 0, 80, 10);
fill(245);
ellipse(5, 1, 75, 8);

pop();

}

Super Clock World. The pipes represent hour, minute, and second.

## Project 6 – Abstract Clock

I was inspired by the idea of the lunar cycles and the moon’s effect on the oceans for this project.

sketch
//hollyl
//abstract clock assignment
//section D

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

function h(){								//hour wave
var x = hour()*20;
var y = width/2;
noStroke();
fill(58, 63, 139);
rect(x-120, y/2, 240, y/2);
ellipse(x, y/2, 120, y);
rect(0, y, 480, y);
fill(30, 30, 75);
arc(x-120, y/2, 120, y, 0, PI);
arc(x+120, y/2, 120, y, 0, PI);
}

function mn(){								//minute wave
var x = minute()*8;
var y = 180
noStroke();
fill(58, 91, 139);
rect(x-90, height/2, y, y/2);
ellipse(x, height/2, 90, y);
rect(0, 330, 480, y);
fill(58, 63, 139);
arc(x-90, height/2, y/2, y, 0, PI);
arc(x+90, height/2, y/2, y, 0, PI);
}

function s(){								//second wave
var x = second()*8;
var y = 120;
noStroke();
fill(59, 104, 172);
rect(x-(y/2), 330, y, y/2);
ellipse(x, 330, y/2, y);
rect(0, height-90, 480, 90);
fill(58, 91, 139);
arc(x-(y/2), 330, y/2, y, 0, PI);
arc(x+(y/2), 330, y/2, y, 0, PI);
}

function draw(){
background(30, 30, 75);
h();
mn();
s();
fill(54, 146, 169);						//remnants of the millisecond wave that
rect(0, height-45, 480, 45);			//moved way too fast
}

Notes:

## Project_06_abstract clock

as_clock
// Huijun Shen  session D
// huijuns@andrew.cmu.edu

var x  ;
var y  ;
var mx ;
var my ;
var hx ;
var hy ;
var bigR = 200 ;
var mbigR = 100;
var hbigR = 50 ;
var size = 10 ;
var theta = 0;
var theta2 = 30;
var theta3 = 60;
var traceX = [];
var traceY = [];

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

function draw() {
background(180);

push();
translate(240,240);
fill(0);
circle(0,0,3);

fill(150,50,30);  // for the hour circle
circle ( hx,hy,30);

theta3 += 360/60/60;

fill(240,100,80); // for the minutes circle
circle(mx,my,20);

theta2 += 360/60/60;

print("m"+ theta2);

noStroke();
fill(240,144,105);  //for the second circle
circle(x,y,size);

theta += 360/60;

if(bigR <= 200){  // the radius is shortening when time passes
bigR = bigR - 200/59;
}
if(bigR<=0){
bigR = 200;
}

//print(bigR);

traceX.push(x);  // the doc after the second circle
traceY.push(y);
for(var i =0; i < traceX.length; i++ ){
fill(120,100,30);

circle(traceX[i],traceY[i],3);

}

if (traceX.length > 20){ // the length of the docs
traceX.shift();
traceY.shift();
}

pop();

}

## Project 06 – Abstract Clock

//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 06

function setup() {
createCanvas(400, 480);
frameRate(15);
}

function draw() {

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

//mapping the seconds so it fits width of...
var mapS = map(s, 0, 59, 0, 108); //glass of pink lemonade
var mapM = map(m, 0, 59, 0, 129); //coaster

background(255, 181, 101);

//blue table
noStroke();
fill(63, 85, 157);
rect(1, 335, 320, 146);

//window frame
noStroke();
fill(215, 126, 31);
rect(31, 31, 305, 233);

//sky during certain hours
noStroke();
fill(193, 210, 246);
rect(40, 38, 287, 219);

for (var i=1; i<=h; i++) {
if (i>=8 & i<=12) {
noStroke();
fill(255, 196, 137);
rect(40, 38, 287, 219);
}
if (i>12 & i<=18) {
noStroke();
fill(193, 210, 246);
rect(40, 38, 287, 219);
}
if (i>18 & i<=24) {
noStroke();
fill(29, 42, 117);
rect(40, 38, 287, 219);
}
}

//sun & moon (changes during certain hours)
for (var i=1; i<=h; i++) {
if (i>=7 & i<=12) { //morning sun
noStroke();
fill(253, 241, 142); //color of layer1
ellipse(116, 112, 83, 83);
fill(251, 243, 175); //color of layer2
ellipse(116, 112, 69, 69);
fill(249, 245, 215); //color of layer3
ellipse(116, 112, 53, 53);
}
if (i>12 & i<=18) { //afternoon sun
noStroke();
fill(255, 152, 68);
ellipse(116, 112, 83, 83);
fill(255, 205, 68);
ellipse(116, 112, 69, 69);
fill(252, 228, 108);
ellipse(116, 112, 53, 53);
}
if (i>18 & i<=24) { //moon -- night time
noStroke();
fill(119, 119, 119); //color of layer 1
ellipse(116, 112, 83, 83);
fill(170, 170, 170); //color of layer 2
ellipse(116, 112, 69, 69);
fill(209, 209, 209); //color of layer 3
ellipse(116, 112, 53, 53);
}
if (i>=1 & i<8) { //night to dawn
noStroke();
fill(119, 119, 119); //color of layer 1
ellipse(116, 112, 83, 83);
fill(170, 170, 170); //color of layer 2
ellipse(116, 112, 69, 69);
fill(209, 209, 209); //color of layer 3
ellipse(116, 112, 53, 53);
}
}

//cloud 1
noStroke();
fill(255);
ellipse(230, 96, 36, 18);
ellipse(248, 87, 36, 18);
ellipse(279, 87, 36, 18);
ellipse(261, 99, 36, 18);

//cloud 2
noStroke();
fill(255);
ellipse(248, 186, 36, 18);
ellipse(230, 198, 36, 18);
ellipse(217, 186, 36, 18);
ellipse(199, 195, 36, 18);

//cloud 3
noStroke();
fill(255);
ellipse(117, 154, 36, 18);
ellipse(99, 166, 36, 18);
ellipse(86, 154, 36, 18);
ellipse(68, 163, 36, 18);

noStroke();
fill(249, 245, 215);
ellipse(370, 222, 160, 221);

//eyes
stroke(0);
strokeWeight(1);
fill(0);
beginShape();
curveVertex(301, 347);
curveVertex(309, 245);
curveVertex(316, 241);
endShape();

//shirtAndarms
noStroke();
fill(155, 178, 145);
ellipse(370, 448, 100, 240);

//hair
noStroke();
fill(88, 72, 72);
ellipse(376, 174, 171, 151);
ellipse(397, 305, 65, 255);

//coaster changes color by minutes(0, 15, 30, 45)
for (var i=0; i<=m; i++) {
if (i>=0 & i<15) { //blue coaster
noStroke();
fill(108, 121, 164);
ellipse(145, 413, 120+mapM, 35+mapM);
}
if (i>=15 & i<30) { //pink coaster
noStroke();
fill(226, 61, 110);
ellipse(145, 413, 120+mapM, 35+mapM);
}
if (i>=30 & i<45) { //green coaster
noStroke();
fill(63, 255, 86);
ellipse(145, 413, 120+mapM, 35+mapM);
}
if (i>=45 & i<=59) { //purple coaster
noStroke();
fill(201, 147, 255);
ellipse(145, 413, 120+mapM, 35+mapM);
}
}

//bottomAndmiddleOfcup
stroke(0);
strokeWeight(1);
fill(237, 244, 181);
rect(105, 284, 80, 131);
ellipse(145, 413, 80, 23);

//topOfcup
stroke(0);
strokeWeight(1);
fill(239, 244, 201);
ellipse(145, 285, 80, 23);

//drink
noStroke();
ellipse(145, 413, 60, 13);
rect(115, 414, 60, -mapS); //fills up each second

}

For this project, I wanted to show the different times during the day through the setting of my working area and my favorite beverage to drink. During the day, the window would show the sun and blue sky. During the evening, the window would show the moon and dark sky. Therefore, it changes depending on the hour. As for minutes, I decided to change the size and color of the coaster whenever the time hits 00, 15, 30, or 45. Lastly, the seconds are shown through the increasing amount of pink lemonade within the glass. Below is a drawing I made in photoshop to help me create this project.

## Project 06 – Abstract Clock

candles

function setup() {
createCanvas(480, 480);
background(46, 27, 61);

}

function draw() {
var sec = second();
var min = minute();
var hr = hour();

background(122, 49, 0);
noStroke();

fill(255, 236, 202, 30);
ellipse(240, 128+sec, 730, 505);
ellipse(240, 200+(2*min), 540, 330);
ellipse(240, 30+(13*hr), 368, 230);
// cast lighting

fill(0, 0, 0, 60);
ellipse(240, 425, 420, 75);

fill(146, 138, 183);
ellipse(240, 415, 400, 75);
fill(177, 175, 232);
ellipse(240, 410, 320, 45);
// plate

fill(255, 242, 233);
rect(210, 100+(13*hr), 60, 312-(13*hr));
ellipse(240, 412, 60, 15);
stroke(255, 205, 171);
strokeWeight(0.5);
ellipse(240, 100+(13*hr), 60, 15);
// middle candle (takes the whole day to melt)

push();
fill(255, 210, 110);
circle(240, 70+(13*hr), 35);
triangle(225, 61+(13*hr), 255, 61+(13*hr), 240, 30+(13*hr));
fill(255, 237, 202);
circle(240, 73+(13*hr), 26);
pop();
// middle candle flame

var min = minute();
noStroke();
rect(160, 292+(2*min), 30, 120-(2*min));
rect(290, 292+(2*min), 30, 120-(2*min));
ellipse(175, 412, 30, 8);
ellipse(305, 412, 30, 8);
stroke(255, 205, 171);
strokeWeight(0.5);
ellipse(175, 292+(2*min), 30, 8);
ellipse(305, 292+(2*min), 30, 8);
// candles on either side of the middle candle (take an hour to melt)

push();
fill(255, 210, 110);
circle(175, 270+(2*min), 22);
circle(305, 270+(2*min), 22);
triangle(175, 245+(2*min), 166, 264+(2*min), 184, 264+(2*min));
triangle(305, 245+(2*min), 296, 264+(2*min), 314, 264+(2*min));
fill(255, 237, 202);
circle(175, 272+(2*min), 16);
circle(305, 272+(2*min), 16);
pop();
// flames for hour candles

noStroke();
rect(120, 352+sec, 20, 60-sec);
rect(340, 352+sec, 20, 60-sec);
ellipse(130, 412, 20, 5);
ellipse(350, 412, 20, 5);
stroke(255, 205, 171);
strokeWeight(0.5);
ellipse(130, 352+sec, 20, 5);
ellipse(350, 352+sec, 20, 5);
// outermost candles (take 1 min to melt)

push();
fill(255, 210, 110);
circle(130, 339+sec, 13);
circle(350, 339+sec, 13);
triangle(130, 325+sec, 124, 336+sec, 136, 336+sec);
triangle(350, 325+sec, 356, 336+sec, 344, 336+sec);
fill(255, 237, 202);
circle(130, 340+sec, 9);
circle(350, 340+sec, 9);
pop();
// flames for minute candles
}

For my abstract clock, I used a set of candles melting to represent the time. The biggest candle in the middle takes the entire day to “melt,” the ones on either side of it both take one hour to melt, and the smallest candles on the ends each take one minute to melt. The flames and cast lighting move accordingly, and the candles reset with the time.

I began with a preliminary sketch: