Visual Clock – Swetha

 

//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 < 100) {     for (int x = 10; x >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 < 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 <=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>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: