Getting started with Processingjs by writing Analog clock
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 1.
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-t2)/(1+t2)
y = b + r (2t)/(1+t2)
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 0th 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.↩
Hey,
Great demo! Good explanation too!
Neat! Reminds me of one of my first projects where we did wonderful things in js.. ummm.. feeling nostalgic :)
ok.gotta try soon..but i hate JS..
Cool.
So, with JQuery, it could do magic! lemme check it out.
btw, Chrome supports Canvas too. I’m using Chrome and i’m able to see the demo clock. :)
Sweet. I love JS :)
@Veera : I guess chrome uses webkit.