What is and Why Processing.js?

What is Processing?
The Processing language was originally created at MIT as part of the Media lab and Aesthetics and Computation group. They needed a way to bridge the gap between software developers, artists, data visualizers, etc., and to do so in a way that allowed new programmers (or non-programmers) to do complex visual work easily. Processing was built using Java, and can be thought of as a simplified Java, with a simplified Java API for drawing and graphics.

What does Processing bring to the web?
Processing has a large and vibrant community, who are good at creating 2D and 3D graphics, visualizing data sets, audio, video, etc. With HTML5 the web gained canvas, audio, and video–things which had previously only been available via plugins like Flash or Java. At the same time, advances in JavaScript engines have made it possible to do things in script that were previously too slow.

By porting the Processing language to the web, both the Processing and web communities benefit. For Processing, this means that code which used to only work on the desktop now “just works” in the browser. For the web, this means that a new but mature and full-featured approach to graphics programming becomes available. The < canvas > element is too low-level for most developers to use directly–JavaScript libraries are necessary. Processing.js can be thought of as just such a library, simplifying the use of the 2D and 3D canvas operations.

How much work is it to learn Processing?
The Processing language was designed to be small but complete, and easy to learn. This document does not attempt to teach you Processing, and you are encouraged to seek out Processing specific tutorials, books, and examples. Any Processing code or concepts should map to Processing.js (the exceptions are listed below). You can also use pure JavaScript to work with the Processing drawing API, skipping the Java syntax of Processing in favour of JavaScript.

Ways to Use Processing.js
Processing.js was originally created in order to allow existing Processing developers and existing Processing code (often referred to as sketches) to work unmodified on the web. As a result, the recommend way to use Processing.js is to write Processing code, and have Processing.js convert it to JavaScript before running it.

Over time, many web developers have begun using Processing.js, and asked that we design a way for the API to be used separate from the Processing language itself. Therefore, we have provided a way for JavaScript developers to write pure JavaScript code and still use the Processing.js functions and objects. NOTE: Processing.js is first and foremost a port of Processing to the open web, with design decisions favouring compatibility with Processing. It was not designed as a general purpose HTML drawing library. Having said that, it can be used as a high-level drawing API for canvas.

Below we discuss the various methods for using Processing.js in your web pages.

Writing Pure Processing Code
This is the preferred method for using Processing.js, and has been dealt with at length in the Processing.js for Processing Devs quick start guide. To summarize:

Download Processing.js from here

Leave a Reply