Processing.js: Difference between revisions

Processing.js
Original author(s)	John Resig
Developer(s)	Processing.js team
Initial release	2008
Stable release	1.3.6 / October 13, 2011
Repository	github.com/processing-js/processing-js ;
Written in	JavaScript
Size	61 KB (gzipped) / 209 KB (production) / 754 KB (development)
Type	Web application framework
License	MIT
Website	processingjs.org

Browse history interactively

← Previous edit Next edit →

Content deleted Content added

VisualWikitext

Inline

Revision as of 16:58, 23 April 2012

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.

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 9, 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.

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:

<html>
<head>
  <script type="text/javascript" src="processing.js"></script>
</head>

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:

<canvas data-processing-sources="example.pde"></canvas>

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
}

References

Glassner, Andrew (August 9, 2010), Processing for Visual Artists: How to Create Expressive Images and Interactive Art (1st ed.), A K Peters/CRC Press, p. 955, ISBN 1568817169
Reas, Casey; Fry, Ben (June 17, 2010), Getting Started with Processing (1st ed.), Make, p. 208, ISBN 144937980X
Noble, Joshua (July 21, 2009), Programming Interactivity: A Designer's Guide to Processing, Arduino, and Openframeworks (1st ed.), O'Reilly Media, p. 736, ISBN 0596154143
Terzidis, Kostas (May 11, 2009), Algorithms for Visual Design Using the Processing Language (1st ed.), Wiley, p. 384, ISBN 0470375485
Reas, Casey; Fry, Ben; Maeda, John (September 30, 2007), Processing: A Programming Handbook for Visual Designers and Artists (1st ed.), The MIT Press, p. 736, ISBN 0262182629
Fry, Ben (January 11, 2008), Visualizing Data (1st ed.), O'Reilly Media, p. 382, ISBN 0596514557
Greenberg, Ira (May 28, 2007), Processing: Creative Coding and Computational Art (Foundation) (1st ed.), friends of ED, p. 840, ISBN 159059617X
Shiffman, Daniel (August 19, 2008), Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction (1st ed.), Morgan Kaufmann, p. 450, ISBN 0123736021

External links

@@ Line 21: / Line 21: @@
 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 (web browser)|Opera]], [[Internet Explorer 9]], [[Safari (web browser)|Safari]] and [[Google Chrome]]).
-The development of Processing.js was picked-up by students at [[Seneca College]] 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]] and [[Seneca College]], led by David Humphrey, Al MacDonald, and Corban Brook. The students continue to maintain the project today.
+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.
 ==Use==