Processing.js: Difference between revisions
→Versions: we are not here to publish release notes, keep that int he distibutions. Removing per the excessive dtail tag |
→Challenges: remove weird "challenges section" WP Not here to document code development |
||
| Line 92: | Line 92: | ||
To draw a 3D sketch OpenGL is used: |
To draw a 3D sketch OpenGL is used: |
||
<code>size(100, 100, OPENGL);</code> |
<code>size(100, 100, OPENGL);</code> |
||
==Challenges== |
|||
* calling <code>color()</code> function with out of range values produces unpredictable results |
|||
* It is recommended to use hexadecimal values for colors #FFFFFF |
|||
* overhead of handling dummy [[Method overriding]] for every method we use |
|||
* Variables declared in Processing.js require more care than Processing |
|||
* More chance of bugs when converting from Processing to Processing.js explicit typecasting is needed, otherwise it produces random results |
|||
The sample code below shows explicit casting of the integer datatype. |
|||
<syntaxhighlight lang="arduino"> |
|||
// before |
|||
int g = mouseX / j; |
|||
// after |
|||
int g = (int)(mouseX / j); |
|||
</syntaxhighlight> |
|||
== p5.js == |
== p5.js == |
||
Revision as of 15:11, 3 November 2018
 | This article contains wording that promotes the subject in a subjective manner without imparting real information. (September 2017) |
 | This article appears to contain a large number of buzzwords. (September 2017) |
 | |
| Original author(s) | John Resig |
|---|---|
| Developer(s) | Processing Foundation |
| Initial release | 2008 |
| Stable release | 1.4.8
/ March 25, 2014 |
| Repository | |
| Written in | JavaScript |
| Size | 61 KB (gzipped) / 209 KB (production) / 754 KB (development) |
| Type | Web application framework |
| License | MIT |
| Website | processingjs |
Processing.js is a JavaScript port of Processing, a programming language designed to write visualisations, 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 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.
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:
- Sketchpad puts processing on Etherpad, allowing authors to simultaneously edit a text document, and see all of the participants' edits in real-time, with the ability to display each author's text in their own color.
- The Processing.js code can be edited in Processing helper tool.
- Even the code can be designed by using Eclipse by importing packages using GitHub.
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:
<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
}
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);
p5.js
Lauren McCarthy created p5.js, a native JavaScript alternative and successor to Processing.js that has the official support of the Processing Foundation. McCarthy also teaches an introductory course to p5.js on Kadenze.
See also
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 1-56881-716-9, archived from the original on April 21, 2011
{{citation}}: Unknown parameter|deadurl=ignored (|url-status=suggested) (help)D - Reas, Casey; Fry, Ben (June 17, 2010), Getting Started with Processing (1st ed.), Make, p. 208, ISBN 1-4493-7980-X
- Noble, Joshua (July 21, 2009), Programming Interactivity: A Designer's Guide to Processing, Arduino, and Openframeworks (1st ed.), O'Reilly Media, p. 736, ISBN 0-596-15414-3
- Terzidis, Kostas (May 11, 2009), Algorithms for Visual Design Using the Processing Language (1st ed.), Wiley, p. 384, ISBN 0-470-37548-5
- 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 0-262-18262-9, archived from the original on April 17, 2011
{{citation}}: Unknown parameter|deadurl=ignored (|url-status=suggested) (help) - Fry, Ben (January 11, 2008), Visualizing Data (1st ed.), O'Reilly Media, p. 382, ISBN 0-596-51455-7
- Greenberg, Ira (May 28, 2007), Processing: Creative Coding and Computational Art (Foundation) (1st ed.), friends of ED, p. 840, ISBN 1-59059-617-X, archived from the original on January 27, 2011
{{citation}}: Unknown parameter|deadurl=ignored (|url-status=suggested) (help) - Shiffman, Daniel (August 19, 2008), Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction (1st ed.), Morgan Kaufmann, p. 450, ISBN 0-12-373602-1