Thejesh GN » Javascript

Getting started with Processingjs by writing Analog clock

Thejesh GN — Thu, 29 Oct 2009 10:50:54 +0000

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.





Analog Clock using Processing.js

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

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.↩

How to kill that Digg Bar Frame

Thejesh GN — Sat, 04 Apr 2009 11:58:13 +0000

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.

Most of the modern web analytics software will be able to record this visit, but it will problem in finding out the actual referrer. Also standard traffic counters like alexa don’t count this visit against your site.
So if you don’t like to that DiggBar to be displayed on your blog. You can add this one line code to your site. Add it to your webpage’s head section.

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.
Let me know if you have any other suggestions.

Scriptlet for Easy Commenting on WordPress Blogs

Thejesh GN — Tue, 20 Jan 2009 07:48:58 +0000

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.
Fill up the name, email and url you use while commenting. You can even have some default comment if you want. Make sure not to use single or double quotes. As of now the JS code breaks. Try to manage with out quotes : )
Once you have entered the details click “Generate Scriptlet”. If everything goes OK then the link below the button becomes “Fill Comment”. Pull it to your links bar. Now that should make your commenting easy on any wordpress blog. Send in your comments.

Your Name:

Your Email:

Your URL:

Default Comment or leave blank:

Not yet

My code contribution during foss.in/2008 jFotoNotes

Thejesh GN — Wed, 26 Nov 2008 12:00:40 +0000

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

jFotoNotes is java implementation of famous FotoNotes in php. A variation of FotoNotes is also used by flickr. Fotonotes is a standard, specification, and collection of scripts for annotating images. In jFotoNotes I have used the same JavaScript libraries but I have completely rewritten the server side components in Java.

What does “Google Chrome” mean to developers

Thejesh GN — Tue, 02 Sep 2008 06:01:22 +0000

Yet another browser to code for? I guess it will obey ECMA-262 rev3 so don’t worry too much about incompatibilities as of now. Lets see the positive side

Its an open source, you get to participate and allows you to write plug-ins
Each tab is a separate process.so the effect of one tab is not seen in another tab.
Within each tab you have separate thread for JavaScript. So your JavaScript execution will be fast.
JavaScript now runs inside a virtual machine called V8. The JavaScript is compiled to machine code before running. Now that’s an advantage for heavy JavaScript applications like Gmail. Where most of the JS resides on client side and simply gets the JSON from server to show the data. You don’t have to re-interpret the JS every time. Compile once and keep running again and again. Your apps will be super fast now. Now GWT developers don’t have worry about JS performance.
Rendering is by webkit which is again open source.
Looks like they have better garbage collection algorithm for garbage collection. Which will again makes my work simple.
Gears is part of browser now. Your offline apps will have better performance now. Think -> Gears API is loaded as soon as browser is loaded, JavaScript is compiled to m/c code, runs in separate process and thread. What more you want? Your offline application might be as fast as any native application if not faster.

Anything else you want to add.

For UrbanDictionary Fans

Thejesh GN — Fri, 08 Aug 2008 09:28:16 +0000

Here is the scriplet which you can use to lookup a word on urbandictionary. To use pull the scriptlet onto your URL bar. If you select a word on the page and click the scriptlet takes you the word defnition directly or it will prompt for the word to lookup.

Urban Dict lookup scriptlet

Conversation with Alessandro – CTO of Lightstreamer

Thejesh GN — Tue, 27 May 2008 10:40:28 +0000

On the fourth day of Developer Summit myself and Veetrag spent some time with Alessandro CTO of Lightstreamer. We talked about comet architecture and its application in various fields. Comment is sometimes referred as reverse AJAX and is a set of technologies used to push the live data from server to http clients.

Lightstreamer is a scalable and reliable Server for pushing live data to Rich Internet Applications. Its based on AJAX-Comet paradigm and pushes the live data to http/flex clients. A free version of Lightstreamer is available for download and can be used evaluation.

Chat with Greg Murray on Jmaki, ajax, comet etc

Thejesh GN — Fri, 23 May 2008 04:32:02 +0000

Myself and Veetrag caught up with Greg Murray sipping his coffee at Developers Summit. As usual we started talking and in between I realized, we could as well record it. Hence the start is abrupt and volume is low.
Greg Murray is an AJAX architect at Sun. He is known for his contributions to OpenAJAX Alliance and Dojo. He is the architect of Project jMaki. jMaki uses the best parts of Java and the best parts of JavaScript to deliver rich AJAX style widgets through a singe, easy-to-use interface that accesses components from popular widget libraries such as Dojo, Script.aculo.us, Yahoo’s UI Library, Spry, DHTML Goodies, and Google’s Web Toolkit.