JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
Processing is an open source programming language and integrated development environment built for the electronic arts and visual design communities with the purpose of teaching the basics of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks...
, 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
Java applet
A Java applet is an applet delivered to users in the form of Java bytecode. Java applets can run in a Web browser using a Java Virtual Machine , or in Sun's AppletViewer, a stand-alone tool for testing applets...
or Flash plugin.
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
Opera (web browser)
Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...
Windows Internet Explorer 9 is the current version of the Internet Explorer web browser from Microsoft. It was released to the public on March 14, 2011 at 21:00 PDT. Internet Explorer 9 supports several CSS 3 properties, embedded ICC v2 or v4 color profiles support via Windows Color System, and...
Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...
Google Chrome is a web browser developed by Google that uses the WebKit layout engine. It was first released as a beta version for Microsoft Windows on September 2, 2008, and the public stable release was on December 11, 2008. The name is derived from the graphical user interface frame, or...
).
The development of Processing.js was picked-up by students at Seneca College
Seneca College
Seneca College of Applied Arts and Technology is a Canadian public college in the greater Toronto area. Seneca College is currently Canada's largest college with approximately 108,000 students.-History:...
after its initial release on 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
Mozilla Foundation
The Mozilla Foundation is a non-profit organization that exists to support and provide leadership for the open source Mozilla project. The organization sets the policies that govern development, operates key infrastructure and controls trademarks and other intellectual property...
Seneca College of Applied Arts and Technology is a Canadian public college in the greater Toronto area. Seneca College is currently Canada's largest college with approximately 108,000 students.-History:...
, led by David Humphrey, Al MacDonald, and Corban Brook. The students continue to maintain the project today.
Use
The Processing.js syntax is almost identical to that of the Processing language, a setup function is used to define general visualization properties like canvas size, frame rate and other variables, and the draw function controls the behavior of each frame in the animation.
The Processing.js library can be included in the 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.
/* example.pde */
// The statements in the setup function
// execute once when the program begins
void setup
{
size(200, 200); // Sets the canvas size to 200 by 200 pixels
stroke(255); // Set line drawing color to monochrome white
frameRate(30); // Set up draw to be called 30 times per second
}
float y = 100;
// The statements in draw are executed until the
// program is stopped. The function is called as many
// times per second as the frameRate. If no explicit
// rate is set, this is 45 times per second.
void draw
{
background(0); // Set the background to monochrome black
y = y - 1;
if (y < 0) { y = height; }
line(0, y, width, y); // draw a horizontal line at height y
}
