Processing.js: Difference between revisions

Processing.js
Language	Javascript
Original Creator	John Resig
License	MIT
Current Release	0.9.7 / August 13, 2010
Website	http://processingjs.org
	v; t; e;

Browse history interactively

← Previous edit Next edit →

Content deleted Content added

VisualWikitext

Inline

Revision as of 00:44, 25 September 2010

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 plug-in.

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 (Currently the latest versions of Mozilla Firefox, Opera, Safari and Google Chrome).

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
}

External links

@@ Line 1: / Line 1: @@
-{{Infobox
+{{Infobox|bodystyle   = width:20em;
-|bodystyle   = width:20em;
 |name        = Infobox/doc
 |title       = Processing.js
 |titlestyle  =
 |headerstyle =
 |labelstyle  = width:33%
 |datastyle   =
+|image =
-|image =
 |label1  = Language
 |data1   = Javascript
@@ Line 16: / Line 14: @@
 |data3   = [[MIT License|MIT]]
 |label4  = Current Release
-|data4   = 0.9.7 / August 13 2010
+|data4   = 0.9.7 / August 13, 2010
 |label5  = Website
 |data5   = http://processingjs.org
 }}
-'''Processing.js''' is a Javascript port of [[Processing_(programming_language)|Processing]], a programming language designed to write visualizations, images, and interactive content. <br />It allows web browsers to display animations, visual applications, games and other graphical rich content without the need for a Java Applet or Flash plug-in.
+'''Processing.js''' is a Javascript port of [[Processing (programming language)|Processing]], a programming language designed to write visualizations, images, and interactive content. <br />It allows web browsers to display animations, visual applications, games and other graphical rich content without the need for a Java Applet or Flash plug-in.
-Processing.js uses JavaScript to render 2D and 3D content on the HTML [[Canvas_element|canvas element]], and is supported by browsers that have implemented this element (Currently the latest versions of Mozilla [[Firefox]], [[Opera (web browser)|Opera]], [[Safari (web browser)|Safari]] and Google [[Chrome]]).
+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 (Currently the latest versions of Mozilla [[Firefox]], [[Opera (web browser)|Opera]], [[Safari (web browser)|Safari]] and Google [[Chrome]]).
-== Use ==
+==Use==
 The Processing.js syntax is almost identical to that of the Processing language, a <code>setup()</code> function is used to define general visualization properties like canvas size, frame rate and other variables, and the <code>draw()</code> function controls the behavior of each frame in the animation.
@@ Line 72: / Line 69: @@
 </source>
-==External Links==
+==External links==
 * [http://processingjs.org/ Official Website]
 * [http://wiki.mozilla.org/Education/Projects/ProcessingForTheWeb Processing for the Web (POW) project]
+{{Uncategorized|date=September 2010}}
 [[fr:Processing.js]]