How to use Processing.js to simplify and enhance web apps, information graphics and dynamic user interactions.
Over the past couple months I've set out to learn how to utilize Processing.js for a few specific tasks. As such, I've compiled most of what I've learned into a series of short, concise tutorials. Each entry will be published as it is finalized and will be linked accordingly.
To begin, what is Processing.js? To quote the source, it’s an “open programming language ... [that] ... uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element.” Further, it’s “light-weight, simple to learn and makes an ideal tool for visualizing data[.]”
This series of tutorials will focus on how to utilize the part of Processing.js that is an ideal tool for visualizing data.
Background
Processing.js came out over a year ago. Developed by JavaScript and jQuery genius, John Resig, it is the JavaScript version of the Processing language created by Ben Fry and Casey Reas. The original Processing language was developed from MIT’s Aesthetics and Computation Group and runs on Java.
Significance
For work on the web, its significance lies in two things: simplicity and capability. It’s simple because it’s light-weight, easy to learn and easy to implement. It doesn't require any extra plugins or a long loading time to initiate and integrates well with other native web technologies.
Capability is the second factor because of how far beyond the limits of CSS and HTML it goes. For example, pie charts that are easily created and bar charts that dynamically update based on user input. (Not to mention animation.)
Generally speaking, your capability for rich data visualization grows.
Getting Started
For Processing.js to work you essentially need two things:
- The inclusion and activation of the processing.js file.
- The <canvas> element.
However – of course – it's a bit more complicated than that. First, <canvas> is an HTML 5 specification, which isn’t yet supported in Internet Explorer so a tool called ExplorerCanvas must be used. In short, ExplorerCanvas is JavaScript that enables 2D drawing for the <canvas> element in Internet Explorer.
Note: Having tested IE support more thoroughly it seems as though it is still very problematic; while ExplorerCanvas enables the canvas element for IE, it doesn't necessarily enable Processing.js support. Nevertheless, I have decided to proceed with this series and will continue to post these tutorials without IE support; with the hope that a solution eventually is found.
Secondly, more JavaScript code is needed to properly initiate Processing.js. Take special note of this because leaving it out will cause lots of unnecessary headaches. This code can be found along with the Processing.js source on the download page of processingjs.org.
The HTML Shell
Using the aforementioned items, the base HTML document is shown in Figure 1.1.
- <!DOCTYPE html>
- <html>
- <head>
- <title>Processing.js Examples</title>
- <script type="text/javascript" href="/path/to/processing.js"></script>
- <!--[if IE]>
- <script type="text/javascript" href="/path/to/excanvas.compiled.js"></script>
- <![endif]-->
- <script type="text/javascript" src="/path/to/init.js"></script>
- </head>
- <body>
- <canvas width="300" height="100"></canvas>
- </body>
- </html>
Base document for the Processing.js examples.
Download Sourceprocessing-f1.1.txt
There are three main things to note in this basic HTML document:
- The HTML 5 doctype: <!DOCTYPE html>. (Though it must be said that as far as I know the
<canvas>element does works with XHTML doctypes as well.) - The
<canvas>element; in this example it has been given an arbitrary width
and height. - The three JavaScript files mentioned previously. (Make sure to note the order of the linked JavaScript files as well.)
This concludes the first post which was naturally more introductory in nature. The next entry will delve into the Processing.js basics needed to create simple bar charts.
Finally, I would be remiss if I didn't plug the RSS feed as a way to be notified when new entries in the series are updated.