When it comes of data visualization there are plenty of options available like Prefuse,Flash,Java,Lingo,DBN.There is one more options that is worth to be on the list : Processing.Processing allows you to create sophisticated visual & conceptual structures.Processing is based on java with which you can create browser applet & standlaone applications.The best part about processing is, it is free & open source.This article will help novice to get started with processing language.
Obtaining Processing
You can get the processing at free of cost from http://processing.org/download/ page. From the website you can get the installer file for your operating system.If you’ve downloaded under windows platform then all you’ve to do is extract the zip file into folder.There is no installation to do,just run the processing.exe file.
Processing Development Environment (PDE)
When you double click on the processing.exe it will open the PDE IDE for you.This IDE is nothing but text editor,error console,action toolbar in it.When you write the code inside the editor,each line you write or mouse over will get highlighted.Once you write the code inside the text editor you can either run it with Run button or from menu Sketch> Run.If you came across any error then it will be shown & flag under the error console at the bottom.
All the code that you write under the processing editor is called as sketches.These sketches can be either exported as applets or as excutables from menu File> export.Skethces can be saved as .pde or .java extension.As it is based on java you can work arround with multiple files easily in sketches.
Code examples
Here,i’m drawing two circles and saving the file with name shape.pde.This progam uses basic mode of processing language (in short procedural statements).If you wish to dive directly into complex details you can use the continuos mode to design the sketeches.
This program will draw two circles as shown in figure below.
Code explaination
Processing language is much easy to understand & is preety self-explainatory.Size() method sets the size for the sketch window.Background() method fills the background with mentioned color.smooth() method makes sure each curve & line is smooth,so that you don’t see the edges on screen.fill() method is used to color the shape in the sketches.Ellipse() method is used to draw the circle on the sketch.If you want something more then go through the language reference & dig-in for more methods & create something cool on screen.
size(500, 500);
background(#969859);
smooth();
fill(#171416);
ellipse(100, 150, 55, 55);
ellipse(200, 300, 60, 60);
Some points to remember:
- Processing language uses cartesian co-ordinate system,and you put yourself into the fourth quadrant.Keep it mind while you develop sketches.
- Don’t forget to use smooth() method for smooth (anti-aliased) edges.This will slow down the frame rate of the application, but will enhance the visual refinement.
- For coloring purpose you can use hex values in most functions with # sign at the begining.Color picker can come handy in such situations.
- Language reference,Help,library information,FAQ & other noteworthy stuff can be read from the HTML files in the “reference” folder inside the top folder of processing.
- Sketches can be archieved into the zip format & placed in same folder as that of sketches if required.
- For effective developement you can use either use P3D or OpenGL rendering modes.
Processing langauge is based on java so it shares all the advantages of java.It also allows you to create applet or excutable of your sketch.It is cross-platfom,open source & free. Processing language has implementation in the area of visual data representation & conceptual structures.But you can use it in any way you want as long as you can work arround it.
With processing your imaginatiion is the limit.You can create lot of data visualisation stuff.You can even collect data from web & process it to visualize the way you want.You can go though the Exhibition section of the processing website to learn from others.
Here are some of the resources that can help you get started with ideas:
Visual Complexity http://www.visualcomplexity.com/vc/
infosthetics http://infosthetics.com/
Well-formed-data http://well-formed-data.net/
Other than that you can learn from other processing coders from these sites:
http://processinghacks.com/
http://processing.org/discourse/
I hope the information helped. If you have any questions or comments, please don’t hesitate to post them.