Category: Assignment-05-VisualClock

Adam-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 ClockScreen Shot 2013-09-26 at 12.46.37 PM

Screen Shot 2013-09-26 at 12.46.46 PM

Screen Shot 2013-09-26 at 12.46.51 PM

Screen Shot 2013-09-26 at 12.46.54 PM

Screen Shot 2013-09-26 at 12.46.58 PM

Untitled-003

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

5:00
11:00
1:00

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 &lt; 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();
    }
  }
}
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
class Man {
 
  ArrayList a = new ArrayList();
  PImage closeEyes, eyes, headCloseEyes, headOpenEyes, openEyes;
  PImage[] pimps = new PImage[12];
  PVector lEyePos = new PVector(373, 367), rEyePos = new PVector(436, 367);
  int bobAmp = 3;
  int blinkFrame = 0;
  int numAntennae = 1;
  int eyesX;
 
  Man() {
    loadImages();
    generateAntennae();
  }
 
  void update() {
    blink();
  }
 
  void blink() {
    String binMinutes = Integer.toBinaryString(minute());
    int blinkBracket  = second()/10;
    int numToAdd = 6 - binMinutes.length();
    for (int i = 0; i < numToAdd; i++) {
      binMinutes = "0" + binMinutes;
    }    
 
    if (binMinutes.charAt(second() % 6) == '1' && abs(frameCount - blinkFrame) >= 30) {
      blinkFrame = frameCount;
    }
  }
 
  void drawMe() {
    translate(0, height*.2);
    pushMatrix();
    drawHead();
    popMatrix();
    drawAntennae();
  }
 
  void loadImages() {
 
    for (int i = 0; i < 12; i++) {
      pimps[i] = loadImage((i + 1) + ".png");
    }
 
    closeEyes = loadImage("close-eyes.png");
    eyes = loadImage("eyes.png");
    headCloseEyes = loadImage("head-close-eyes.png");
    headOpenEyes = loadImage("head-open-eyes.png");
    openEyes = loadImage("open-eyes.png");
  }
 
  void generateAntennae() {
    for (int i = 0; i < numAntennae; i++) {
      a.add(new Antennae(new PVector(206, 153), random(2, 3), 10));
    }
  }
 
  void drawHead() {    
    float bobHead = map(frameCount % 200, 0, 199, 0, TWO_PI);
    pushMatrix();
    image(headOpenEyes, 0, 0, width, height);
    pushMatrix();
    float eyeCreep = map(cos(atan2(eyesX+width/2, height/2)), 0, 1, 7, -5);
    translate(eyeCreep, 0);
    image(eyes, 0, 0, width, height);
    popMatrix();
    image(openEyes, 0, 0, width, height);
    if (frameCount == blinkFrame || 
      (mousePressed && mouseX > width * .35 && mouseX < width * .682)) {
      image(headCloseEyes, 0, 0, width, height);
      image(closeEyes, 0, 0, width, height);
    }    
    int hour = ((hour()+1) > 12) ? hour() - 12 : hour();
    for (int i = 0; i < hour; i++) {
      image(pimps[i], 0, 0, width, height);
    }
    popMatrix();
  }
 
  void drawAntennae() {
    for (int i = 0; i < numAntennae; i++) {
      Antennae _a = (Antennae) a.get(i);
      pushMatrix();
      _a.update();
      _a.draw();
      popMatrix();
      eyesX = int(map(_a.rot, 0, .19, 0, width));
    }
  }
}

Visual Clock – Swetha

 

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
//using/ moifying example template of a clock from processing.org
 
int cx, cy;
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;
boolean night = false;
int hour = hour();
int min = minute() - 1;
float color1 = 0.0;
float color2 = 0.0;
float color3 = 0.0;
int countHour=0;
/* @pjs preload= "happy.jpg"; */
PImage img;
float tintvalue = map(hour() + norm(second(), 0, 60), 0, 60, 0, 255);
 
void setup() {
  img = loadImage("happy.jpg");
  size(640, 360);
  stroke(255);
 
  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  minutesRadius = radius * 0.60;
  hoursRadius = radius * 0.50;
  clockDiameter = radius * 1.8;
 
  cx = width / 2;
  cy = height / 2;
}
 
void draw() {
 
  makeBackground(); //draws the background and controls the tinting og the days
 
  //draws ferris wheel and controls the cars moving, changing color, and so on
  drawFerrisWheel();
 
/*
  if (tintvalue &lt; 100) {     for (int x = 10; x &gt;10; x-=1) {
      float y = random(0, height);
      stroke(255, 255, 51, 70);
      vertex(x*20, y);
      strokeWeight(3);
      stroke(255, 255, 51);
      vertex(x*20, y);
    }
  }
*/
 
  //draws the dots on the ferris wheel that shows the minutes
  drawTicks(cx, cy);
 
  endShape();
}
 
void makeBackground() {
  tintvalue = map(hour() + norm(second(), 0, 60), 0, 12, 0, 255);
  if (hour()!= hour) {
    hour = hour();
    countHour = hour;
    if( countHour == 12);
        night = !night;
        tintvalue = 0;
  }
 
  if ( night == true) {
    tint(255 - tintvalue);
  }
  else {
    tint(tintvalue);
  }
  image(img, 0, 0);
  image(img, 0, 0, width, height);
}
 
void drawTicks(int cx, int cy) {
  strokeWeight(8);
  beginShape(POINTS);
  int currentMin = minute();
  int color1 = 0;
  int color2 = 0;
  for (int a = 0; a &lt; 360; a+=6) {
    float angle = radians(a);
    float x = cx + cos(angle- HALF_PI) * secondsRadius;
    float y = cy + sin(angle- HALF_PI) * secondsRadius;
    if (currentMin &lt;=0) {       color1 = 255;       color2 = 51;     }     else {       color1 = currentMin*4;       color2 = currentMin*4;     }     stroke(255, color1, color2, 70);     vertex(x, y);     strokeWeight(3);     stroke(255, color1, color2);     vertex(x, y);     currentMin-=1;   } } void drawFerrisWheel() {   noFill();   strokeWeight(10);   stroke(255);   ellipse(cx, cy, clockDiameter, clockDiameter);   strokeWeight(5);   ellipse(cx, cy, clockDiameter/3, clockDiameter/3);   float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;   int maxNCars =6;   float Spacing = TWO_PI / maxNCars;   for (int numOfCars = maxNCars; numOfCars&gt;0; numOfCars -= 1) {
    if (min != minute()) {
      color1 = random(0, 255);
      color2 = random(0, 255);
      color3 = random(0, 255);
      min = minute();
    }
    float px = cx + cos(s + numOfCars*Spacing) * secondsRadius;
    float py = cy + sin(s + numOfCars*Spacing) * secondsRadius;
    stroke(0);
    strokeWeight(2);
    line(cx, cy, px, py);
    stroke(color1, color2, color3);
    strokeWeight(50);
    point(px, py);
    strokeWeight(20);
    stroke(100, 150, 240);
    point(px, py);
 
    stroke(200, 50, 50);
    line(cx, cy, 100, height);
    line(cx, cy, width-100, height);
    strokeWeight(50);
    point(cx, cy);
  }
}

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:

bandicam 2013-09-24 14-16-48-763

bandicam 2013-09-24 14-25-49-200

bandicam 2013-09-24 14-25-58-301

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:

whiteness

 

After a few min of waiting:

pretty

 

Open Processing Link: http://www.openprocessing.org/sketch/112116

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&lt; 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&lt; 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 &lt; 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 &lt; 100) &amp;&amp;(h &gt; 1)) {
      whiteness += 5;
    }
    else {
      whiteness = 0;
    }
  }
 
  if (m != prevMin) {
    if ((jSize &lt; 100) &amp;&amp; (m &gt; 1)) {
      jSize += 1.5*5;
    }
  }
  else {
    jSize = 10;
  }
 
  for (int i = 0;i&lt; 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 &gt; height) {
      y = 0;
    }
 
    if (y &lt; 0) {       y = height;     }     if (x &gt; width) {
      x = 0;
    }
 
    if (x &lt; 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 &lt; 0) {       speed = -speed;        int index = int(random(0, jcolor.length));       col = jcolor[index];     }     if (x &gt; width) {
      speed = -speed; 
      int index = int(random(0, jcolor.length));
      col = jcolor[index];
    }
 
    if (y &lt; 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 &gt;= 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 &lt; 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 &gt; 0) {
      size -= 0.2;
    }
  }
}

Ralph-Assignment-05-VisualClock

Screen Shot 2013-09-26 at 1.44.45 PMThe 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
253

Sample screenshot of instance at 7:20
720

Sample screenshot of instance at 12:28
1228

Sample screenshot of instance at 19:40
1940

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

clock1 clock2 clock3

“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)
 photo FinalClockScreen1002_zpsf6f88f8f.jpg

2:50:12 (am and pm)
 photo FinalClockScreen250_zps9119edf5.jpg

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<starpositions .length;arrayCount+=2)
  {
   starPositions[arrayCount]=o;
   starPositions[arrayCount+1]=height/2;
   o+=20;
   p+=20;
  }
 
 
  //Color calculations
  int red=0;
  int green=0;
  int blue=0;
  int r=0;
  int g=0;
  int b=0;
 
  float yoff = 0.0; // Start xoff at 0
  float detail = .6;
  noiseDetail(8, detail);
 
  red=100;
  green=100;
  blue=100;
  int redDif =(int) map( sin(minute), -1,1,  0,200);
  int grnDif = 10;
  int bluDif = (int) map( sin(minute), -1,1,  0,220);
  int redLo = red-redDif/2;
  int redHi = red+redDif/2;
  int grnLo = green-grnDif/2;
  int grnHi = green+grnDif/2;
  int bluLo = blue-bluDif/2;
  int bluHi = blue+bluDif/2;
 
 
  // For every x,y coordinate in a 2D space, calculate a noise value and produce a brightness value
  for (int y = 0; y < height; y++) {
    yoff += increment;   // Increment xoff
    float xoff = 0.0;//xStart;   // For every xoff, start yoff at 0
    int row = y*width;
    for (int x = 0; x < width; x++) {
      xoff += increment; // Increment yoff
 
      // Calculate noise and scale by 255
      float bright = noise(xoff, yoff);
      //set to a color, not a gray
 
 
      r = redLo + (int)(redDif*bright);
      g = grnLo + (int)(grnDif*bright);
      b = bluLo + (int)(bluDif*bright);
 
      color newColor = (r << 16) + (g << 8) + b;
 
      pixels[row+x] = newColor;
    }
  }
 
  updatePixels();
 
  noStroke();
 
  for(int star=0;star<second;star+=2)
  {
    fill(255,200);
    ellipse(starPositions[star],starPositions[star+1],10,10);
 
  }
  }

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: