## Kyle Leve-Project-06-Abstract-Clock

``````// Kyle Leve
// kleve@andrew.cmu.edu
// Section A
// Project-06-Abstract-Clock

var spacing = 30;
var angle = 0;
var H;
var M;
var S;
var r;
var g;
var b;

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

function draw() {
var H = hour(); // Time variable
var M = minute(); // Time variable
var S = second(); // Time variable
var r = random(0, 255); // Random color value
var g = random(0, 255); // Random color value
var b = random(0, 255); // Random color value

if (S === 0) { // Sets star in the center to blink random colors every minute
fill(r, g, b);
textSize(70);
text('*', width / 2 - 13, height / 2 + 37);
}

for (i = 0; i <= width; i += spacing) { // Sets diagonal vertical star line
for (i = 0; i <= height; i += spacing) {
if (H < 12) { // Makes star color white if a.m
fill(255);
textSize(30);
text('*', i - 20, i);
} else if (H >= 12) { // Makes star color yellow if p.m
fill('yellow');
textSize(30);
text('*', i - 20, i);
}
if (M === 0 & S <= 5) { // Makes star line blink random colors every hour
fill(random(r, g, b))
textSize(30);
text('*', i - 20, i);
}
}
}
for (i = 0; i <= width; i += spacing) { // Sets other diagonal star line
for (i = 0; i <= height; i += spacing) {
if (H < 12) { // Makes star color white in a.m
fill(255);
textSize(30);
text('*', i + 10, height - i);
} else if (H >= 12) { // Makes star color yellow in p.m
fill('yellow');
textSize(30);
text('*', i + 10, height - i);
}
if (M === 0 & S <= 5) { // Makes star line blink random colors every hour
fill(random(r, g, b))
textSize(30);
text('*', i + 10, height - i);
}
}
}
// Every donut is set to draw after the previous one and each donut is set to be drawn in about 5 seconds

if (S >= 0 & S < 5) { // Creates top red donut
fill('red');
push();
translate(width / 2, height / 4);
textSize(50);
text('*', 0, 0);
pop();
angle = angle + 6;
}
if (S >= 5 & S < 10) { // Creates right red donut
fill('red');
push();
translate(width * 0.75, height / 2);
textSize(50);
text('*', 0, 0);
pop();
angle = angle + 6;
}
if (S >= 10 & S < 15) { // Creates bottom red donut
fill('red');
push();
translate(width / 2, height * 0.75);
textSize(50);
text('*', 0, 0);
pop();
angle = angle + 6;
}
if (S >= 15 & S < 20) { // Creates left red donut
fill('red');
push();
translate(width / 4, height / 2);
textSize(50);
text('*', 0, 0);
pop();
angle = angle + 6;
}
if (S >= 20 & S < 25) { // Creates top purple donut
fill('purple');
push();
translate(width / 2, height / 4);
textSize(50);
text('*', 0, 0);
pop();
angle = angle + 6;
}
if (S >= 25 & S < 30) { // Creates right purple donut
fill('purple');
push();
translate(width * 0.75, height / 2);
textSize(50);
text('*', 0, 0);
pop();
angle = angle + 6;
}
if (S >= 30 & S < 35) { // Creates bottom purple donut
fill('purple');
push();
translate(width / 2, height * 0.75);
textSize(50);
text('*', 0, 0);
pop();
angle = angle + 6;
}
if (S >= 35 & S < 40) { // Creates left purple donut
fill('purple');
push();
translate(width / 4, height / 2);
textSize(50);
text('*', 0, 0);
pop();
angle = angle + 6;
}
if (S >= 40 & S < 45) { // Creates top orange donut
fill('orange');
push();
translate(width / 2, height / 4);
textSize(50);
text('*', 0, 0);
pop();
angle = angle + 6;
}
if (S >= 45 & S < 50) { // Creates right orange donut
fill('orange');
push();
translate(width * 0.75, height / 2);
textSize(50);
text('*', 0, 0);
pop();
angle = angle + 6;
}
if (S >= 50 & S < 55) { // Creates bottom orange donut
fill('orange');
push();
translate(width / 2, height * 0.75);
textSize(50);
text('*', 0, 0);
pop();
angle = angle + 6;
}
if (S >= 55 & S < 60) { // Creates left orange donut
fill('orange');
push();
translate(width / 4, height / 2);
textSize(50);
text('*', 0, 0);
pop();
angle = angle + 6;
}
}``````

I found this project to be a little difficult because I did not have an initial idea. I decided to make something where the image would continuously change colors based off of the time. The overlapping donuts represent every 20 seconds and the stars flash random colors either every minute or every hour. In addition, the diagonal star lines are either white or yellow depending on if it is a.m or p.m respectively. This project allowed me to get more comfortable with time functions and setting things up within certain time constraints.

My initial sketch once I came up with an idea.

## Anthony Ra – Project 06 – Abstract Clock

``````/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-06 */

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

function draw() {

var phoneStart = 130;
var phoneEnd = 220;
var screenWidth = 220;
var screenHeight = 400;

/* phone */
noStroke();
fill(0);
rect(127.5, 15, 225, 450, 20);
fill(180);
rect(phoneStart, 40, phoneEnd, 400, 10);

/* phone lenses */
stroke(50);
strokeWeight(3);
line(width/2 - 20, 27.5, width/2 + 20, 27.5);
noStroke();
fill(60);
ellipse(width/2 + 60, 27.5, 10, 10);
ellipse(width/2 + 80, 27.5, 5, 5);

noStroke();

/* grid lines on screen */
for (var i = 140; i <= 340; i += 10) {
stroke(255);
strokeWeight(0.25);
line(i, 40, i, 440);
}

for (var i = 40; i <= 430; i += 10) {
stroke(255);
strokeWeight(0.25);
line(phoneStart, i, 350, i);
}

/* current time variables */
var D = day();
var H = hour();
var M = minute();
var S = second();

/* rectangle widths */
var mappedD = map(D, 0, 30, 0, screenWidth);
var mappedH = map(H, 0, 23, 0, screenHeight);
var mappedM = map(M, 0, 59, 0, screenHeight);
var mappedS = map(S, 0, 59, 0, screenWidth);

fill(90, 255, 70);
rect(phoneStart, 310, mappedD, 10);
fill(255, 204, 0);
rect(150, 40, 10, mappedH);
fill(255, 100, 120);
rect(300, 40, 10, mappedM);
fill(100, 120, 255);
rect(phoneStart, 150, mappedS, 10);

/* apps */
noStroke();
fill(50, 80, 200);
rect(width/2 - 100, 270, 35, 35, 10);
/* snapchat */
fill(255, 230, 0);
rect(width/2 - 50, 270, 35, 35, 10);
/* gmail */
fill(255);
rect(width/2 + 15, 270, 35, 35, 10);
stroke(255, 0, 0);
strokeWeight(5);
line(258, 273, 272.5, 285);
line(272.5, 285, 287, 273);
/* espn */
noStroke();
fill(255);
rect(width/2 - 50, 220, 35, 35, 10);
stroke(255, 0, 0);
strokeWeight(5);
line(203, 230, 218, 230);
line(200, 237, 215, 237);
line(200, 237, 197, 244);
line(197, 244, 212, 244);
/* messenger */
noStroke();
fill(255);
rect(width/2 + 15, 220, 35, 35, 10);
fill(80, 120, 255);
ellipse(width/2 + 32.5, 237.5, 30, 25);
triangle(262, 237.5, 260, 252, 285, 237.5);
/* spotify */
noStroke();
fill(0);
rect(width/2 + 65, 270, 35, 35, 10);
fill(0, 180, 0);
ellipse(width/2 + 82.5, 287.5, 30, 30);
stroke(0);
strokeWeight(4);
beginShape();
curveVertex(315, 282);
curveVertex(315, 282);
curveVertex(322.5, 280);
curveVertex(330, 284);
curveVertex(330, 284);
endShape();
strokeWeight(3);
beginShape();
curveVertex(315, 288);
curveVertex(315, 288);
curveVertex(321, 286);
curveVertex(328, 290);
curveVertex(328, 290);
endShape();
strokeWeight(2);
beginShape();
curveVertex(317, 294);
curveVertex(317, 294);
curveVertex(321, 292);
curveVertex(326, 295);
curveVertex(326, 295);
endShape();
/* phone */
noStroke();
fill(0, 180, 0);
rect(width/2 - 100, 385, 35, 35, 10);
stroke(255);
strokeWeight(5);
beginShape();
curveVertex(152, 394);
curveVertex(152, 394);
curveVertex(150, 400);
curveVertex(160, 410);
curveVertex(165, 407);
curveVertex(165, 407);
endShape();
/* contact */
noStroke();
fill(230, 140, 0);
rect(width/2 - 50, 385, 35, 35, 10);
fill(255);
ellipse(207.5, 400, 17, 20);
triangle(208, 405, 196, 415, 220, 415);
/* message */
noStroke();
fill(255, 0, 0);
rect(width/2 + 15, 385, 35, 35, 10);
fill(255);
rect(width/2 + 22, 390, 23, 20, 5);
triangle(width/2 + 22, 405, width/2 + 20, 415, width/2 + 26, 410);
/* camera */
noStroke();
fill(255, 120, 255);
rect(width/2 + 65, 385, 35, 35, 10);
fill(255);
rect(width/2 + 70, 395, 25, 18);
noFill();
stroke(255);
strokeWeight(3);
rect(width/2 + 75, 390, 15, 10);
noStroke();
fill(255, 120, 255);
ellipse(322.5, 404.5, 12, 12);
noStroke();
fill(255, 0, 100);
ellipse(width/2 - 70, 275, 15, 15);
ellipse(width/2 - 20, 275, 15, 15);
ellipse(width/2 + 45, 275, 15, 15);
ellipse(width/2 + 45, 225, 15, 15);
fill(255);
text('2', width/2 - 72, 278);
text('1', width/2 - 22, 278);
text('8', width/2 + 43, 278);
text('3', width/2 + 43, 228);
/* Verizon Wireless */
noStroke();
fill(0);
textSize(10);
text('Verizon Wireless', 140, 50);

}
``````

For some reason, the background screen for the Google Nexus One popped into my head. It is a pixelated background with a series of primary-colored (and yellow) lines moving through the screen.

I replicated that onto my current smart phone and mapped it in a way that the viewer would read the time in an abstract manner. Since most of us look at out phones to look at the time, it was a challenge for me look into way to visually tell time.

## Jessica Timczyk – Project 06 – Abstract Clock

``````// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project-06-Abstract Clock

// Global Variables
var chipX = 0; // x position of choco chip
var chipY = 0; // y positiom of choco chip
var chunkX = 0; // x position of choco chunk
var chunkY = 0; // y position of choco chunk

//--------------------------
function setup() {
createCanvas(300, 300);
//millisRolloverTime = 0;

frameRate(1); // the chips change position every second so you can tell when a second goes by
}

//--------------------------
function draw() {
background(183, 225, 255);

strokeWeight(3);
fill(206, 149, 75);
ellipse(width / 2, height / 2, 250, 250);

fill(183, 225, 255);
noStroke();
ellipse(width / 2 - 120, height / 2, 30, 35);
ellipse(width / 2 - 115, height / 2 - 17, 30, 27);
ellipse(width / 2 - 120, height / 2 - 30, 30, 35);

// Crumbs at bite
stroke(60, 46, 16);
fill(206, 149, 75);
ellipse(width / 2 - 135, height / 2 - 15, 12, 12);
ellipse(width / 2 - 117, height / 2 - 5, 6, 6);
ellipse(width / 2 - 120, height / 2 - 30, 9, 9);
ellipse(width / 2 - 136, height / 2 + 35, 15, 15);
ellipse(width / 2 - 125, height / 2 + 50, 6, 6);
ellipse(width / 2 - 138, height / 2 + 65, 5, 5);
ellipse(width / 2 - 140, height / 2 + 5, 7, 7);
ellipse(width / 2 - 115, height / 2 - 65, 6, 6);
ellipse(width / 2 - 128, height / 2 - 60, 9, 9);

// top right corner crumbs
ellipse(245, 26, 7, 7);
ellipse(265, 37, 17, 17);
ellipse(255, 55, 10, 10);

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

// number time text
fill(255);
text("   "   + H + "  : ", 5, 22);
text("   " + M + "  : ", 35, 22);
text("   " + S, 65, 22);

// chocolate chips for the number of minutes
for (var i = 0; i < M; i ++) {
noStroke();
var chipX = random(65, 240);
var chipY = random(65, 240);
fill(87, 64, 16);
ellipse(chipX, chipY, 10, 10);
}

// chocolate chunks for the number of hours
for (var j = 0; j < H; j ++) {
fill(52, 39, 11);
stroke(33, 25, 8);
var chunkX = random(70, 220);
var chunkY = random(70, 220);
rect(chunkX, chunkY, 11, 22);
}
stroke(0);
}``````

I really enjoyed this project, it was fun to try to think of a way to convey time unconventionally. I finally came up with making a “cookie clock” after thinking about what I wanted to do and I am happy with how the clock turned out, looking very cartoonish and almost comical. It took me a bit to figure out how I wanted to represent each variable, hours, minutes and seconds and I eventually decided to, rather than physically represent seconds, have the seconds be represented by the pace of the movement of the chocolate chips and chunks. I tried briefly to make the cookie 3D but it ended up being too complicated for this project, but I would like to learn how to do that in the future.

## Curran Zhang- Project 06 – Abstract Clock

``````/*Curran Zhang
curranz
Project 6
Section A
*/

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

function draw(){
background(204,230,255);
angleMode(DEGREES);
var hr = hour();
var min = minute();
var sec = second();
var rSec = map(sec,0,59,50,width - 50);
var rSec1 = map(sec,0,59,width - 50, 50);
var rMin = map(min,0,59,50,width - 50);
var rMin1 = map(min,0,59,width - 50,50);
var rHr = map(hr,0,23,50,width - 50);

//Sun(based on the hours)
fill(255, 200, 60)
ellipse(rHr, 100,50,50);

//Sun Inner Rays(based on the minutes)
for (var i = 1; i <= min; i++) {
var x = 0
push();
translate(rHr,100);
rotate(180);
rotate(6 * i);
stroke(255, 204, 51);
line(0,0,0,50)
pop();
}

//Sun Outer Rays(based on the seconds)
for (var i = 1; i <= sec; i++) {
var x = 0
push();
translate(rHr,100);
rotate(180);
rotate(6 * i);
stroke(255, 234, 81);
strokeWeight(1.5);
line(rSec,0,0,50)
pop();
}

//Clouds(based on the minutes)
fill(275);
ellipse(rMin - 20,200, 50,50);
ellipse(rMin - 40,220,35,30);
ellipse(rMin,210,90,60);
ellipse(rMin + 35,200,40,40);
ellipse(rMin + 40,220,80,50);

ellipse(rMin1 - 20,200, 50,50);
ellipse(rMin1 - 40,220,35,30);
ellipse(rMin1,210,90,60);
ellipse(rMin1 + 35,200,40,40);
ellipse(rMin1 + 40,220,80,50);

//Tree
fill(165,113,100);
beginShape();
vertex(530,0,590,0);
vertex(530,0);
vertex(540,150);
vertex(540,180);
vertex(530,340);
vertex(590,340);
vertex(580,180);
vertex(580,150);
vertex(590,0);
endShape();

//Land
fill(255, 209, 179);
beginShape();
vertex(0,550);
vertex(280,375);
vertex(283,366);
vertex(325,360);
vertex(335,350);
vertex(360,340);
vertex(385,326);
vertex(470,330);
vertex(485,333);
vertex(527,331);
vertex(553,326);
vertex(558,324);
vertex(584,326);
vertex(600,330);
vertex(600,600);
vertex(0,600);
endShape(CLOSE);

//Sea
fill(0,204,255);
noStroke();
rect(0,400,600,300);

for (var i = 0; i <= 10; i++) {
fill(0,204,255);
stroke(275);
strokeWeight(1);

if (i % 2 == 0)
{arc(30 + 60 * i ,400,60,15, 180, 0)
}
else {
if (i < 5)
{fill(204,230,255);
arc(30 + 60 * i ,400,60,15, 0,180)
}
else{
fill(255, 209, 179);
arc(30 + 60 * i ,400,60,15, 0,180)
}
}
}

//SeaFloor
noStroke();
fill(0,100,102);
beginShape();
vertex(0,557);
vertex(10,554);
vertex(31,540);
vertex(40,540);
vertex(57,538);
vertex(93,545);
vertex(133,557);
vertex(182,548);
vertex(231,544);
vertex(241,546);
vertex(325,584);
vertex(403,571);
vertex(425,567);
vertex(469,567);
vertex(518,548);
vertex(580,534);
vertex(600,526);
vertex(600,600);
vertex(0,600);
endShape(CLOSE);

//Fish (based on the seconds)
fill('orange')
ellipse(rSec, 500,40,25);
triangle(rSec - 10,500,rSec - 30,515,rSec - 30,480);

fill(255,102,204)
ellipse(rSec1, 460,40,25);
triangle(rSec1 + 10,460,rSec1 + 30,475,rSec1 + 30,445);

//Text
fill(0);
text( "Hour:" + hr ,40,560);
text( "Minute:" + min ,40,575);
text( "Second:" + sec ,40,590);
}

``````

For this project, I wanted to design a clock that shows the environment changing through time. Given how I previously done a mountain scenery, I thought it would be nice to create a beach scenery. The Sun itself has component that is linked to the hour, minute, and second. There are also other components to help show the minute and seconds more clearly.

## Jaclyn Saik- Project 06

``````/* Jaclyn Saik
Section E
jsaik@andrew.cmu.edu
Assignment-06-Project
*/

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

function draw() {
background("DimGray");

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

var skin = ("OliveDrab");
var earPositionX = 390;
var earPositionY = 200;
var noseW = 10;
if ((S % 2) > 0) { //if statement that changes variables based on whether seconds are odd or even
earPositionX = 390;
earPositionY = 200;
noseW = 10; //variable that changes nostril size
} else if ((S % 2) == 0) {
earPositionX = 380;
earPositionY = 190;
noseW = 15;
}

var lidPosition = 180-(map(H, 0, 23, 0, 180)); //position of eyelids, how wide the eyes are opened
var mouthSize = map(M, 0, 59, 10, 300); //map to create gradual transition in size of mouth

//background elements
noStroke();
fill("DarkMagenta");
ellipse(150, 200, 580, 690);
fill("Purple")
ellipse(150, 200, 480, 530);
fill("DarkOliveGreen");
rect(20, 300, 260, 300);

//the face:
fill(skin)
ellipse(150, 200, 450, 500);

fill("DarkOliveGreen");
ellipse(40, 135, 140, 190)
ellipse(230, 135, 140, 190)

fill("white");
ellipse(40, 130, 130, 180)
ellipse(230, 130, 130, 180)

fill(0);
ellipse(40, 130, 50, 80);
ellipse(230, 130, 50, 80);

//mouth
stroke("DarkGreen");
strokeWeight(6);
fill("black")
arc(140, 240, 300, mouthSize, 0, PI, CHORD);
noStroke();

//ear
fill(skin);
ellipse(earPositionX, earPositionY, 80, 100) //relies on seconds for x and y position

//eyelids
fill(skin)
rect(-30, 40, 140, lidPosition); //eyelids gradually open as the hours get higher/day goes on
rect(160, 40, 140, lidPosition); //rely on mapped position variable declared above

//right eyelash
stroke(0);
strokeWeight(4);
line(163, 40+lidPosition, 300, 40+lidPosition+7);
line(163, 40+lidPosition, 310, 40+lidPosition-2);

//left eyelash
line(105, 40+lidPosition, -30, 40+lidPosition+7);
line(105, 40+lidPosition, -30, 40+lidPosition+3);
line(105, 40+lidPosition, -30, 40+lidPosition-2);

//eyebrow
stroke("Purple");
strokeWeight(8);
noFill();
arc(40, 60, 130, 60, PI, 0)
arc(230, 60, 130, 60, PI, 0)

//nose

noStroke();
fill(0);
ellipse(125, 200, noseW, 20);
ellipse(150, 200, noseW, 20);

}``````

This project was an interesting way to create an animation that relied on the entire length of the day to complete, instead of confined within the frame rate we usually declare. I had a lot of different ideas for representing time after browsing that blog post about the different ways that time was represented before modern clocks. I was drawn to the use of sunlight to create elaborate timekeeping sculptures: to me, they looked as much like tools as beautiful works of art.

However, for this project  I wanted to include humor and pull myself away from using traditional numerical qualities to tell time. I decided on a face early on, and as I built this person I felt like making this project Halloween-themed is a fitting start to October. This was also my first time really manipulating the map function, which I’m grateful for because now I have a much better grasp on how to use it.

In this clock, I made the witch’s eyelids reliant on the hour: when it is very early in the morning, her eyes are barely open, but as the day progresses they get wider and wider. Her muppet mouth is reliant on the minute, so her mouth gets progressively wider as the minutes increase, and resets at zero every hour. Her ears and nostrils are designed to be more timekeeping devices, as they tick back and forth with each second.

## Shirley Chen-Project-06-Abstract Clock

``````// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project 06

var xS = []; //Create List for Second Count
var yS = [];
var xM = []; //Create List for Minute Count
var yM = [];
var xH = []; //Create List for Hour Count
var yH = [];
var dxS = []; // Velocity in x Direction for Second Bubbles
var dyS = []; // Velocity in y Direction for Second Bubbles
var dxM = [];
var dyM = [];
var dxH = [];
var dyH = [];

function setup() {
createCanvas(400, 400);
// Randomly Assign Position and Velocity for Second Bubbles
for (var i = 1; i < 61; i++) {
xS[i] = random(100, 300);
yS[i] = random(10, 300);
dxS[i] = random(-5, 5);
dyS[i] = random(-5, 5);
}
//Randomly Assign Position and Velocity for Minute Bubbles
for (var i = 1; i < 61; i++) {
xM[i] = random(100, 300);
yM[i] = random(20, 300);
dxM[i] = random(-5, 5);
dyM[i] = random(-5, 5);
}
//Randomly Assign Position and Velocity for Hour Bubbles
for (var i = 1; i < 25; i++) {
xH[i] = random(30, 400);
yH[i] = random(30, 300);
dxH[i] = random(-5, 8);
dyH[i] = random(-5, 8);
}
}

function draw() {
var H = hour();
var M = minute();
var S = second();
var cirC = [];
var colR = 100;
var colG = 150;
var colB = 255;
var launcherLength1 = 80;
var launcherLength2 = 90;
background(241, 223, 224);
frameRate(8);
noStroke();
fill(148, 134, 186);
//Draw the Launcher
ellipse(40, 350, 70, 70);
quad(60, 330, launcherLength1, 320, launcherLength2, 350, 60, 380);
//Constrain the Hours to 0 - 12
if (H >= 12){
H = H % 12
}

for (var i = 1; i < S+1; i++) {
//Draw one Small Bubble for Every Second
//Color Become Darker for Each Bubble
colR += 10;
fill(colR, 183, 205);
ellipse(xS[i], yS[i], 10);
xS[i] += dxS[i];
yS[i] += dyS[i];
if (xS[i] + 10 > width || xS[i] - 10 < 90){
dxS[i] = - dxS[i];
}
if (yS[i] + 10 > height || yS[i] - 10 < 1){
dyS[i] = - dyS[i];
}
if (S % 2 == 0){
fill(148, 134, 186);
quad(60, 330, launcherLength1+10, 310, launcherLength2+10, 340, 60, 380);
//Make the Launcher Move Its "Mouth" for Every Second
}
}
for (var i = 1; i < M+1; i++) {
//Draw one Midium Bubble for Every Minute
//Color Become Darker for Each Bubble
colG -= 10;
fill(255, colG, colG);
ellipse(xM[i], yM[i], 20);
xM[i] += dxM[i];
yM[i] += dyM[i];
if (xM[i] + 20 > width || xM[i] - 20 < 90){
dxM[i] = - dxM[i];
}
if (yM[i] + 20 > height || yM[i] - 20 < 1){
dyM[i] = - dyM[i];
}
}
for (var i = 1; i < H+1; i++) {
//Draw one Large Bubble for Every Hour
//Color Become Darker for Each Bubble
colB -= 60;
fill(255, 200, colB);
ellipse(xH[i], yH[i], 30);
xH[i] += dxH[i];
yH[i] += dyH[i];
if (xH[i] + 30 > width || xH[i] - 30 < 0){
dxH[i] = - dxH[i];
}
if (yH[i] + 30 > height || yH[i] - 30 < 0){
dyH[i] = - dyH[i];
}
}
//Draw the Stand for the Bubble Launcher
fill(252, 205, 86);
rect(30, 355, 30, 40, 10, 10);
fill(249, 133, 133);
text('BOOM!', 30, 300);
}``````

For this project, I represent second, minute, and hour with bubbles with different sizes and colors. Using the for loop command, for each second there is a new small bubble coming up. I also change the RGB parameter gradually for each second, so the second bubble will change from blue to purple as time passing. Similarly, I also use for loop command to represent minute and hour with bubbles with different diameters. Moreover, I draw a “launcher” and control its outlet to contract or extend for each change in second. For odd number of seconds, its “mouth” will contract; for even number of seconds, it will extend. I also constrain the movement of the bubbles so that they bounce back when they hit the boundary.

## Kevin Riordan Project-06-Abstract-Clock-Section C

``````/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
Project_06_C*/
var prevSec;
var millisRolloverTime;
function setup() {
createCanvas(480,480);
millisRolloverTime = 0;
}

function draw() {
background(247,202,201);
var hours = hour();
var minutes = minute();
var seconds = second();
angleMode(DEGREES);
//making seconds smooth
if (prevSec != seconds) {
millisRolloverTime = millis();
}
prevSec = seconds;
var mills = floor(millis() - millisRolloverTime);
var secondsFrac = seconds + (mills / 1000);
//making a 12 hour clock instead of a 24 hour clock
if (hours >= 12) {
hours = hours % 12;
}
//abstract hours
push();
translate(width/2,height/2);
rotate(-90);
fill(200,120,120,80);
noStroke();
//making arcs for the hour triangles; k=0 corresponds to the exact hour (midpoint of group of arcs)
for (var k = 2; k >= 0; k -= 0.25) {
fill(220 - (30 * k),120,120,80);
arc(0,0,width * 1.5,height * 1.5,30 * (hours - k),30 * (hours + k));
}
pop();
//abstract minutes
var minutesMapped = map(minutes,0,59,0,width);
var minutesColor = map(minutes,0,59,0,255);
var columnWidth = width/61;
var changeHeight = 0;
fill(minutesColor - 50,100,minutesColor,25);
noStroke();
//left side of minutes pyramid
for(var columns = -1; columns < 30; columns++) {
push();
translate(0,height);
rect(columns * columnWidth,0,columnWidth,-changeHeight);
pop();
changeHeight+=minutesMapped/30;
}
//middle bar, length corresponds to minutes amount
fill(minutesColor,150,minutesColor,90);
rect(width/2 - columnWidth/2,height,columnWidth,-minutesMapped);
//right side of minutes pyramid
fill(minutesColor - 50,100,minutesColor - 30,25);
for(var columns = 31; columns < 61; columns++) {
changeHeight-=minutesMapped/30;
push();
translate(0,height);
rect(columns * columnWidth,0,columnWidth,-changeHeight);
pop();
}
//abstract seconds
var secondsFracMapped = map(secondsFrac,0,59,0,width/2 - 15);
var minutesMapped = map(minutes,0,59,0,width/2);
//goes outwards from center at 0 seconds to the edge at 60 seconds
if (minutes%2 == 0) {
for(j = 0; j <= 360; j += 10) {
var jColor = j;
jColor = constrain(jColor,50,255);
for(i = 0; i <= 360; i += 10) {
push();
translate(width/2,height/2);
rotate(i);
fill(jColor);
noStroke();
ellipse(j,-secondsFracMapped,4,4);
rotate(i / 2);
fill(100,60,60,25);
rect(j,-secondsFracMapped / 2,3,3 + i);
pop();
}
}
}
//odd minutes go into the center from edge at 0 seconds to center at 60.
else {
for(j = 0; j <= 360; j += 10) {
var jColor = j;
jColor = constrain(jColor,50,255);
for(i = 360; i >= 0; i -= 10) {
push();
translate(width/2,height/2);
rotate(i);
fill(jColor);
noStroke();
ellipse(j,(width/2) - secondsFracMapped,4,4);
rotate(i / 2);
fill(100,60,60,25);
rect(j,-secondsFracMapped / 2,3,3 + i);
pop();
}
}
}
}``````

I started with a very badly drawn sketch of what I wanted to do.

This project made me think about timing a lot. I started by doing the seconds, and used the example code to make it smooth using milliseconds rollover time. The seconds go out for even minutes, and in for odd minutes. I could not get the transition from going in to going out exactly right (as well as the transition from out to in), but I am okay with how it turned out. The minutes are represented by a pyramid at the bottom that grows and changes color as the minutes increase. The hours are represented in a fairly standard way, with a bunch of arcs that converge into a line that represents the hour hand on a traditional clock. This project made me think about how much stuff I can change over time, and I learned about how to change colors over a gradient as well.

## Kevin Thies – Project 6 – Abstract clock

``````// Kevin Thies
// kthies@andrew.cmu.edu
// Section C
// Abstrack Clock

var HDEG = 360 / 24;        // constants define ration of how many degrees
var MDEG = 360 / 60;        // around a circle per unit
var SDEG = 360 / 60;
var MSDEG = 360 / 1000;

var hDim = 50;              // define the dimension of each planetoid
var mDim = 25;
var sDim = 12;
var msDim = 6;

var starNum = 70;     // how many stars are in the background
var starX = [];       // empty arrays to etermine their size and position
var starY = [];       // an how often they twinkle
var starSize = [];
var tick = [];

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

// fill empty arrays with location and size data
for(var stars = 0; stars < starNum; stars++) {
starX.push(random(10, 470));
starY.push(random(10, 470));
starSize.push(random(3, 7));
tick.push(round(random(0, 10)));
}
}

function draw() {

angleMode(DEGREES); // this makes things easier for later
background(20);
push();

// add a new tick value for each star, if tick is randomly 0, twinkle
for(var stars = 0; stars < starNum; stars++) {
tick.shift(1);
tick.push(round(random(0, 10)));
if(tick[stars] == 0) {
starSize[stars] = random(3, 7);
}

// place stars
fill(70);
ellipse(starX[stars], starY[stars], starSize[stars], starSize[stars]);
}

//==================== Hours ==============================================
translate(240, 240); // moving origin to center of screen
rotate(HDEG * hour());

stroke(50, 0, 0);
strokeWeight(3);
noFill();
line(0, 0, 0 , 120);    // make the hour hand
ellipse(0,0, 240, 240); // make the orbit

noStroke();
fill("orange");
ellipse (0, 0, hDim, hDim); // make the hour planetoid

//==================== Minutes ============================================
translate(0, 120); // moving origin to end of hour hand
rotate(MDEG * minute());

stroke(50, 0, 0);
strokeWeight(3);
noFill();
line(0, 0, 0, 50);      // make the minute hand
ellipse(0,0, 100, 100); // make the orbit

noStroke();
fill("lightBlue");
ellipse (0, 0, mDim, mDim); // make the minute planetoid

//==================== Seconds ============================================
translate(0, 50); // moving origin to end of minute hand
rotate(SDEG * second());

stroke(50, 0, 0);
strokeWeight(3);
noFill();
line(0, 0, 0, 20);      // make the second hand
ellipse(0, 0, 40, 40);  // make the orbit

noStroke();
fill("mediumAquamarine");
ellipse (0, 0, sDim, sDim); // make the second planetoid

//==================== Milliseconds =======================================
translate(0, 20); // moving origin to end of second hand
rotate(MSDEG * millis());

stroke(50, 0, 0);
strokeWeight(3);
noFill();
line(0, 0, 0, 10);      // make the millisecond hand
ellipse(0, 0, 20, 20);  // make the orbit

noStroke();
fill("fireBrick");
ellipse (0, 0, msDim, msDim);   // make the millisecond planetoid

// add a little dot on the end of that hand
translate(0, 10);
fill("khaki");
ellipse(0, 0, 4, 4);

pop();
}
``````

Orbit clocks are cool with their circles inside circles, but they’re easy to read and overdone, so I made a clock where each unit orbits the next highest one. The centermost one is hours, orbited by minutes, orbited by seconds, orbited by milliseconds.
It was quite a challenge putting this together, as some arrays were being really finnicky, so even though the hours, minutes, seconds, and milliseconds could have been one operation on an array, I had to brute-force it. However, what would a space-y clock be without some twinkling stars!

As far as clocks go, I like how this ended up looking, even though it would take more effort than I’d be willing to put in to read.

## Eliza Pratt – abstract clock

``````/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project-06
*/

var fluffX = []; // x position of fixed seeds
var fluffY = []; // y position of fixed seeds
var angle = 0; //angle of fixed seeds

var looseX = []; //x position of floating seeds
var looseY = []; //y position of floating seeds
var dir = []; //direction of floating seeds
var w = 3; //width of fluff

var centerX = []; //x center of each hour stem
var centerY = []; // y center of each hour stem

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

//fills arrays for fixed and floating
//seed positions with random numbers
for (var i = 0; i < 60; i++) {

//converts angle to distribute fixed seeds around the stem
var min = 270 + map(angle, 0, 60, 0, 360);
angle++;

//positions for fixed seeds

//positions for floating seeds
looseX[i] = random(0, width);
looseY[i] = random(0, height);

//direction of floating seeds
dir[i] = random(-0.5, 0.5);

}

var x = 28; //starting position for first stem

//fills array for stem position
for (var i = 0; i < 12; i++) {
centerX[i] = x;
x+= 38
if (i % 2) {
centerY[i] = random(80, 170);
}
else {
centerY[i] = random(180, 260);
}

}

}

function draw() {
background("lightBlue");
drawSeed(); //draws fixed seeds
drawFloat(); //draws floating seeds
drawStem(); //draws stems

}

//draws fixed and minute-based seeds
function drawSeed() {
stroke(255);
if (hour() == 12 || hour() == 0) {
var flowerX = 12;
}
else {
var flowerX = hour() % 12;
}

//draws seeds around hours that have not passed
for (var j = 12; j >= flowerX; j--) {
for (var i = 0; i < 60; i++) {
stroke(240);
line(centerX[j] + fluffX[i], centerY[j] + fluffY[i], centerX[j], centerY[j]);
noStroke();
ellipse(centerX[j] + fluffX[i], centerY[j] + fluffY[i], w, w);
}
}

//draws seeds around hour stem corresponding to the current minute
//depletes one seed for every minute passed
for (var i = 60; i > minute(); i--) {
stroke(240);
line(centerX[flowerX - 1] + fluffX[i], centerY[flowerX - 1] + fluffY[i], centerX[flowerX - 1], centerY[flowerX - 1]);
noStroke();
ellipse(centerX[flowerX - 1] + fluffX[i], centerY[j] + fluffY[i], w, w);

}
}

//draws floating seeds corresponding to current second
function drawFloat() {
noStroke();

//adds floating seed at random position for each second passed
for (var i = 0; i < second(); i++) {
ellipse(looseX[i], looseY[i], w, w);

//assigns each seed a direction
looseX[i] += dir[i];
looseY[i] += dir[i + 1];

//resets seed position if it floats off the canvas
if (looseX[i] > width) looseX[i] = 0;
else if (looseX[i] < 0) looseX[i] = width;
if (looseY[i] > height) looseY[i] = 0;
else if (looseY[i] < 0) looseY[i] = height;
}
}

//draws stems and centers
function drawStem() {
stroke(255);
for (var i = 0; i < 12; i++) {
line(centerX[i], centerY[i], centerX[i], centerY[i] + height);
ellipse(centerX[i], centerY[i], 8, 8);
}

}

``````

How to read: The 12 stems represent hours, and the seeds that are positioned around them are the minutes. The seeds deplete each minute around the stem corresponding to the current hour. The loose bits of fluff appear each second and float aimlessly until they reset each minute.

This has been my favorite assignment so far! Learning about arrays has made many of my ideas more tangible. I knew for this assignment that I wanted to do something pictorial, and I originally considered using balloons or planets. Nevertheless, I’m very happy with how this clock turned out.
Early sketches:

## Erin Fuller-Abstract-Clock

``````//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 06-Abstract Clock

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

function draw() {
background(60);

var x = width / 2; //ellipse center
var y = height / 2; //ellipse center
var d = 350; //ellipse diameter

fill(90); // background circle
ellipse(x, y, d, d);

fill(255, 146, 68, 120); // MINUTE CHORD
var m = map(minute() + map(second(), 0, 60, 0, 1), 59, 0, 0, PI); // map minutes to half circle
arc(x, y, d, d, m - (PI / 4), -(m) - (PI / 4), CHORD); // -pi/4 to shrink diagonally right to left

fill(252, 123, 129, 120); // HOUR CHORD
var h = map(hour() + map(minute(), 0, 60, 0, 1), 23, 0, 0, PI); // map hours to half circle
arc(x, y, d, d, h + HALF_PI, -(h) + HALF_PI, CHORD); // +pi/2 to shrink bottom to top

fill(215, 105, 172, 120); // SECONDS CHORD
var s = map(second(), 59, 0, 0, PI); // map seconds to half circle
arc(x, y, d, d, s - (3 * PI / 4), -(s) - (3 * PI / 4), CHORD); // -3pi/4 to shrink diagonally left to right
}``````

My “clock” is based on three translucent chords. The data for the minutes, seconds, and hours, are mapped along half the circle and reflected. The color and opacity, allowing the colors to overlap and add on each other, were chosen for visual variety along with shifting the start of the chords in different positions along the circle.