Original author(s) Development status Active | Developer(s) Processing.js team Written in JavaScript | |
 | ||
Initial release 2008; 9 years ago (2008) Stable release 1.4.8 / March 25, 2014; 3 years ago (2014-03-25) | ||
Processing.js is a JavaScript port of Processing, a programming language designed to write visualizations, images, and interactive content. It allows web browsers to display animations, visual applications, games and other graphical rich content without the need for a Java applet or Flash plugin.
Contents
Processing.js was originally created to allow existing Processing developers and existing code to work unmodified on web. Processing.js uses JavaScript to render 2D and 3D content on the HTML canvas element, and is supported by browsers that have implemented this element (the latest versions of Mozilla Firefox, Opera, Internet Explorer, Safari and Google Chrome).
The development of Processing.js was begun by John Resig and then picked up by students at Seneca College after its initial release in 2008. A team of students finished the port of Processing.js, fixing more than 900 bugs, shipping 12 releases, and creating a vibrant community in the process. The project was done through a partnership between the Mozilla Foundation and Seneca College, led by David Humphrey, Al MacDonald, and Corban Brook. The students continue to maintain the project today.
Versions
The first version of Processing.js released in July 2010.
This version resolved bugs present in prior version.The key events for focusing the mouse are handled with global
keyEvent instructions which execute only when they receive focus. The versions are exclusively for development and production with API option.Processing.org will be launching a series of "alpha" releases as they prepare for 2.0. Alpha means unstable and that function names and APIs will continue to change (mostly in PShape, XML, and other new bits like JSON and Table). It might be a bit like driving a sports car but with the hood removed and one of the tires might occasionally blow out. There will be beta releases. After the alpha releases which restricts the APIs changing, but the bugs might still be around. You'll have a proper set of tires and a hood, but you might still need a coat of paint and a radio.
Changes made in latest release: (2.1)
IDE
The Processing.js code is designed to be used with standalone text editors, or it may be built into an integrated development environment (IDE).
Following are the IDEs which support Processing.js:
iPhone use
There exists an integration of the Processing.js library and a Javascript application framework for iPhone, called iProcessing.
Processing syntax
Processing.js syntax is almost identical to that of the Processing language, in that a setup() function is used to define general visualization properties like canvas size, frame rate and other variables, and a draw() function controls the behavior of each frame in the animation.
The Processing.js library can be included in head section of a web page as a single JavaScript file:
A canvas element is declared inside the body, with a data-processing-sources attribute, specifying the location of an external file holding the Processing code:
Any extension can be used in the external file, for example, the .pde extension used by the Processing language sketch files.
Processing language has two ways of rendering a 2D or 3D in order to understand underlying graphic. It uses Java for 2D, and OpenGL for 3D. This code demonstrates the rendering . The size() function provide choice to choose 2D or 3D. To create a 2D sketch that is 100 by 100 pixels. size(100, 100, P2D);
To draw a 3D sketch OpenGL is used: size(100, 100, OPENGL);
Challenges
color() function with out of range values produces unpredictable resultsThe sample code below shows explicit casting of the integer datatype.