var circlecenter = 0;
function setup() {
createCanvas(480, 480);
}
function draw() {
// variables for time, hour, minute, second
var h = hour();
var m = minute();
var s = second();
// variables for color mapping
var colorR = map(h, 0, 23, 0, 255);
var colorG = map(m, 0, 59, 0, 255);
var colorB = map(s, 0, 59, 0, 255);
// variables for lighter color mapping
var lightcolorR = map(h, 0,23, 180, 255);
var lightcolorG = map (m, 0, 59, 180, 255);
var lightcolorB = map (s, 0, 59, 180, 255);
// time keeping seconds
var exactSecond = (h*60)+(m*60)+s;
// background to change color as day progresses
background(colorR, colorG, colorB);
// interlapping pattern of circles that change color with the time
for (var y = 0; y < height+50; y += width/2) {
for (var x = 0; x < width+50; x += width/3) {
fill(255-colorG,255-colorB, 255-colorR,30);
ellipse(x, y, width/2, width/2);
noStroke();
}
}
// tiny little dots
for (var y = 0; y < height+10; y += 2) {
for (var x = 0; x < width+50; x += 2) {
fill(lightcolorR,lightcolorG,lightcolorB);
ellipse(x, y, 1, 1);
noStroke();
}
}
// mapping for exact second along the x axis
var secondMapX = (exactSecond, 0, 86400, 0, width);
// mapping for exact second along the y axis
var secondMapY = (exactSecond, 0, 86400, 0, height);
// circle for current second
ellipse(secondMapX,secondMapY,2,2);
fill(255, 255, 255);
}
I wanted to create a clock that emphasized how time is a fluid progression of movement, difficult to conceptualize at times. I decided to do this through a slow gradient of color, that shifts with the time. I wanted to create something that would emphasis both the fluidity of time, as well as how it can be broken into the tiniest of chucks. I did this through overlaying the smallest of dots on top of the work.
Ideally, I would like to make a clock that was rooted to the moon cycles of Lithuania, where my family is from. I think it would be interesting to show how our ancestry, what we adopt from those before us roots us especially in the way it affects our unconscious and when we sleep. I had some trouble figuring out how to embed API data into processing, but I would love to learn this sometime.
/* Charmaine Qiu
charmaiq@andrew.cmu.edu
section E
project 06, Abstract Clock */
function setup() {
createCanvas(300, 300);
}
function draw() {
background(255,200,200);
// Fetch the current time
var H = hour();
var M = minute();
var S = second();
//variables that fits the time into certain coundaries
var poolW = map(M, 0, 59, 70, width);
var eyesH = map(H, 0, 23, 30, 1);
noStroke();
//creating the elements of the girl that does not change over time
//body
fill(252, 73, 3);
ellipse(width / 2, height, 130, 200);
//face
fill(255, 238, 227);
ellipse(width / 2 - 40, height / 2 + 20, 30, 30);
ellipse(width / 2 + 40, height / 2 + 20, 30, 30);
ellipse(width / 2, height / 2, 100, 120);
angleMode(DEGREES);
//hair
fill(245, 108, 66);
arc(width / 2, height / 2, 110, 140, -180, 360);
ellipse(100, 90, 50, 50);
ellipse(200, 90, 50, 50);
//mouth
arc(width / 2, height / 2 + 50, 40, 50, -180, 360);
//table
fill(201, 150, 113);
rect(0, 250, width, 70);
//HANGRY
fill(255, 238, 227);
//("HANGRY", width / 2 - 23, 140);
text("When is my FOOD coming?", width / 2 - 70, 40);
//when it is midnight, "HANGRY" appears on the head
if (H == 59){
text("HANGRY", width / 2 - 23, 140);
}
//drooling drops that falls down every second
push();
translate(160, 200);
m = floor(millis()) % 1000;
m = map(m, 0, 1000, 0, 200);
fill(147, 206, 237);
ellipse(0, m, 7, 7 + m * 7 / 200);
pop();
//the pool gets gets larger as a minute goes by
fill(147, 206, 237);
ellipse(width / 2, height, poolW, 50);
//the eyes becomes smaller as hours in a day pass by
fill(80);
ellipse(width / 2 - 20, height / 2 + 15, 10, eyesH);
ellipse(width / 2 + 20, height / 2 + 15, 10, eyesH);
}
This project is very interesting since I was able to design and compute a graphic that evolves around time. I took the idea of creating a literal clock further by creating a narrative to my work.
I have always wanted to try living without knowing what the time is. How can I make a clock that doesn’t tell me the time? The way I started brainstorming for this was quite simple. Time would be represented through a greyscale spectrum. I wanted to go as abstract and clean as possible, which was at first, just three squares.
First iteration: three squares.
Through this, I wanted to represent time in color, simply by changing the shade of the squares every second minute and hour.
I liked this solution because it was as clean, modern, and abstract as possible. You can’t actually know what second it is in any way; it is only dictated by a spectrum.
I began to further develop this solution by adding the factor of length so that the rectangle grows as time passes.
Finally, I added the concept of “time is a social construct”. “Time is” is always there in black, but the answer changes as time passes. In the beginning of the hour and minute, the shades of the second and minute are the darkest, and as time passes, they fade away. Inversely, the answer “a social construct” becomes darker as time passes.
//alcai@andrew.cmu.edu
//project6 abstract clock
//section E week 6
function setup(){
createCanvas(500,500);
}
function draw() {
strokeWeight(0);
background('white');
//variables for time
var s = second();
var m = minute();
var h = hour();
//second rectangle grows per second and gets lighter, at 60 seconds it is white
fill(255/60 * s);
rect(width/4, height/2 - 50, 40,40 + 3 * s);
//minute rectangle grows per minute and gets lighter at the pace of the second rectangle
fill(255/60 * s);
rect(width/2, height/2 - 50, 40, 40 + 3 * m);
//hour rectangle grows per hour and gets lighter at the pace of the minute rectangle
fill(255/60 * m);
rect(width/4 * 3, height/2 - 50,40,40 + 3 *h);
//time is... is always black, but "a social construct" gets darker by the second, inverse to the actual time rectangles.
textSize(32);
fill(0);
text('TIME IS...', width/4, height/2 - 100);
fill(255 - 255 / 60 * s);
text('A SOCIAL CONSTRUCT', width/4, height/2 - 75);
}
//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project - 06 - Abstract Clock
function setup() {
createCanvas(480, 480);
}
function draw() {
background(5, 0, 50); //background color
fill(50); //color of buildings
noStroke();
rect(10, 350, 120, 150);
rect(30, 280, 30, 150);
rect(80, 260, 60, 220);
rect(80, 240, 20, 20);
rect(360, 380, 110, 130);
rect(385, 300, 60, 220);
rect(405, 220, 20, 220); // buildings in background
fill(238, 232, 37);
ellipse(400, 60, 70, 70); //moon
fill(218, 214, 85);
ellipse(300, 50, 5, 5);
ellipse(270, 74, 5, 5);
ellipse(130, 50, 5, 5);
ellipse(20, 80, 5, 5);
ellipse(360, 100, 5, 5);
ellipse(70, 160, 5, 5);
ellipse(230, 140, 5, 5);
ellipse(443, 170, 5, 5); //stars
var H = hour();
var M = minute();
var S = second();
var buildingH = map(H, 23, 0, 280, 0);
var buildingM = map(M, 59, 0, 280, 0);
var buildingS = map(S, 59, 0, 280, 0);
var change = 150/3;
fill(230);
rect(155, 200, change, buildingH);
fill(230);
rect(175+change, 200, change, buildingM);
fill(250);
rect(195+2*change, 200, change, buildingS); //ticking building that represents time, referenced code given in the instructions
}
I thought a lot about how I can represent time without making the clock too literal. I personally think the hardest part about this project was to think of how I can represent my clock than actually creating it. As I was thinking about what to create late at night, I looked outside the window and saw buildings across from my dorm. This struck me hard as I realized how much time I spend working at night. Every time I work at night, I tend to look outside the window once in awhile because I get tired as time passes by. I feel like I’m more aware of ‘time’ during the night than the day, which is why I decided to create a visual of a night cityscape I see outside the window and use the tall buildings as an indicator of time (building is forming as time goes).
The lime represents the hour, and a slice is eaten every hour. The watermelon represents the minute, and a slice is taken every minute. Similarly, the orange represents the seconds and a slice is taken every second. The fruit resets every minute/hour/day.
This was a very fun project to do, both in drawing the actual fruits and figuring out how to take a slice from each every second/minute/hour. It was interesting to learn about the time functions and how to creatively implement them into the project. Finally, I was really happy with the way it turned out.
//Jai Sawkar
//Section C
//jsawkar@andrew.cmu.edu
//Project 06: Abstract Clock
var prevSec;
var millisRolloverTime;
function setup() {
createCanvas(300, 480);
millisRolloverTime = 0;
}
function draw() {
background('BLACK');
// Current time
var H = hour();
var M = minute();
var S = second();
var D = day();
var M = month();
var SecondColor = 100
var Flicker = 255
// Current millisecond if the second has rolled over
if (prevSec != S) {
millisRolloverTime = millis();
}
prevSec = S;
var mils = floor(millis() - millisRolloverTime);
var hourBarYPosition = map(H, 0, 23, 0, height); //mapped to fit y postion of hours
var minuteBarYPosition = map(M, 0, 59, 0, width); //mapped to fit y postion of minutes
var secondBarWidth = map(S, 0, 59, 30, width); //mapped to fit width postion of seconds
var secondsWithFraction = S + (mils / 1000.0); //creates fraction to interpolate smooth transition
var secondBarWidthSmooth = map(secondsWithFraction, 0, 60, 6.5, width/2 - 6.5); //mapping seconds to allow them to fit within desired bounds
var dayXPosition = map(D, 0, 31, 7, width - 7) //mapped to fit x postion of days
var monthXPosition = map(M, 0, 12, 7, width - 7) //mapped to fit x postion of month
fill(126, 168, 130, 200)
rect(dayXPosition, 7, 5, 15); //represents day
rect(monthXPosition, 7, 5, height - 14) //represents month
rectMode(CENTER)
noStroke();
fill('#a87f7e');
rect(width/2, hourBarYPosition,width - 13, 20); //represents hour
rectMode(CORNER)
if (S > 58) { // once the two second bars come together, it turns white to signal one minute
SecondColor = 255
}
push() //reverses the canvas for the second rectangle to mirror it on canvas
rotate(PI)
fill(SecondColor)
rect(-width + 6.5, -minuteBarYPosition, secondBarWidthSmooth, -10); //represents seconds on right
pop()
fill(SecondColor)
rect(6.5, minuteBarYPosition, secondBarWidthSmooth, 10) //represents seconds on left
if (S % 2 != 0){ //if it is not odd numbered second, it will turn off
Flicker = 0
}
fill(Flicker)
rect(2, height - 7, width - 4, 5) //represents second flashes
rect(width-7, 2, 5, height - 4)
}
I was trying to decide what to make my abstract clock about, and I read into Rietveld Shroder; his designs included a lot of different proportioned rectangles. I decided to use this as inspiration. For this project, I wanted to use rectangles to create a succession of movements, creating a dynamic, truly abstract clock
/*
* Angela Lee
* Section E
* ahl2@andrew.cmu.edu
* Project 6 Abstract Clock
*/
function setup() {
createCanvas(400, 400);
}
function draw() {
// background
var top = color(249, 237, 201); // pale yellow color
var bottom = color(237, 165, 117); // peach color
setGradient(top, bottom); // background gradient
// time
var hours = hour();
var minutes = minute();
var seconds = second();
var milli = millis();
// halo changes color with milliseconds
halo(milli);
// the shadow grows longer with hours
setting(hours);
// the drink color changes with minutes
behindGls(minutes);
// the foam bubbles move with milliseconds
foam(milli);
// the drink color changes with minutes
frontGls(minutes);
// the straw moves with the seconds
straw(seconds);
}
// BACKGROUND GRADIENT
function setGradient(color1, color2) {
for(var a = 0; a <= height; a++) {
var amount = map(a, 0, height, 0, 1);
var back = lerpColor(color1, color2, amount);
stroke(back);
line(0, a, width, a);
}
}
// ----------BELOW THIS LINE ARE PIECES OF THE DRAWING -----------
// HALO AROUND LATTE
function halo(milli) {
big = 300; // big circle size
med = 245; // medium circle size
small = 185; // small circle size
x = width/2 // x position
y = height/2 - 30; // y position
r = 15 * sin(milli / 1000.0);
g = 15 * sin(milli / 1000.0 + HALF_PI);
b = 30 * sin(milli / 1000.0 - HALF_PI);
stroke("white");
strokeWeight(1);
fill(249 + r, 240 + g, 155 + b);
ellipse(x, y, big, big);
strokeWeight(2);
fill(250 + r, 237 + g, 130 + b);
ellipse(x, y, med, med);
strokeWeight(3);
fill(252 + r, 240 + g, 84 + b);
ellipse(x, y, small, small);
}
// TABLE, SHADOW
function setting(hours) {
// table
noStroke();
fill(133, 88, 51);
rect(0, 2/3 * height, width, height/3);
// shadow
fill(112, 67, 34);
shadowW = map(hours, 0, 24, 160, 240);
ellipse(240, 321, shadowW, 65);
}
// FIRST LAYERS OF LATTE
function behindGls(minutes) {
// glass
glsX = 119.799; // glass x-coordinate
glsY = 148.193; // glass y-coordinate
glsW = 160.403; // glass width
glsH = 169.456; // glass height
glsEllipseH = 50.513; // glass ellipse height
fill(231, 239, 242);
rect(glsX, glsY, glsW, glsH);
ellipse(glsX + glsW / 2, glsY + glsH, glsW, glsEllipseH);
// drink
var clrChange = map(minutes, 0, 60, 0, 40);
Green = color(197 - clrChange, 201 - clrChange, 125 - clrChange);
drnkX = 128.906; // drink x-coordinate
drnkY = 148.193; // drink y-coordinate
drnkW = 142.071; // drink width
drnkH = 165.456; // drink height
drnkEllipseY = 313.65; // bottom of glass ellipse y-coordinate
drnkEllipseH = 40.477; // bottom of glass ellipse height
fill(Green);
rect(drnkX, drnkY, drnkW, drnkH);
ellipse(drnkX + drnkW / 2, drnkEllipseY,
drnkW, drnkEllipseH);
}
// FRONT LAYERS OF LATTE
function frontGls(minutes) {
clrChange = map(minutes, 0, 60, 0, 50);
// TOP GLASS ELLIPSE
fill(231, 239, 242);
ellipse(glsX + glsW / 2, glsY, glsW, glsEllipseH);
// GREEN TOP ELLIPSE
fill(166 - clrChange, 180 - clrChange, 76 - clrChange);
ellipse(glsX + glsW / 2, glsY, drnkW, drnkEllipseH);
}
// FOAM
function foam(milli) {
foamH = 41.592;
// body of the foam
fill(246, 249, 220);
rect(drnkX, drnkY, drnkW, foamH);
ellipse(drnkX + drnkW/2, drnkY + foamH, drnkW, drnkEllipseH);
ellipse(164.455, 203.479, 34.55, 25.72);
ellipse(206.343, 210.407, 62.807, 26.791);
ellipse(239.538, 202.514, 34.55, 25.72);
// big bubbles
fill(197, 201, 125);
bigBbl = 5; // size of big bubbles
bigBblX = [143, 163, 180, 216, 219, 245, 253]; // big bubble x values
bigBblY = [174, 195, 194, 208, 190, 200, 183]; // big bubble y values
change = sin(map(milli, 0, 60, 0, 1));
// the big bubbles move left and right depending on milliseconds
for (var i = 0; i < bigBblX.length; i++) {
ellipse(bigBblX[i] + change, bigBblY[i] + change, bigBbl, bigBbl);
}
// small bubbles
fill(216, 216, 160);
smlBbl = 5; // size of big bubbles
smlBblX = [156, 170, 212, 239, 245]; // small bubble x values
smlBblY = [203, 181, 194, 203, 177]; // small ubble y values
// the small bubbles move left and right depending on milliseconds
for (var i = 0; i < smlBblX.length; i++) {
ellipse(smlBblX[i] - change, smlBblY[i] - change, smlBbl, smlBbl);
}
}
// STRAW
function straw(seconds) {
strX = map(seconds, 0, 60, 141, 218.587); // straw x-coordinate
strY = 210.407; // straw y-coordinate
strW = 12.49; // straw width
strH = 94.115; // straw height
strEllipseH = 4.065; // ellipse straw height
fill("white");
rect(strX, strY - 150, strW, strH);
ellipse(strX + strW/2, strY - 150 + strH, strW, strEllipseH);
ellipse(strX + strW/2, strY - 150, strW, strEllipseH);
// shadow within the straw
fill(232, 232, 232);
ellipse(strX + strW/2, strY - 150, strW - 2, strEllipseH - 1);
}
As I was sitting down to plan out my abstract clock, I was craving a matcha latte so I decided to make that the main visual of my clock. I wanted to create a piece that represented time in a more abstract manner, so I decided to make parts of my matcha latte move or change in accordance to different time variables. To plan out my piece, I first sketched out my matcha latte.
As I began to code the composition, I realized that I wanted more contrast between the latte and the background. So, I added a couple of halo-like ellipses to establish a focal point around the latte.
/*
Hyejo Seo
SectionA
hyejos@andrew.cmu.edu
Project-06-Abstract Clock
*/
var balloonW;
function setup() {
createCanvas(400, 400);
}
function draw() {
var secs = second();
var mins = minute();
var hr = hour();
var balloonY = 250;
// mapping
var secsM = map(secs, 0, 59, 0, 150);
var minsM = map(mins, 0, 59, 0, 220);
var hrM = map(hr, 0, 23, 10, 100);
background(234, 239, 211);
// balloon pump
fill(0);
rect(345, 170, 10, 70);
quad(330, 240, 370, 240, 360, 300, 340, 300);
quad(343, 300, 358, 300, 354, 350, 347, 350);
fill(47, 41, 99);
noStroke();
rect(320, 20 + secs, 60, 150);
// pipe
fill(147, 181, 198);
rect(347, 350, 7, 30);
rect(100, 373, 250, 7);
rect(93, 350, 7, 30);
ellipse(335 - minsM, 376, 40, 20); // circle representing the air movement
//Balloon
balloonW = 90;
fill('#CEEC97');
stroke(0);
strokeWeight(2);
rect(92, balloonY + 70, 10, 28);
ellipse(97, balloonY + 98, 10, 5);
ellipse(95, balloonY, balloonW + hrM/2, 150); // increases size by the hour
// showing the hour on the balloon
fill(0);
noStroke();
textSize(50);
textFont('Avenir');
text(int(hr), 68, balloonY + 15);
}
sketching my idea for this project
It took me awhile to think of something fun to represent time. I focused on the increasing factor of time, which led me to think of a balloon inflating. I decided to control the movement of the balloon pumper with seconds, and the air bubble moving through the wire with minutes. Then, the balloon inflates every hour.
// Yoshi Torralva
// yrt@andrew.cmu.edu
// Section E
// Project-06-Abstract Clock
function setup() {
createCanvas(480, 480);
}
function draw() {
background(255, 188, 0);
var H = hour();
var M = minute();
var S = second();
noStroke();
//grass
fill(0, 104, 47);
rect(0,405,480, 75);
// tree
fill(107, 38, 0);
rect(376,50, 63, 300);
fill(5, 73, 39);
ellipse(410, 50, 300, 300);
//Sun for Hour
fill(255, 211, 26);
ellipse(125, 200, 200, 200);
fill(249, 206, 0);
ellipse(125, 200, H * 5, H * 5);
// plants
fill(5, 73, 39);
rect(0,260,480, 145);
//fence backing
fill(173, 66, 11);
rect(0, 280, 480, 20);
rect(0, 350, 480, 20);
//horizon line grass
fill(7, 63, 31);
rect(0,400,480, 10);
//fence for loop
for(var i = 0; i < 59; i++) {
fill(173, 66, 11);
rect(i * 8.2, 250, 7, 155);
ellipse(i * 8.2 + 3.4, 250, 7, 7);
}
//filled in fence for variable M
for(var i = 0; i < M; i++) {
fill(137, 42, 0);
rect(i * 8.2, 250, 7, 155);
ellipse(i * 8.2 + 3.4, 250, 7, 7);
}
//calling dog into canvas
dachshund(S * 1, 0);
//clock in the tree
fill(0, 104, 47);
textSize(32);
text(H, 300, 40);
text(M, 320, 120);
text(S, 390, 150);
}
//dog
function dachshund (x, y) {
push();
translate(x, y);
//tail
strokeWeight(5);
stroke(5);
line(46, 360, 20, 385);
noStroke();
fill(255);
//body
rect(50, 357, 80, 32);
//back
ellipse(50, 373, 32, 32);
//chest
ellipse(130, 373, 32, 32);
//back leg
rect(34, 370, 13, 35);
//front leg
rect(120, 370, 10, 35);
//paws
ellipse(130, 402, 6, 6);
ellipse(47, 402, 6, 6);
//black fur front chest
fill(0);
arc(130, 373, 32, 32, 3 * PI / 2, PI/2, CHORD);
//ear
fill(73, 33, 7);
rect(130, 340, 16, 30);
ellipse(138,370, 16, 16);
//head
fill(0);
quad(145, 340, 180, 350, 175, 365, 145, 370);
//eyes
fill(255);
ellipse(155,350,6, 6);
fill(0);
ellipse(156,349, 4, 4);
//spots
fill(0);
arc(100, 357, 40, 40, 2 * PI, PI, CHORD);
arc(70, 389, 30, 30, PI, 2 * PI, CHORD);
ellipse(48,370, 15, 15);
pop();
}
Initial Sketch
With this project, I wanted to create an abstract clock set in a scene with my dog. Planning was important before I could start making this scene with p5.js as I would need to know what shapes I would use to create my dog. In the sketch, I illustrate the shapes I will have to create. In my editor, I made my dog a function I could call to free up space in the function draw(). In terms of inserting time-based motion, the dog moves by seconds, the fence changes color to minutes, and the sun increases in size to hours. I used a loop to replicate the base fence and another for the minutes’ fence to fill in.
//Sammie Kim
//Section D
//sammiek@andrew.cmu.edu
//Project 06 - Abstract Clock
function setup(){
createCanvas(400,600);
}
function draw(){
background(0);
//variables for time
var s = second();
var m = minute();
var hr = hour();
//Shining stars and black night background
for (var i = 0; i < 100; i ++) {
frameRate(2);
fill(225);
var eSize = random(1, 5);
var x = random(0, width);
var y = random(0, height);
ellipse(x, y, eSize, eSize);
}
//Mapping time to shape components
var secIncrease = map(s, 0,59, 0, height);
var minIncrease = map(m,0, 59, 50, height/2);
var hrIncrease = map(hr, 0, 23, 100, height * 3/4);
//Every minute, the blue sky background will decrease, slowly revealing the space
fill(102, 153, 255);
rect(0, 0, width, height - minIncrease);
//Rocket flies upwards every second
fill(78, 78, 252);
triangle(225, 525 - secIncrease, 190, 570 - secIncrease, 260, 570 -secIncrease);
fill(252, 84, 78)
rect(190, 570 - secIncrease, 70, 100);
stroke(0);
strokeWeight(10);
fill(255);
ellipse(225, 600 - secIncrease, 30, 30);
noStroke();
fill(252, 153, 78);
triangle(190, 670 - secIncrease, 225, 730 - secIncrease, 260, 670 - secIncrease);
fill(170, 110, 196);
triangle(190, 670 - secIncrease, 190, 710 - secIncrease, 230, 670 - secIncrease);
//Pink circle is the sun, which is changing color every hour
//The sun also goes down every hour
noStroke();
fill(hrIncrease, 180, 220);
ellipse(100, hrIncrease, 60, 60);
}
This project was challenging as I had to analyze how to incorporate the time concept into my canvas, letting each element pace by a specific rate of time. I imagined a rocket flying up by each second, and the sky slowly disappearing along as the rocket goes further up. The sun would also go down at the same time by every hour. With this, I got to review the map function once more, as I got to think about the range that is needed to limit the movement of the rocket. Also it took some time figuring out how to move the rocket in second increments up, which I eventually did by subtracting “secIncrease,” since the coordinates get smaller as it gets nearer to the top.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
