Processing.js: Difference between revisions
Content deleted Content added
mNo edit summary Tag: references removed |
corrected the source, removed some links that weren't useful or simply not encyclopaedic. |
||
| Line 20: | Line 20: | ||
|data5 = http://processingjs.org |
|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. |
||
| Line 27: | Line 26: | ||
== 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. |
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. |
||
The Processing.js library can be included in the head section of a web page as a single JavaScript file: |
The Processing.js library can be included in the head section of a web page as a single JavaScript file: |
||
| Line 37: | Line 36: | ||
</head> |
</head> |
||
</source> |
</source> |
||
A <code>canvas</code> element is declared inside the body, with a <code>data-processing-sources</code> attribute, specifying the location of an external file holding the Processing code: |
A <code>canvas</code> element is declared inside the body, with a <code>data-processing-sources</code> attribute, specifying the location of an external file holding the Processing code: |
||
<source lang="xml"> |
<source lang="xml"> |
||
<canvas data-processing-sources=" |
<canvas data-processing-sources="example.pde"></canvas> |
||
</source> |
</source> |
||
| ⚫ | |||
| ⚫ | |||
<source lang="javascript"> |
<source lang="javascript"> |
||
/* example.pde */ |
/* example.pde */ |
||
// The statements in the setup() function |
// The statements in the setup() function |
||
| Line 55: | Line 52: | ||
void setup() |
void setup() |
||
{ |
{ |
||
size(200, 200); // |
size(200, 200); // Sets the canvas size to 200 by 200 pixels |
||
stroke(255); // Set line drawing color to white |
stroke(255); // Set line drawing color to monochrome white |
||
frameRate(30); |
frameRate(30); // Set up draw() to be called 30 times per second |
||
} |
} |
||
| Line 63: | Line 60: | ||
// The statements in draw() are executed until the |
// The statements in draw() are executed until the |
||
// program is stopped. |
// program is stopped. The function is called as many |
||
// times per second as the frameRate. If no explicit |
|||
// sequence and after the last line is read, the first |
|||
// rate is set, this is 45 times per second. |
|||
// line is executed again. |
|||
void draw() |
void draw() |
||
{ |
{ |
||
background(0); // Set the background to black |
background(0); // Set the background to monochrome black |
||
y = y - 1; |
y = y - 1; |
||
if (y < 0) { y = height; } |
if (y < 0) { y = height; } |
||
line(0, y, width, y); |
line(0, y, width, y); // draw a horizontal line at height y |
||
} |
} |
||
</source> |
</source> |
||
==External Links== |
==External Links== |
||
* [http://processingjs.org/ Official Website] |
* [http://processingjs.org/ Official Website] |
||
* [http://github.com/jeresig/processing-js GitHub Page] |
|||
* [http://wiki.mozilla.org/Education/Projects/ProcessingForTheWeb Processing for the Web (POW) project] |
* [http://wiki.mozilla.org/Education/Projects/ProcessingForTheWeb Processing for the Web (POW) project] |
||
* [http://processing-js.lighthouseapp.com/ Lighthouse Page] |
|||
* [http://www.facebook.com/group.php?gid=120738511297130 Facebook Group Page] |
|||
* [irc://irc.mozilla.org/processing.js IRC channel] |
|||
Revision as of 20:38, 28 August 2010
| Processing.js logo | |
| Language | Javascript |
|---|---|
| Original Creator | John Resig |
| License | MIT |
| Current Release | 0.9.7 / August 13 2010 |
| Website | http://processingjs.org |
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
}