GitHub - annasob/processing-js: A port of the Processing visualization language to JavaScript.

annasob / processing-js Public

forked from processing-js/processing-js

Notifications You must be signed in to change notification settings
Fork 8
Star 31

A port of the Processing visualization language to JavaScript.

processingjs.org/

MIT license

31 stars 887 forks Branches Tags Activity

Star

Notifications

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 2,158 Commits
examples		examples
fonts		fonts
test		test
tools		tools
.gitignore		.gitignore
AUTHORS		AUTHORS
CHANGELOG		CHANGELOG
LICENSE		LICENSE
Makefile		Makefile
README		README
example.html		example.html
example.pjs		example.pjs
processing.js		processing.js

Repository files navigation

P R O C E S S I N G . J S - @VERSION@
a port of the Processing visualization language

//////////////////////////////////////////////////////////////////////////////

License MIT (see included LICENSE)
Original Author John Resig: http://ejohn.org
see included AUTHORS file for contributer list

Web Site http://processingjs.org
Java Version http://processing.org
Github Repo. http://github.com/jeresig/processing-js
Bug Tracking http://processing-js.lighthouseapp.com
Mozilla POW! http://wiki.Mozilla.org/Education/Projects/ProcessingForTheWeb
Test Suite http://processing-js.buildingsky.net

Maintained by
Seneca http://zenit.senecac.on.ca/wiki/index.php/Processing.js
Hyper-Metrix http://hyper-metrix.com/#Processing
BuildingSky http://weare.buildingsky.net/pages/processing-js

IMPORTANT! - NOTE FOR DEVELOPERS
Please read the guidelines before pushing your code to the repository. The
function(s) you are working on may already be finished and queued for push.

GUIDELINES
http://processing-js.lighthouseapp.com/projects/41284/project-workflow

IRC CHANNEL
Join the development team at irc://irc.mozilla.org/processing.js for more info

Processing.js is an open programming language for people who want to program
images, animation, and interactions for the web without using Flash or Java
applets. Processing.js uses Javascript to draw shapes and manipulate images
on the HTML5 Canvas element. The code is light-weight, simple to learn and
makes an ideal tool for visualizing data, creating user-interfaces and
developing web-based games.

The Processing language was created by Ben Fry and Casey Reas. It evolved
from ideas explored in the Aesthetics and Computation Group at the MIT Media
Lab and was originally intended to be used in a Java run-time environment. In
the Summer of 2008, John Resig ( inventor of jQuery ), ported the 2D context
of Processing to Javascript for use in web pages. Much like the native
language, Processing.js is a community driven project, and continues to grow
as browser technology advances.

//////////////////////////////////////////////////////////////////////////////

PLATFORM AND BROWSER COMPATIBILITY

Processing.js is explicitly developed for and actively tested on browsers that
support the HTML5 <Canvas> element. Processing.js runs in FireFox, Safari,
Chrome and Opera but is not currently supported in Internet Explorer.

Processing.js aims for 100 percent compatibility across all supported browsers;
however, differences between individual canvas implementations may give
slightly different results in your sketches.

Implementing Processing.js in Flash or Silverlight is not recommended, as Java
already occupies the browser plug-in space for this library. For users
wishing to run Processing.js in Silverlight, see Paul Irish's Silverlight
implementation. Using Internet Explorer Canvas with Processing.js typically
results in unusable frame-rates for moderately complex visualizations.

//////////////////////////////////////////////////////////////////////////////

SETTING UP A SIMPLE SKETCH

In order to get a sketch going in the browser you will need to download the
processing.js file and make two new files - one with the extension .html and
the other with the extension .pde or .pjs.

The .html file will have a link to the processing.js file you have downloaded,
and a <canvas> tag with a link to the .pde or .pjs file that you made.

Here is an example of an .html file:
<html>
<head>
<script src="processing.js"></script> //ensure a correct path to the file
</head>
<body>
<canvas data-processing-sources="anything.pjs"></canvas>
</body>
</html>
Note that the .pjs file needs to be named anything.pjs (or whatever you named your file)
and that there is a custom attribute data-processing-sources that is used to link the sketch to
the <canvas>.

Here is an example of a .pjs or .pde file:

void setup()
{
size(200,200);
background(125);
fill(255);
noLoop();
PFont fontA = loadFont("courier");
textFont(fontA, 14);
}

void draw(){
text("Hello Web!",20,20);
println("Hello ErrorLog!");
}

//////////////////////////////////////////////////////////////////////////////

THINGS TO KNOW AS A PROCESSING DEVELOPER USING PROCESSING.JS

Processing.js has no data directory

Processing uses the concept of a data directory, where images and other
are located. Processing.js does not include this. As a result, you should
always provide files (e.g., images) that are relative to your web page,
which is the norm on the web.

Processing.js implements Processing, but not all of Java

Processing.js is compatible with Processing, but is not, and will never be,
fully compatible with Java. If your sketch uses functions or classes not
defined as part of Processing, they are unlikely to work with Processing.js.
Similarly, libraries that are written for Processing, which are written in Java
instead of Processing, will most likely not work.

Processing.js only has two rendering modes

Processing has many rendering modes to choose from, depending on the desired
quality and speed for graphics (e.g., OPENGL, P3D, JAVA2D, etc.). Processing.js
uses <canvas> which provides either a 2D drawing context or a 3D context based on
WebGL a version of OpenGL for the web. Therefore, whatever you choose, you will
end-up with either the 2D or 3D context.

Division which is expected to produce an integer might need explicit casting

There are a class of bugs that arise when converting Processing code to
Processing.js that involve integer vs. floating point division. What was
straight-up integer division in Processing code, when converted to Processing.js,
can sometimes become problematic, as numbers become doubles, and introduce a
fractional part. The fix is to explicitly cast any division to an integer that
exhibits this behaviour:

// before
int g = mouseX / i;

// after
int g = (int)(mouseX / i);

Processing.js has to cheat to simulate Processing's synchronous I/O

Processing uses a synchronous I/O model, which means that functions like
loadImage() take time to execute, and while they are running, nothing else
happens: the program waits until loadImage() is done before moving on to the
next statement. This means that you can count on the value returned by a
function like loadImage() being usable in the next line of code.

Web browsers don't work like this. The web uses an asynchronous I/O model, which
means that functions which load external resources can't make the program wait
until they finish. In order to replicate Processing's load* functions, you have
to use a special Processing.js Directive.

The Processing.js Directives are hints to the browser that are written in
comments rather than in the Processing code itself. Here is an example of
loadImage():

/* @pjs preload="picture.jpg"; */
PImage img;

void setup() {
img = loadImage("picture.jpg");
image(img, 0, 0);
}
Note the syntax (below) to preload multiple images:

/* @pjs preload="picture.jpg,picture2.jpg,picture3.png"; */

Processing.js requires more care with variable naming than Processing

One of the powerful features of JavaScript is its dynamic, typeless nature. Where
typed languages like Java, and therefore Processing, can reuse names without fear
of ambiguity (e.g., method overloading), Processing.js cannot. Without getting into
the inner-workings of JavaScript, the best advice for Processing developers is to
not use function/class/etc. names from Processing as variable names. For example,
a variable named line might seem reasonable, but it will cause issues with the
similarly named line() function built-into Processing and Processing.js.

//////////////////////////////////////////////////////////////////////////////