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.
Read the rest of this entry »
Recently I completed seven years in IT industry. My career started with Siemens and as of now I am working with Infy. Along with Infy and Siemens, my professional life has been greatly influenced by people whom I met at various events, online and open source communities. This is a small note where I want to share what I learnt in this seven years. There are many things to write about, I just wanted to use number seven.
sudoku/cube than solving it manual. Now coming back to the point, use tools at work. Even if it is a very boring manual work. Try to automate it, make it a programming problem. Learn different tools. (I met this guy who was working on excel sheet to make some reports. Now it sounded like a very boring stuff. But actually he could have programmed in vb script to completely automate the reporting. Now it sounds better right?) While learning tools..Learn the mother of all tools: Unix commands. 
