Processing.js

Processing.js
Original author(s)	John Resig
Developer(s)	Processing.js team
Initial release	2008
Stable release	1.4.1 / July 31, 2012
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

Bulleted list item

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 is originally created to allow existing Processing developers and existing code to work unmodified on web.The recommended way to use processing.js is write code in processing and convert into JavaScript before running it.

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.

Versions

1.4.0

The first version of Processing.js released in july 2010.

1.4.1

This version resolved bugs present in prior version.The key events for focusing the mouse are handled with global keyEvent instructions which execute only when they receive focus.The versions are exclusively for development and production with api option.

Development
Production
Development-api
Production-api

Latest Upcoming Version(2.1)

Processing.org will be launching a series of "alpha" releases as they prepare for 2.0. Alpha means unstable and that function names and APIs will continue to change (mostly in PShape, XML, and other new bits like JSON and Table).It might be a bit like driving a sports car but with the hood removed and one of the tires might occasionally blow out. There will be beta releases. After the alpha releases which restricts the APIs changing, but the bugs might still be around. You'll have a proper set of tires and a hood, but you might still need a coat of paint and a radio.

Changes made in latest release.

libraries of OPENGL are built into core,no need of installing separate library.
Modified version of GSVideo library is used instead of java.
It allows us to choose two modes of platform for executing like Andriod or Android (operating system),JavaScript by selecting choice from drop down list in window.
Movie Maker class has been removed in that place a item tool which converts frames into video is added.
For reading XMl and loading separate loadXMl is added and getXXXAttribute is now changed to getXXX.
Exception handling is made as choice for advanced users.
A new Table class is added which made easy to deal with punctuation in spreadsheets like comma,delimiter.

IDE

The processing.js code is designed by standalone with using text editors ,or it may built into into an integrated development environment (IDE).

The following are the IDE's which support the processing.js.

Sketchpad puts processing on Etherpad Etherpad web-based collaborative real-time editor, 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 programming.js code can be edited in processing helper tool.
Even the code can be designed by using Eclipse integrated development environment by importing packages using GitHub.

Uses

The following are uses of Processing.js

iProcessing

iProcessing was built to help people develop native iPhone applications using the Processing language. It is an integration of the Processing.js library and a Javascript application framework for iPhone.

It leverages the full spark of open web and gives addition befits to users of Processing
It serves as a forcing function for JavaScript performance and
Ways of Using
- Writing pure Processing code.
- Pre-compiling processing code to java script.
- Writing JavaScript-only processing.js code.
- Writing documents that contain combined JavaScriptand Processing.js code.
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 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
}
```
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 the a 2D Sketch that is 100 by 100 pixels. Size(100,100,P2D);
To draw a 3D sketch we use OpenGL size(100,100,OPENGL);
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-9D
- 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
- 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
- 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
External links

Versions

IDE

Uses

Ways of Using

See also

References

External links