10. November 2010

Based on the spiral-formula, I created a purely graphical, somewhat abstract representation of time: The seconds are shown as spiraling white dots connected with lines while the minutes ands hours are represented as sectors (3/4 equals hour 9 or minute 45). The minutes slides towards the center of the spiral. If it finally reaches the middle, 60 seconds have then passed. Using drag and drop per mouse click, one can zoom in and out as well as flip. Having used at the beginning a recursive approach (at each second there is a spiral showing the minutes which shows an hour-spiral) I decided that it was much too overcharged.

/* ----------------------------------------------------------------------------
 *  codingSpace17					
 * ----------------------------------------------------------------------------
 *  graphic / Time
 * ----------------------------------------------------------------------------
 *  prog: eddi.lecesne@zhdk.ch
 *  10.11.2010
 * ----------------------------------------------------------------------------
 */
float x = 0;
float y = 0;
float angle= 0;

PVector     startPos = new PVector();
PVector     endPos = new PVector();
PVector     deltaPos = new PVector();
float  resizeClock = 4.0;

void setup()
{
  size(800, 800);

  //PFont font;  
  //font = loadFont("SybilGreen-48.vlw");
  //textFont(font, 48);
  smooth();
}

void draw()
{
  background(51);
  
  //String  clockStr = str(hour()) + ":" + str(minute()) + ":" + str(second());
  //text(clockStr,20,70);

  pushMatrix();
  translate(width/2,height/2);
  figure(true, second(), resizeClock);
  
  int[] rgbSec = { 
    90, 16, 16
  };
  fadeout(x,y, rgbSec);
  popMatrix();
}

void figure(boolean select, float time, float sizeR) {
  float[] figureArray = new float[2];

  float r = 0;  //radius
  float x_old = 0;
  float y_old = 0;

  for(float theta=0; theta<=time; theta+=1) {  //incement angle
    stroke(255, 255, 255, 255);
    fill(255, 255, 255, 80);
    r=theta*sizeR;  //increase radius
    // Polar to Cartesian conversion
    x = (r * cos(theta));
    y = (r * sin(theta));

    if(select) {  //true 

      ellipse(x, y, 8, 8);
      stroke(255, 255, 255, 40);
      line(x_old,y_old,x,y);
    }
    else {
      point(x,y);
      //line(x_old,y_old,x,y);
    }
    x_old=x;
    y_old=y;
    angle = atan2(y,x);
  }
}
void fadeout(float xF, float yF, int[] a) {

  float v = map(System.currentTimeMillis()%1000, 0, 1000, 0, 32);
  float v2 = map(System.currentTimeMillis()%1000, 0, 1000, 255, 0);
  float v3 = map(System.currentTimeMillis()%1000, 0, 1000, 0, 255);
  stroke(a[0], a[1], a[2], v2);
  fill(a[0], a[1], a[2], v2);
  ellipse(xF, yF, v, v);
  
  fill(a[0]-50, a[1], a[2], v3);
  stroke(a[0]-60, a[1], a[2], v3);
  
  float lineSizeMin = map((System.currentTimeMillis()%1000)*second(),0,59000, 1, 0);
  line(x,y, x*lineSizeMin, y*lineSizeMin);
  float mapMin = map(minute(), 0,59, 0, 2*PI);
  arc(x*lineSizeMin,y*lineSizeMin, 100, 100, -PI/2, mapMin-PI/2);
  
  
  float lineSizeHour = map((System.currentTimeMillis()%1000)*second(),0,59000, 1, 1.5);  
  line(x,y, x*lineSizeHour, y*lineSizeHour);
  float mapHour = map(hour()%12, 0,12, 0, 2*PI);
  arc(x*lineSizeHour,y*lineSizeHour, 50, 50, -PI/2, mapHour-PI/2);
}
void mousePressed()
{
  startPos.set(mouseX,mouseY,0);
}

void mouseDragged()
{
    endPos.set(mouseX,mouseY,0);
  deltaPos.set(endPos.x-startPos.x, endPos.y-startPos.y, 0);
  //resizeClock = sqrt(pow(deltaPos.x,2) + pow(deltaPos.y,2));
  resizeClock = deltaPos.x/10.0 *deltaPos.y/10.0;
  println(resizeClock);
}

void mouseReleased()
{

}

and here some screenshots: