Thejesh GN » Getting started with Processingjs by writing Analog clock

Thejesh GN

A Blog, A Website and A container for all my views with excerpts from technology, life, travel, films, india, photography, kannada, friends and other interests.
I am Thejesh GN and my friends call me Thej..more.

Home /

About /

Tools /

Projects /

Archives /

Wiki /

Library /

PayMe

Oct

Getting started with Processingjs by writing Analog clock

Filed Under (Technology) by Thejesh GN on 29-10-2009

Hi there! I am Thej, If you are new here, you might want to subscribe to the RSS-All feed for all the updates on this blog or RSS - Tech only for tech related posts.

As most of you know, I love JavaScript. Recently I started exploring Processing.js to create some dynamic graphs and animation. I was bowled over by the power of Processing.js.

“Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses JavaScript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.”

The Processing language was originally created by Ben Fry and Casey Reas for Java. In 2008, John Resig ported the 2D context of Processing to JavaScript. It needs Canvas. So make sure you are using HTML5 capable browser like Firefox ¹.

Setup: Download the processing.js. That is the only file you need.

Initialize processing: We need to initialize the processing engine on a canvas. We will have that in the init.js and will include that.

<html>
<head>
<script src="init.js"></script>
<script src="processing.min.js"></script>
<title>Analog Clock using Processing.js</title>
</head>
<body>
<script type="application/processing" target="clock">
//your processing code
</script><canvas id="clock">You need HTML5 canvas support.
Try latest Firefox</canvas>
</body>
</html>

The above code snippet shows the basic setup to run. We need to add our processing code inside

<script type="application/processing">
//your processing code
</script>

The init.js code actually searches for all the script tag type=”application/processing” and applies processing the code on the target canvas. init.js was borrowed from JResig’s code examples.

Logic for the clock:
Circle has 2PI radians. So for each second/minute we have to move 2PI/60 radians. Given the center of the circle (a,b), radius r and angle t radians. we can find any point on the circle, using
x = a+r cos(t);
y = b+r sin(t);
or
x = a + r (1-t²)/(1+t²)
y = b + r (2t)/(1+t²)

I have used the first set of formula. Processing.js supports time and trigonometric functions by default.

But the 0 degrees start at horizontally and I wanted 0^th hour to start at 90 degrees. And hence the subtraction of quarterCicrle which equals = PI/2.

The two main important methods are
void setup() – called initially when canvas gets loaded.
void draw() – called at the rate of frameRate.

You can see I have set frame rate to 1 sec. I guess the rest of the code is self explanatory.

int radius=90;
int a=100;
int b=100;
int nx,ny;

void setup(){
  size(200,200);
  strokeWeight(5);
  //run every second
  frameRate(1);
}
void draw(){

	r = radius;
	background(100);
	ellipse(a,b,2*radius, 2*radius);
	int quarterCicrle=PI/2;

	//second
	int t=((2*PI/60)*second())-quarterCicrle;
	nx = a+r*cos(t);
	ny = b+r*sin(t);
	strokeWeight(2);
	stroke(100);
	line(a,b,nx,ny);

	//minute
	t=((2*PI/60)*minute())-quarterCicrle;
	nx = a+r*cos(t);
	ny = b+r*sin(t);
	strokeWeight(5);
	stroke(100);
	line(a,b,nx,ny);

	//hour
	t=((2*PI/12)*hour())-quarterCicrle;
	nx = a+r*cos(t);
	ny = b+r*sin(t);
	strokeWeight(8);
	stroke(100);
	line(a,b,nx,ny);

}

launch in a separate page
With processingjs graphics in JavaScript has become very easy. This is just an example and processing.js can do much more complex things, Their website has lots of good example. Go explore.

Foot Notes:
1. Browsers like Firefox 3.0 Beta 5, WebKit and Opera 9.5 have canvas support.↩