| 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. |
 |
|
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: 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 Digg recently introduced url shortener. This is not your standard url shortener where the shortener does a 302 forward. Digg shortener displays destination site in a frame. Which means the reader still stays on the Digg. <script type="text/javascript"> if (top !== self) top.location.href = self.location.href; </script> This code in fact doesn’t allow anybody to display your content in their frame. Here is the demo url http://digg.com/u1BSW to check. It should work on all browsers. I like to comment when I read a good post. More than 50% of the blogs that I read are on either wordpress.com or hosted . So I created a simple scriptlet to fill the comment form for ease of commenting.Then I thought it could be useful to others too. So I wrote this small script to create a scriptlet for you. Your Name: Your Email: Your URL: Default Comment or leave blank: I am attending FOSS.IN/2008 virtually through twitter (unfortunately I could not attend due to work pressure). Here is my contribution to the FOSS world as part of FOSS.IN/2008. Go to jFotoNotes project page
|
|
||||||
