//Name: Alessandra Fleck
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-06
function setup() {
createCanvas(480, 480);
noStroke();
}
function draw() {
background(255);
//set for for hour,minutes and seconds
var h = hour();
var m = minute();
var s = second();
//blue waves going down
for (var i = 0; i < (s*10); i ++) { //increments at x10 the distance
stroke(179,223,222);
strokeWeight(0.3);
line(i*4, 0, width, i);
line(i*2, 0, height * 2, i);
line(i*4, 0, height * 4, i);
line(i*2, 0, height * 0.75, i + 20);
line(i*4, 0, height * 0.6, i + 20);
line(i*2, 0, height * 0.5, i + 100);
}
//brown waves going down
for (var i = 0; i < (s*20); i +=5) { //increments at x20 the distance
stroke(255);
strokeWeight(0.5);
line(i*2, 0, width, i);
line(i*2, 0, height * 2, i);
line(i*2, 0, height * 4, i);
line(i*2, 0, height * 0.75, i + 200);
line(i*2, 0, height * 0.6, i + 200);
line(i*2, 0, height * 0.5, i + 600);
}
//black waves going down for the minutes
for (var i = 0; i < m; i +=5) { //strings will slowly branch out black for every minute
stroke(0);
strokeWeight(0.3);
line(i*2, 0, width, i);
line(i*2, 0, height * 2, i);
line(i*2, 0, height * 4, i);
line(i*2, 0, height * 0.75, i + 200);
line(i*2, 0, height * 0.6, i + 200);
line(i*2, 0, height * 0.5, i + 600);
}
//white circle_01
fill(100,10+(s*50),255);
noStroke();
ellipse(50,s*10,30,30);
//white circle_01_hour
fill(255);
stroke(0);
strokeWeight(1);
ellipse(50,h*10,30,30);
}
For this project I wanted the abstraction of the clock to be something that is completed as time passes. Instead of the long skinny arms of a clock being the seconds passing, I instead made them the minute hands and had the seconds move down in a parametric curve to create a wave in the background.
The sketch above shows a bit of the process in the form of the clock.
function setup() {
createCanvas(480, 480);
}
function draw() {
//create background color
background(13, 0, 76);
fill(255, 245, 104);
rect(0,0, width, height/4);
fill(255, 245, 104);
rect(0, 4 * height / 5, width, height/5);
//set up speed of time
var H = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
var M = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
var S = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
//declare variables for the centers of ellipses
var cxH = width / 5;
var cyH = height / 2;
var cxM = width / 2;
var cyM = height / 2;
var cxS = 4 * width / 5;
var cyS = height / 2;
//create three ellipses that represent hour, minute, and second
fill(255, 255, 255, 90);
stroke(255);
strokeWeight(5);
ellipse(cxH, cyH, 100, 100);
ellipse(cxM, cyM, 100, 100);
ellipse(cxS, cyS, 100, 100);
//print text for colon
fill(255);
textSize(40);
strokeWeight(5);
text(':', 160, height / 2 + 10);
text(':', 305, height / 2 + 10);
//print ellipses for hour, minute, and second based on the speed of time and angle using radians
fill(255);
strokeWeight(5);
stroke(255, 245, 104);
line(cxH - cos(H) * 50, cyH - sin(H) * 50, cxH + cos(H) * 50, cyH + sin(H) * 50);
/*
//trial and error
fill(200);
line(cxH, cyH, cxH+cos(H/2)*25, cyH+sin(H/2)*25);
var startX = cxH+cos(H/2)*25
var startY = cyH+sin(H/2)*25
line(startX-cos(H)*40, startY-sin(H)*40, startX+cos(H)*40, startY+sin(H)*40)
*/
stroke(255, 245, 104);
fill(255, 245, 104);
ellipse(cxH + cos(H) * 50, cyH + sin(H) * 50, 10, 10);
strokeWeight(5);
fill(255);
line(cxM - cos(M) * 50, cyM - sin(M) * 50, cxM + cos(M) * 50, cyM + sin(M) * 50);
stroke(255, 245, 104);
fill(255, 245, 104);
ellipse(cxM + cos(M) * 50, cyM + sin(M) * 50, 10, 10);
strokeWeight(5);
fill(255);
line(cxS - cos(S) * 50, cyS - sin(S) * 50, cxS + cos(S) * 50, cyS + sin(S) * 50);
stroke(255, 245, 104);
fill(255, 245, 104);
ellipse(cxS + cos(S) * 50, cyS + sin(S) * 50, 10, 10);
//print time in text form
fill(255);
noStroke();
textFont('didot');
textSize(15);
translate(-40,30);
text("Hour: " + nfc(H, 0), cxH + 10, 300);
text("Minute: " + nfc(minute(), 0), cxM + 5, 300);
text("Second: " + nfc(second(), 0), cxS, 300);
}
As usual, I learned a lot from coding this project. For me, figuring out the specific angles to set it to the speed of the time was the most challenging part. My first attempt was to make the sticks indicating the time the letters, H, M, and S. However, figuring out the angle of each letter based on the center point of the ellipses were challenging since the letters were not symmetrical. I ended up creating this golden clock to visually represent the hour, minute, and second just like how many digital clocks are these days.
This is my abstract clock. It was challenging to get the fingers to tap and I ended up using a modulus to determine if the number values were even or odd. Pretty proud of myself to be honest. The index finger taps every other second, the middle finger every other minute, and lastly the thumb every other hour.
/* Rachel Lee
Section E
rwlee@andrew.cmu.edu
Project 06: Abstract Clock */
var tx = []; // flower x position array
var ty = []; // flower y position array
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
var sec = second();
var min = minute();
var hr = hour();
// randomize position of flowers
for (i = 0; i < 60; i ++) {
tx[i] = random(85, 270);
ty[i] = random(65, 260);
}
}
function draw() {
background(160, 190, 105);
noStroke();
var sec = second();
var min = minute();
var hr = hour();
// pond
fill(160, 155, 160);
ellipse(180, 170, 305, 305);
// color of pond water changes according to minute time bracket
if (min >= 0 & min <= 20) {
fill(65, 150, 150);
ellipse(180, 170, 270, 270);
} else if (min > 20 & min <= 40) {
fill(65, 130, 180);
ellipse(180, 170, 270, 270);
} else if (min > 40 & min <= 60) {
fill(65, 170, 130);
ellipse(180, 170, 270, 270);
}
// pebbles
fill(145, 140, 145);
ellipse(285, 285, 50, 60);
fill(105, 100, 105);
ellipse(310, 245, 35, 30);
fill(200);
ellipse(270, 285, 35, 30);
fill(150);
ellipse(245, 300, 35, 35);
fill(220);
ellipse(290, 255, 20, 20);
// tiny flowers: corresponds to seconds
for (i = 0; i < sec; i ++) {
fill(235, 105, 45);
ellipse(tx[i], ty[i], 5, 5);
}
// lilypads
fill(100, 140, 55);
ellipse(95, 183, 55, 40);
ellipse(155, 253, 55, 50);
ellipse(205, 100, 70, 60);
fill(125, 160, 60);
ellipse(95, 180, 55, 40);
ellipse(155, 250, 55, 50);
ellipse(205, 95, 70, 60);
fill(65, 150, 150);
// changing little lilypad wedge color according to pond water color
if (min >= 0 & min <= 20) {
fill(65, 150, 150);
triangle(125, 170, 95, 180, 125, 180);
triangle(175, 230, 145, 260, 205, 230);
triangle(215, 90, 240, 70, 245, 90);
} else if (min > 20 & min <= 40) {
fill(65, 130, 180);
triangle(125, 170, 95, 180, 125, 180);
triangle(175, 230, 145, 260, 205, 230);
triangle(215, 90, 240, 70, 245, 90);
} else if (min > 40 & min <= 60) {
fill(65, 170, 130);
triangle(125, 170, 95, 180, 125, 180);
triangle(175, 230, 145, 260, 205, 230);
triangle(215, 90, 240, 70, 245, 90);
}
// firefly: moves according to hour
push();
noStroke();
translate(width / 2.3, height / 2.5);
rotate(360 / 60 * hr);
fill(242);
ellipse(-20, -40, 55, 20);
ellipse(20, -40, 55, 20);
fill(255);
ellipse(-20, -45, 55, 20);
ellipse(20, -45, 55, 20);
stroke(240, 215, 70);
strokeCap(ROUND);
strokeWeight(20);
line(0, 0, 0, -65);
fill(0);
noStroke();
ellipse(-10, -60, 7, 7);
ellipse(10, -60, 7, 7);
pop();
}
I really enjoy being in nature, so for my project wanted to imitate a scene I saw during a hike this summer. On my abstract clock, the dragonfly’s position represents the hour, the color of the pond water changes based on a particular range of minutes, and the number of orange ‘flowers’ represent seconds. This project was a little challenging, but rewarding to complete. I am very happy with how it turned out.
var prevSec;
var millisRolloverTime;
function setup() {
createCanvas(480, 480);
millisRolloverTime = 0;
}
function draw() {
//changes background color to be different from minute color
if (H % 2 == 1) {
background(221, 84, 105)
} else {
background(141, 173, 157)
}
var H = hour();
var M = minute();
var S = second();
text("Hour: " + H, 10, 22);
text("Minute: " + M, 10, 42);
text("Second: " + S, 10, 62);
if (prevSec != S) {
millisRolloverTime = millis();
}
prevSec = S;
var mils = floor(millis() - millisRolloverTime);
//makes minute and second values move smoothly
var fractionSeconds = S + (mils / 1000.0);
var secondsWidth = map(fractionSeconds, 0, 60, -300, 300);
var minutesSmooth = map(M + (fractionSeconds / 60.0), 0, 60, -HALF_PI, PI + HALF_PI);
var fractionHours = H + (minutesSmooth / 60.0)
var hoursSmoothWidth = map(fractionHours, 0, 24, -240, 240);
//minute color changes between green and pink
if (H % 2 == 1) {
//pink minute hand
push();
strokeWeight(2);
fill(221, 84, 105);
arc(width / 2, height / 2, width * 2, width * 2, - HALF_PI, minutesSmooth);
pop();
} else if (H % 2 == 0) {
//green minute hand
push();
strokeWeight(2);
fill(141, 173, 157);
arc(width / 2, height / 2, width * 2, width * 2, - HALF_PI, minutesSmooth);
pop();
}
//seconds circle closes and opens every 60 seconds
push();
stroke(58, 90, 120);
strokeWeight(3);
line(width / 2, height, width / 2, 0);
pop();
push();
fill(141, 173, 157);
strokeWeight(3);
stroke(58, 90, 120);
if (H % 2 == 1) {
fill(141, 173, 157);
ellipse(width / 2, height / 2, secondsWidth, 300);
} else {
fill(221, 84, 105);
ellipse(width / 2, height / 2, secondsWidth, 300);
}
pop();
//hours circle moves across
push();
noStroke();
fill(58, 90, 120);
translate(width / 2, height / 2);
ellipse(hoursSmoothWidth, 0, 50, 50);
pop();
}
For this project I wanted to insert some 3D aspect, which is why I added a rotating circle for the seconds hand. I wanted to make the hour circle move across the screen from side to side but I ran out of time.
function setup() {
createCanvas(400, 400);
fill(0);
}
function draw() {
var H = hour();
var M = minute();
var S = second();
var D = day();
var MO = month();
if (H>6 & H<18){
background(243,234,225);
}
else{
background(38, 53, 38);
}
for(var i = 10; i <= D*10; i += 10){
stroke(227, 168, 34);
line(0, height-i, i, height);
}
for(var a = 10; a <= MO*30; a += 30){
stroke(119, 166, 119);
line(width, height-a, width-a, height);
}
var marginX = 50;
var marginY = 20;
var rectH = 50;
var rectW = 300;
var space = (width-2*marginY-3*50)/2;
var mappedH = map(H, 0, 23, 0, 300);
var mappedM = map(M, 0, 59, 0, 300);
var mappedS = map(S, 0, 59, 0, 300);
if(H>6 & H<18){
fill(243,234,225);
}
else{
fill(38, 53, 38);
}
stroke(227,168,82);
strokeWeight(2);
rectMode(CORNER);
rect(marginX, marginY, rectW, rectH, 20);
stroke(156,111,79);
rect(marginX, marginY+rectH+space, rectW, rectH, 20);
stroke(230, 92, 27);
rect(marginX, marginY+2*rectH+2*space, rectW, rectH, 20);
noStroke();
rectMode(CENTER);
fill(200);
rect(marginX+mappedH, marginY+rectH/2, 30, 30, 10);
rect(marginX+mappedM, marginY+3/2*rectH+space, 30, 30, 10);
rect(marginX+mappedS, marginY+5/2*rectH+2*space, 30, 30, 10);
print(H);
}
The clock is display time(hour, minute, second) as major information and date(day and month) as background. The background color of day and night is different while it shows a bright color during the day and darker color at night for legibility.
var yoff = 0.0 ;
function setup() {
createCanvas(600, 600);
}
function draw() {
background(255, 250, 200);
// Current time
var H = hour();
var M = minute();
var S = second();
// Map time to dimensions
var mappedH = map(H, 0, 23, 0, height); // sun is at the bottom of the canvas at midnight, and moves up as each hour passes and is at the top of the canvas by noon.
var mappedM = map(M, 0, 59, height - 245, 0 - 265); // minutes wave starts at the bottom of the canvas and ends at the top
var mappedS = map(S, 0, 59, height - 265, 0 - 360); // seconds wave starts at the bottom of the canvas and ends at the top
// Sun
fill(255, 215, 0);
noStroke();
ellipse(width / 2, mappedH, 200, 200);
// Minutes
fill(50, 170, 250, 90);
beginShape();
var xoff = 0;
for (var x = 0; x <= width; x += 10) {
// Noise
var y = map(noise(xoff, yoff), 0, 1, 200, 300) + mappedM; // the level of the wave increases horizontally each minute
// Set vertex
vertex(x, y);
// Increase x dimension for noise
xoff += 0.04;
}
// Increase y dimension for noise
yoff += 0.005;
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
// Seconds
fill(50, 190, 150, 90);
beginShape();
var xoff = 0;
for (var x = 0; x <= width; x += 10) {
// Noise
var y = map(noise(xoff, yoff), 0, 1, 200, 400) + mappedS; // the level of the wave increases horizontally each second
// Set vertex
vertex(x, y);
// Increase x dimension for noise
xoff += 0.04;
}
// Increase y dimension for noise
yoff += 0.005;
vertex(width, height);
vertex(0, height);
endShape(CLOSE);
}
For this project I wanted to create something more environmental and fluid in contrast to the constant and rigid nature of time passing. My concept was to have the sun move up or down according to the hour and two different layers of landscape/waves, one indicating seconds and one indicating minutes. I thought perlin noise would be perfect for this, and although it took me a while to understand how to manipulate the variables, I think it came together nicely in the end.
// Sophia S Kim
// Section C 1:30
// sophiaki@andrew.cmu.edu
// Project-06-Abstract Clock
function setup() {
createCanvas(480, 480);
}
function draw() {
//time variables
var H = hour();
var M = minute();
var S = second();
//gets darker by the HOUR
background (233 - (2*H), 237 - (2*H), 255 - (2*H));
// variables for objects
var lemonWidth; //width of lemon
var lemonHeight; //height of lemon
var liquidY = 190; //liquid Y psition
var liquidH = 210; //liquid height
var dropX = []; //water drop X
var dropY = []; //water drop Y
//static table
noStroke();
fill(140, 94, 3);
rect(0, 350, 480, 100); //top of table
noStroke();
fill(102, 69, 2);
rect(0, 450, 480, 30); //side of table
//static beach sand
noStroke();
fill(242, 211, 148);
rect(0, 240, 480, 110);
//beach water
//water gets darker ever hour
noStroke();
fill(62 - (2*H), 214 - (2*H), 255 - (2*H));
ellipse(240, 240, 600, 130);
rect(0, 140, 480, 80);
//lemon
//changes lemon width and height every SECOND
//pattern of not squeezed and squeezed
fill(226, 239, 48);
if((S%2) > 0) {
lemonWidth = 70;
lemonHeight = 70;
}
else {
lemonWidth = 60;
lemonHeight = 40;
}
ellipse(295, 180, lemonWidth, lemonHeight);
//drink glass
noStroke();
fill(161, 235, 255);
rect(185, 180, 110, 220);
ellipse(width/2, 398, 110, 60);
//drink liquid
noStroke();
fill(234, 117, 117);
ellipse(width/2, 398, 100, 50);
rect(190, liquidY + (3*M), 100, liquidH - (3*M));
//allows liquid to decrease every MINUTE
}
I wanted to make an illustration that relaxed the viewers and made them not too anxious about time. The possible settings I was thinking about were beaches, mountains, and waterfalls. I was craving bubble tea this whole week, so I decided to make a drink with a beach view. At the beginning of sketching, I got very excited with my concept. However, overtime, I decided to change the original parts of the abstract clock to something new. At first, I wanted to make water droplets to form on the glass every minute. Instead, I made the liquid level to decrease by every minute. For every hour, I changed the sky color and the ocean water color to become darker. At first, I had a hard time with how the time variables would interact with the shapes and colors. Midway through the process, I started to get the hang of where the time variables can be used in the code. I had a lot of fun with this assignment, because seeing the colors and the liquid height change were very satisfying.
/*
Connor McGaffin
Section C
cmcgaffi@andrew.cmu.edu
Project-06
*/
function setup() {
createCanvas(480, 480);
}
//--------------------------
function draw() {
background(0, 100, 150);
angleMode(DEGREES);
noStroke();
// Fetch the current time
var H = hour();
var M = minute();
var S = second();
// Compute the widths of the rectangles
var mappedH = map(H, 0,23, 0,width);
var mappedM = map(M, 0,59, 0,width);
var mappedS = map(S, 0,59, 0,width / 2);
var rectHeight = height / 3;
var r = 350 //pizza radius
var x = width / 2;
var y = height / 2;
//pepperoni
var pr = 10
//background
//tray
fill(220);
ellipse(x, y, r + 35, r + 35);
fill(195);
ellipse(x, y, r + 20, r + 20);
//grease
strokeWeight(20);
stroke('rgba(120, 90, 0, 0.3)');
noFill();
ellipse(x, y, r - 100, r - 100);
ellipse(x, y, r - 90, r - 90);
strokeWeight(10);
ellipse(x, y, r - 35, r - 35);
ellipse(x, y, r - 180, r - 180);
fill('rgba(110, 100, 0, 0.3)');
ellipse(x, y, 50, 50);
//text
noStroke();
fill(195);
textAlign(CENTER);
text("when the moon hits your eye like a...", 107, 20);
text("...that's amore", width - 45, height - 15);
//HOURS
//cheese
fill(215,205,0);
arc(x, y, r, r, 0, H * (360 / 24));
//slices
for(var i = 0; i < H + 1; i++){
push();
translate(x, y);
rotate(15 * i); // 60 div by 24
stroke(210, 180, 0);
strokeWeight(2);
line(0, 0, r / 2, 0);
pop();
}
//crust
noFill();
strokeWeight(9);
stroke(140,80,0);
arc(x, y, r, r, 0, H * (360 / 24));
//MINUTES
//pepperoni
for(var i = 0; i < M + 1; i++){
push();
translate(x, y);
noStroke();
rotate(6 * i); // 60 div by 24
fill(150,0,0);
ellipse(0, 202, pr, pr);
pop();
}
//SECONDS
//olives
for(var i = 0; i < S + 1; i++){
push();
translate(x, y);
noFill();
strokeWeight(3);
stroke(0);
rotate(6 * i); // 60 div by 24
ellipse(0, 215, pr - 3, pr - 3);
pop();
}
//fill(100);
//rect(0, 1*rectHeight, mappedM, rectHeight);
//fill(150);
//rect(0, 2*rectHeight, mappedS, rectHeight);
/* Uncomment this block in order to
// Display numbers to indicate the time
fill(255);
text(H, 9, 0*rectHeight + 19);
text(M, 9, 1*rectHeight + 19);
text(S, 9, 2*rectHeight + 19);
*/
}
This post was incredibly satisfying to take in once completed. Beginning this project, I wanted to create a clock that operated with additive pizza slices at its core. When I was younger, I hated when my sister ordered olives because even if it was only on a portion of the pizza, it would cause the whole pie to smell like olives while in the box.
With this as a basic framework, I began to generate a pizza pie with a noticeable lack of olives actually on it. Instead, all of the olives are placed beyond its diameter, as they count the seconds. Pepperoni serves as a geometrically similar mediator for minutes, while the pie slices count the hours of the day.
Beneath the pizza is a ring of grease on the tray–a sign of pizza that is as perfectly unhealthy as it should be.
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2020/08/stop-banner.png)
