Animated Wall Clock using Processing Programming Language

Hello friends! Meanwhile I was learning “Processing” programming language and was trying out my hands on some cool experiments. In this post, I want to share with you the processing code which I wrote for an animated wall clock.

By the way, Processing is an open source programming language initiated by Ben Fry and Casey Reas at Massachusetts Institute of Technology (MIT) during 2001. You can learn more about this platform at their official Website. If you are unknown to processing environment, then do visit their site and learn this language. Processing is cool to learn.

In my processing code for animating a wall clock, I have made good enough use of axes translation translate() and rotation rotate()  feature of processing. In my computer, the clock rotations are in sync with the correct timing, only when I use 6 frames per second speed. This frame rate may vary depending on your system configuration.

Animated Wall Clock programmed using processing


My code for the wall clock is given below:


/*
PROCESSING PROJECT
 ANIMATED WALL CLOCK
 PROGRAMMED BY: AMIT BISWAL
 URL: http://amitbiswal.blogspot.com
 */
float rad, deg=0;
int clkDia=500;
int resol=clkDia/10;
void setup()
{
  size(600, 600);
}
void draw()
{
  frameRate(6); //FRAME RATE = 6 FRAME PER SECOND
  rad=(deg*PI)/180.0;
  background(24, 215, 234);
  clockFrame();  

  hourHand(rad/720);
  minuteHand(rad/60);
  secondHand(rad);
  strokeWeight(10);
  stroke(0);
  point(0, 0);
  strokeWeight(1);
  deg+=1;
}

void clockFrame()
{
  float j=0;
  int k=1;
  translate(width/2, height/2);
  fill(136, 9, 175);
  stroke(136, 9, 175);
  for (j=0;j<(2*PI);j+=(PI/60))
  {
    pushMatrix();
    rotate(j);
    ellipse(0, -(clkDia/2)-15, 15, 30);
    popMatrix();
  }
  stroke(0);
  fill(22, 222, 37);
  ellipse(0, 0, clkDia+40, clkDia+40);
  fill(218, 222, 22);
  ellipse(0, 0, clkDia, clkDia);
  fill(247, 208, 157);
  ellipse(0, 0, clkDia-40, clkDia-40);
  textSize(20);
  strokeWeight(2);
  fill(0);

  for (j=PI/6;j<(2*PI);j+=(PI/6))
  {
    pushMatrix();
    rotate(j);
    strokeWeight(1);
    text(k++, -7, -(clkDia/2)-5);
    line(0, 0, 0, -clkDia/2);
    stroke(247, 208, 157);
    strokeWeight(4);
    line(0, 0, 0, -((clkDia/2)-20));
    stroke(0);
    popMatrix();
  }
  k=0;
  for (j=0;j<(2*PI);j+=(PI/30))
  {
    pushMatrix();
    rotate(j);
    if ((k++%5)==0)
    {
      stroke(245, 41, 5);
      strokeWeight(5);
    }
    else
    {
      stroke(0);
      strokeWeight(2);
    }
    point(0, -(clkDia/2)+25);
    popMatrix();
  }

  strokeWeight(1);
}
void hourHand(float angle)
{
  pushMatrix();
  rotate(angle);
  stroke(0);
  fill(48, 160, 11);
  quad(0, 0, clkDia/2-120, -10, clkDia/2-100, 0, clkDia/2-120, 10);
  popMatrix();
  fill(247, 208, 157);
}
void minuteHand(float angle)
{
  pushMatrix();
  rotate(angle);
  stroke(0);
  fill(30, 7, 170);
  quad(0, 0, -10, -20, 0, -(clkDia/2-50), 10, -20);
  fill(247, 208, 157);

  popMatrix();
}
void secondHand(float angle)
{
  pushMatrix();
  rotate(angle);
  strokeWeight(2);
  stroke(234, 52, 24);
  line(0, 40, 0, -(clkDia/2-25));
  ellipse(0, 40, 10, 10);
  popMatrix();
}
If you have any suggestions or query, then do comment below and let me know.

1 comment:

  1. Anonymous10/20/2016

    Hello. I have one suggestion:
    Processing has three neat little functions, hour(), minute(), and second(), which return the exact hour, minute, and second respectively that your computer clock displays. I think this clock would be more useful if it implemented these, rather than the somewhat unreliable framerate of a computer.

    ReplyDelete

If you liked this blog then Join me at:
Facebook
Twitter