Category: Assignment-05-VisualClock

I set out to design a generative clock that gives you subtle sense of time as it passes.
My clock draws itself over a 5 minute period using noise. At the end of each 5 minutes a new clock face is started.

I think that visually the clock works well, the clock faces are definitely aesthetically pleasing.
Things to work on –
Indicating how many 5 minute blocks have passed. I had the idea that as a 5minute block is completed, it would be added to a wall of all of the past 5 minute blocks.
As Golan spoke about – experimenting with how the clock face “ends” would have a huge impact. Instead of it just fading, perhaps the lines unravel off-screen. I love this idea!

Generative Clock

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 float x, y, oldX, oldY; float xNoise, yNoise; float xOffSet, yOffSet;     void setup( ) { smooth(); background(255); size( 600, 600 ); stroke( 0, 16); strokeWeight( 1 );     xNoise = random( width ); yNoise = random( height ); xOffSet = 0.001; yOffSet = 0.001; }   void draw( ) { drawNoisePoint( ); int s = second(); // Values from 0 - 59   println(s);   for (int i = 20; i < s-20; i = i+5) { for (int j = 20; j < 600-20; j = j+5) { // point(i, j); x = noise( xNoise ) * width ; y = noise( yNoise ) * height; point( i+x, y ); xNoise = xNoise + xOffSet; yNoise = yNoise + yOffSet; } } } void drawNoisePoint( ) { }
 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 float y = 1;   void setup( ) { smooth(); size( 750, 750 ); background(255);   noFill(); stroke( 0, 16); strokeWeight( 1 ); frameRate(10); }       void draw( ) {   int s = second(); // Values from 0 - 59   float x = s % 12; println(x); point ( width/12 * x, height/12*y );   for (int i = width/12; i < width - width/12; i = i+width/12*int(x)) { for (int j = height/12; j < height - height/12; j = j+height/12) { // ellipse(i, j, 55, 55); line(i +random(-25, 25), j + random(-25,25),i +random(-25, 25), j + random(-25,-25)); } }   }

Petunia

A recent obsession of mine – having read “The Coming Technological Singularity” by Vinge Vernor in my writing course –  is the notion of humans playing machine roles. What would a person look like as a vacuum cleaner? Toaster? Clock? Petunia the Clockman has a biological affinity with time, as represented by seconds, hours, and minutes. That is, the boils on his forehead correspond to the current number of hours, and the movement of the flower on his head to the number of seconds in the current minute. He blinks the current number of minutes in binary every six seconds (one second per bit). Golan pointed out that the blinking aspect of the clock has nothing to do with the boil aspect – a criticism I agree with. So an improved version of the clock might rely on just one display mechanism instead of three working in tandem. Or it might dispose of the 12-hour clock altogether. That said, I’m pleased with the way in which Petunia’s eyes follow the flower on his head.

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Man man; PImage ball;   void setup() { size(400, 400); man = new Man(); ball = loadImage("ball.png"); smooth(); }   void draw() { background(224,255,228); tint(254,219,255); man.update(); man.drawMe(); }   void mousePressed() { saveFrame(); }
 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 class Antennae { PVector pos; PImage antennae; PImage petunia; float rot, initRot; int scaleDown = 2; int num;   Antennae(PVector _pos, float _rot, int _num) { pos = _pos; initRot = _rot; num = _num; antennae = loadImage("antennae.png"); petunia = loadImage("petunia.png"); }   void update() { float theta = map(millis()%60000,0,59999, 0, TWO_PI); rot = map(sin(theta), -1, 1, -.19, .19); }   void draw() { translate(pos.x, pos.y - (antennae.height/(scaleDown*2))); rotate(initRot); for (int i = 0; i < num; i++) { image(antennae, 0, 0, 1.3*(antennae.width/scaleDown), antennae.height/(scaleDown*2)); translate(0, .8 * (antennae.height/(scaleDown*2))); rotate(rot); pushMatrix(); rotate(millis()/5000.0); if(i == num-1) { image(petunia,-petunia.width/2,-petunia.height/2); } popMatrix(); } } }

Visual Clock – Swetha

In this assignment, I was trying to make a ‘scene’ that was something like a landscape painting but at the same time had the graphic feel of the computer or was reminiscent of pixilated art. The thought of a scene that is impacted, perhaps only in subtle ways, by the things around it, is interesting to me since it is in reflects with a kind of peacefulness or harmony that comes from appreciating the humdrum quality of life . As time progresses in this program, so too does the scene; days turn from light to dark in an hour, minutes change the car colors on the Ferris wheel, and seconds keep the Ferris wheel moving. I like the simplicity I have achieved with this program since it does achieve a certain quality of every day peacefulness. There is also a quality of unpredictability in this program, which is the changing of the car colors. Although it is a small change, I feel that it is just the right amount of ‘surprise’ to correspond with the changing environment of the piece.
In order to read this clock, you can see that the seconds in the clock are controlling the Ferris wheel, when one car makes a whole round, a minute has passed. Each minute passing is also recorded on the lights around the Ferris wheel that will slowly turn from yellow into gradients of red. When all 60 lights are red, then an hour will have passed. It is tricky judge the hour in this program mostly because the hour is represented as it is in real life; the changing from day to night is the indication of hour, only in the program day to night is measured in a single hour, making this a 2 hour clock. The brighter it is, the closer to midday the program is, and the darker it is the closer it is to nighttime.

Here’s some images to help illustrate what goes on with the hours:

Deep Sea – Maryyann Landlord

My idea was derived from  the deep underwater scenery one would often see on discovery channel. I wanted to originally create a dark open ocean with only a few light up microorganisms as the keys to second, min, and hourly changes. However, I realized that having more visualizations in the water made the clock composition more interesting.

I wanted to use the bubbles traveling up as a backdrop wallpaper for the other moving objects in the piece do give the piece a little more depth. I think that I was able to simulate an underwater feeling quite smoothly. I would like to have used more animation with pngs and I think I could have made the flashing. One thing I really liked, which was simple, yet cute, was the ripple on the top of the water that would blink, when the organism hit the top of the screen. I also realized that because of the way I layered my backgrounds, the longer you wait for them to build up, the “deeper” the ocean would seem.

Deep Sea Breakdown: The yellow flashing organism , which move around slightly, represent the seconds. The color changing round organism that bounces around the screen changes it’s size slightly. Every hour, the screen is covered by a thin layer of white, which eventually when it becomes difficult to see the ocean clearly, is lifted once again. This process takes place in the course of one day.

After one Day:

After a few min of waiting:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 PImage rocky; PImage blur; int whiteness; int prevSecond, prevMin, prevHour; color[] bcolor = { #063260, #13587F, #021931, #24455C , #689EA1 };   int frames; int colr;   //Blight Blight myBlights[]; float bx, by; int blightCount;   //jelly Jelly myJelly; float jx, jy;   // bubbles Wave waveArray[]; int waveCount; int jSize;   void setup() { size(600, 1000); background(#00131C); frameRate(10); whiteness = 0;   rocky = loadImage("rocky.png"); blur = loadImage("blur.png");   waveCount = 20; waveArray = new Wave[waveCount]; for (int i = 0;i< waveCount; i++ ) { float size = random(7, 20); waveArray[i] = new Wave(20 + i* 30, height, size); }   jx = random(10, width-10); jy = random(10, height-10); jSize = 10; myJelly = new Jelly(jx, jy, jSize);   blightCount = 50; myBlights = new Blight[blightCount]; for (int i = 0;i< blightCount; i++ ) { float bSize = random(2, 7); bx = random(10, width-10); by = random(10, height-10); myBlights[i] = new Blight(bx, by, bSize); } }   void draw() { int s = second(); int m = minute(); int h = hour();   for (int i = 0; i < waveCount; i++ ) { waveArray[i].make(); waveArray[i].update(); }   myJelly.render(); myJelly.update(jSize);   if (frames % 60 == 0) { int index = int(random(0, bcolor.length)); colr = bcolor[index]; }   drawParticles();   noStroke(); fill(colr, 40); rect(0, 0, width, height); fill(255,255,255,whiteness); rect(0,0,width,height);   tint(255, 30); image(blur, 0, 0); tint(100, 50); image(rocky, 0, 0);   if (h != prevHour) { if ((whiteness < 100) &&(h > 1)) { whiteness += 5; } else { whiteness = 0; } }   if (m != prevMin) { if ((jSize < 100) && (m > 1)) { jSize += 1.5*5; } } else { jSize = 10; }   for (int i = 0;i< blightCount; i++ ) { if (s != prevSecond) { myBlights[i].render(); myBlights[i].update(); } } prevSecond = s; prevMin = m; prevHour = h; frames ++; } void drawParticles() { noStroke(); fill(#D8F2F9, 50); ellipse(random(0, width), random(0, height), 5, 5); fill(#D1F2BA, 50); ellipse(random(0, width), random(0, height), 10, 10); fill(#FF4D6A, 50); ellipse(random(0, width), random(0, height), 7, 7); } class Blight { float x; float y; int angle; float size; float speed; color[] blcolor = { #EBBA57, #D28B44 }; int col; Blight(float bx, float by, float s) { x = bx; y = by; size = s; angle = 0; } void render() { int index = int(random(0, blcolor.length)); col = blcolor[index]; fill(col, 80); ellipse(x, y, size, size); ellipse(x, y+2, size, size); } void update() { speed = random(-20, 20); x += speed * sin(angle); y += speed; angle += random(2, 10); if (y > height) { y = 0; }   if (y < 0) { y = height; } if (x > width) { x = 0; }   if (x < 0) { x = width; } } }   class Jelly { float x; float y; float size; float speed; color [] jcolor = { #DDBBD9, #E8CBC0, #DAA3DC, #DCF297, #9BF6FD, #C6BDEA }; int col; float angle;   Jelly(float px, float py, float s) { x = px; y = py; size = s; speed = random(15, 45); col = #DAA3DC; }   void render() { stroke(col); strokeWeight(1); noFill(); ellipse(x, y, size, size); strokeWeight(1); ellipse(x, y, size/2, size/2); strokeWeight(1); ellipse(x, y, size/4, size/4); }   void update(int jSize) { size = jSize; x += speed * cos(angle*0.0003); y += speed; angle += random(1, 5);   if (x < 0) { speed = -speed; int index = int(random(0, jcolor.length)); col = jcolor[index]; } if (x > width) { speed = -speed; int index = int(random(0, jcolor.length)); col = jcolor[index]; }   if (y < 0) { speed = -speed; int index = int(random(0, jcolor.length)); col = jcolor[index]; float rx = x; float ry = y + 12; ellipse(rx, ry, 20, 8); ellipse(rx, ry, 100, 8); ellipse(rx, ry, 200, 8); } if (y >= height) { speed = -speed; int index = int(random(0, jcolor.length)); col = jcolor[index]; } } }   class Wave { //makes bubbles that travel up int x; int y; float speed; int angle; float size;   Wave(int xpos, int ypos, float s) { x = xpos; y = ypos; speed = random(25, 45); angle = 0; size = s; }   void make() { noFill(); stroke(#BBEFF1, 70); strokeWeight(1); if (y < random(0, height/2)) { y = height; size = random(7, 20); } ellipse(x, y, size, size); } void update() { x += speed * cos(angle); y -= speed; angle += random(10, 20); if (size > 0) { size -= 0.2; } } }

Ralph-Assignment-05-VisualClock

The concept behind this clock is the feeling of nostalgia and existential angst one experiences when faced with the immensity of time. My inspiration for this was the novel “One Hundred Years of Solitude” by Gabriel Garcia Marquez, which is written in such a way (with detailed accounts of trivial, but poetic moments) that the reader feels as if he/she has known the town and its characters for a hundred years by the end of the novel, and a great sense of loss and the fleeting nature of human life is invoked within the reader. I wanted to try to recreate this sense of awe by visually representing a clock which measures a century with fractals of clocks that represent each small moment of that century. The clock begins from my own birthday, with the circle in the middle representing one century, the circles revolving it representing one year, and so on. The clock is pretty sizable, but I would have preferred to make a much larger image, with units of time being incremented more gradually (years to decades to centuries, rather than just years to centuries) so as to evoke an immense sense of scale. However, the limits of processing power and resolution size prohibited me from this.

This piece is very slow in Javascript, so I will post a link to it rather than breaking people’s computer by embedding it here.
http://www.openprocessing.org/sketch/112083

Flower Clock

Starting from midnight, the flower gains a petal every hour until noon, then lose a petal every hour until midnight. Color of the flower change every minute.
I originally sorta envisioned it as a phone app with semi-interactive environment. But alas… that would take too long.
Also… not exactly a novel graphic concept. And spent too long “pixel-perfecting” the visual cutesy-ness. Again, happy with the outcome, but wish I could have done something more creative.

Sample screenshot of instance at 2:53

Sample screenshot of instance at 7:20

Sample screenshot of instance at 12:28

Sample screenshot of instance at 19:40

MINIMALIST CLOCK

I went for a more minimal approach with this assignment. The hours and minutes are displayed in binary, with only the necessary bits available for view (ones are filled rectangles, zeroes are blank). The triangles in the background progressively divide, with the amount of seconds represented as the number of triangles in a given row or column. I was really enamored with the idea of neatly subdividing objects as a clock, and thought the execution of the minute and hour representations worked well. Unfortunately, the triangles tended to leave extra space between the right and lower sides of the sketch and the last triangles. Other than that, I’m super pleased with the color scheme.

Balls and Legs

“Everyone you know someday will die” – The Flaming Lips

No matter how strong a relationship or how durable a material is, the passage of time will erode it. The blobs and the legs fall down as each minute passes, each trying to bounce or twitch its way back up top, but it will never achieve its old position ever again. We too can struggle against the flow of time, but we cannot win.

I like the organic feel of the blob, but I feel like it could be more irregular to look even weirder. I also wanted the legs to represent something, such as the hours, but since my clock resets every 12 hours, 12 legs is not enough. They also look weird without being attached to a ball so I just attached them randomly to balls.

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 int square_width = 15; Ball[] balls; Leg[] legs; int past_second = -1; PImage leg_img;   class Ball{ int x, y, diameter, stop_point; float speed, acceleration; int dx, dy, dd;   Ball(int a, int b, int d) { x = a; y = b; diameter = d; speed = 0.0; acceleration = 0.0; stop_point = (int)random(-30, 30); dx = (int)random(-3,3); dy = (int)random(-3,3);   // delta diameter dd = (int)random(5,15); if(random(-1,1) < 0.0) dd *= -1.0; }   /** * drops the ball */ void drop() { acceleration = 0.9; }   void draw_ball() { // make the ball fall if(y < height - 40 + stop_point || (speed < 0.0)) { y += speed; speed += acceleration; } else if(abs(speed) > 3.5) speed *= -0.4;   float percent = (millis() % 1000.0)/1000.0; if(percent > 0.5) percent = 1.0 - percent;   stroke(200, 50 + diameter); fill(20, 50 + diameter); ellipse(x+percent*dx, y+percent*dy, diameter+percent*dd, diameter+percent*dd); } }   class Leg{ float direction; float theta, leg_scale, dtheta; Ball ball;   Leg(Ball ba) { ball = ba; leg_scale = random(0.8, 1.2); theta = random(-0.5, 0.5);   direction = 1.0; if(random(-1,1) < 0.0) direction *= -1; }   void draw_leg() { pushMatrix();   float percent = (millis() % 1000.0)/1000.0; if(percent > 0.5) percent = 1.0 - percent;   translate(ball.x, ball.y);   if(ball.x > width/2) scale(-leg_scale,leg_scale); else scale(leg_scale,leg_scale);   if(0.0 < ball.speed && ball.speed < 0.1) percent = 1.0 + 0.03*percent;   float on_ground = 0.0; float speed = 1.0; if(ball.acceleration != 0.0) { on_ground = 0.006*ball.y; speed = ball.speed; }   rotate(theta+percent*0.09*(direction*speed)+on_ground);   image(leg_img, 0, 0);   popMatrix(); } }   void setup() { size(600, 600); randomSeed(15251); initialize_balls(); leg_img = loadImage("leg.png"); initialize_legs(); set_to_current_time();   }   /** * initializes the clock to current time */ void set_to_current_time() { int minute_passed = 60*hour() + minute(); for(int i = 0; i < minute_passed; i++) { int r = (int)random(0,720); Ball random_ball = balls[r];   // select a ball that hasnt already fallen while(random_ball.speed != 0.0) { r = (int)random(0,720); random_ball = balls[r]; }   random_ball.drop(); } }   /** * allocate the ball objects */ void initialize_balls(){ balls = new Ball[720]; int i = 0; while(i < balls.length) { int x = 0; int y = 20; while((x < width/2 && y > 2*x/3 + random(-10,10)) || (x > width/2 && y > 2*(width - x)/3 + random(-10,10)) ) { x = (int)random(20, width-20); y = (int)random(5, height/3); }   int s = (int)random(20, 50);   balls[i] = new Ball(x, y, s); i++; } }   /** * allocate the leg objects */ void initialize_legs() { legs = new Leg[20]; for(int i = 0; i < legs.length; i++) { Ball b = balls[(int)random(0,720)]; while(!(b.x < 200 || b.x > 300)) b = balls[(int)random(0,720)];   legs[i] = new Leg(b); }   }   /** * draw the gradient for the background */ void draw_background(){   for(int i = 0; i < height; i++) { stroke(100-i/7, 50-i/12, 70-i/10); line(0, i, width, i); } }   void draw() { draw_background();   // resets the clock every 12 hours if(hour() % 12 == 0 && minute() % 60 == 0 && millis() % 1000.0 < 100.0) { initialize_balls(); initialize_legs(); }   // selects random ball to drop every minute if(second() == 0 && past_second != second()) { int r = (int)random(0,720); Ball random_ball = balls[r];   // select a ball that hasnt already fallen while(random_ball.speed != 0.0) { r = (int)random(0,720); random_ball = balls[r]; } random_ball.drop(); } past_second = second();   // draw the balls for(int i = 0; i < balls.length; i++) { Ball b = balls[i]; b.draw_ball(); }   // draw the legs for(int i = 0; i < legs.length; i++) { Leg l = legs[i]; l.draw_leg(); } }

Empty Space Clock

My clock visually juxtaposes clean circles against a heavy noise background with tumultuous shades of purple and green haze. Hours change the noise fuzziness, minutes change the color, and seconds are indicated by circles traveling across the width of the frame two per second. I landed on two per second after fiddling with different speeds, sizes, colors, and shapes and finding the spacing, transparency and speed of the second-circles to be the most visually pleasing. The color and noise shifts occur subtly, focusing more attention on the current moment rather than the grand scheme of time. This notion has become increasingly more important to me over the last few weeks, and it drove me to make the clock more of an empty, cosmological space beyond understanding.

10:02:52 (am and pm)

2:50:12 (am and pm)

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 /*Rachel Moeller EMS2 Clock Hours change the noise level. Minutes change the color. Seconds draw stars. */ float increment = 0.006;     void setup() { size(600, 200); }   void draw() {   loadPixels();   //time variables int hour=hour(); int minute=minute(); int second=second();   //change by the hour increment=map(sin(hour),-1,1,0.006,.01);   int p=0; //array of star positions int o=10; int r1=(int)random(o*-1,o); int[] starPositions= new int[120]; //populate array for (int arrayCount=0;arrayCount

epileptic clock

Here’s the link to the program. I won’t embed it since the already existing embeds are causing unwanted lag on the site… For the most fluid animation, check the clock when your minutes are between 0 and 30. Otherwise there will be wacky framerate on web browsers.

I wanted to make an unstable rippling clock that would bear similarities with uncertain waters. Kind of like a nervous clock that would remind you every time time passes by as we slowly die by the second, minute, hour, etc. Most people check the clock obsessively so here’s to making you even more nervous. Or calmed, I don’t really know what my clock would do to other people; I know I can’t look at the clock for a prolonged period of time. I also have a thing for hidden messages, so I had to put in a mousePressed action somewhere, sorry. And jokey texts at intervals. Maryyann’s GIF project inspired the colors and circular movements, so thanks Mann. I think I achieved the fluidity of time well and succeeded at the transience of the visuals. There are some buggy elements though whenever I ran it, like the visuals always appearing at the origin (which is the reason for the frame), and a lot of lag on web browsers. I believe this lag is due to my inefficient code of using 2D arrays and many for-loops for excessive operations. Maybe I should’ve made a class. Oh well, it runs fine on my computer…

Here’s how the clock works at various time intervals: