ProcessingJS for easy HTML5 based visualizations

Yesterday I did some testing with ProcessingJS. Processing.js is the sister project designed for the web of the popular Processing visual programming language (open source programming language based on Java). Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest. Processing.js is built using JavaScript and HTML5. Processing.js is really two things: a Processing-to-JavaScript translator; and an implementation of the Processing API written in JavaScript (instead of Java like in original Processing). Processing.js uses HTML5 canvas technology to draw the interactive graphics.

I started with Using Processing on the Web and Processing.js Quick Start – Processing Developer Edition tutorials. They offered a quick start for first experiments. For first tests just needed to download Processingjs library and start writing the code (based on examples) to my own computer hard disk (no server needed) with Notepad++ editor. Double-clicking the HTML page file made my browser (Firefox) to display the page and run the code in it.

I did also some initial testing with sketchpad, which is a open studio for individuals learning to sketch beautiful code on the web canvas. Studio SketchPad was named after the two web technologies on which the application is built: the Sketch from Processing and the Pad from EtherPad.

I recommend you to check out ProcessingJS. Check ProcessingJS hompage for examples what can be done with it. Here is one example from http://mylifeaquatic.herokuapp.com/

Whether you’re an advanced Processing developer or completely new, whether you’re a pro with web technologies or just getting started, Processing.js bridges the gap between these two powerful technologies.