The page you requested could not be found. Click here to return home.
diff --git a/README.md b/README.md
index 8a613a7..96f5e07 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,14 @@
-The Processing.js website
-=========================
+Processing.js
+=============
-This is our website, in all it's glory.
+Processing.js was a port of the [Processing](https://processing.org) programming language for the web, and was maintained from November 2011 to December 2018, having been unofficially retired in March of 2017.
-Testing the website locally
----------------------------
+If you're looking for the last version of Processing.js before the project was officially discontinued, you're looking for [v1.6.6](https://github.com/processing-js/processing-js/tree/v1.6.6).
-Install [Jekyll](https://github.com/mojombo/jekyll/wiki/Install) on your computer,
-clone this repository, and run `jekyll` inside the root of the repository. This will
-compile (yes, seriously) the website into the _site directory, and start a localhost
-web server running on port 4000. Jekyll will automatically recompile the site if you
-make any changes.
+That last version of the website itself can be found as an [archived tree](https://github.com/processing-js/processing-js.github.io/tree/archive) on github.
+
+If you want to use Processing on the web today, please have a look at the newer [P5.js](https://p5js.org) project, which was a reimagining of Processing "if it had been designed for use on the web from the get-go".
+
+Thank you to everyone who used Processing.js in the past, and of course: everyone who worked on the project over the years.
+
+- The Processing.js Team
diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index 0161519..0000000
--- a/_config.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-# Github defaults
-safe: true
-lsi: false
-pygments: true
-
-# Processing.js settings
-auto: true
-server: true
diff --git a/_layouts/default.html b/_layouts/default.html
deleted file mode 100644
index 7e7f932..0000000
--- a/_layouts/default.html
+++ /dev/null
@@ -1,83 +0,0 @@
-
-
-
-
- Processing.js
-
-
-
-
-
-
-
-
-
-
-
- a port of the Processing Visualization Language
-
-
This page tries to explain how to quickly and (as) correctly (as possible) use
-Processing sketches on webpages. The information is based on the work done by
-the processing.js group.
-
-
This information on this page reflects the best of my knowledge anno November
-2010, and processing.js becomes more and more complete, so it is possible that the
-information on this page changes over time. Should you spot any incompletenesses
-or blatant mistakes, please contact me at
-
-pomax at nihongoresources.com,
-
-with the obvious substitutions in place to make it a legal email address.
-
-
-
What is Processing?
-
-
The "Processing" language (also referred to as "P5") is a programming language with a focus on data visualisation. Of course, "data" is a loose concept, and
-Processing can be used for anything from drawing a few lines and circles on a screen, to full blown interactive animations.
-In fact, a basic Processing program is two lines of code, and will already play an animation:
Of course this program doesn't show you anything, because all it does is set up the visual context to have a certain width and height (indicated in the setup
-method as the size(...,...) instruction) and then calls draw() every few milliseconds. Of course, draw() is empty, so it won't actually show you anything.
-A more useful minimal program would be a "hello world" program, but I hate those because they only show a programming language can write text, and that's pretty much the
-least interesting feature of any programming language. Instead let's look at a minimal program that makes sense for a data visualisation language:
-
-{% highlight java %}
-float frame = 0; // we start at frame 0
-float framerate = 24; // our "sketch" will have a framerate of 24 frames per second.
-
-int ball_x; // ball administration: x coordinate
-int ball_y; // ball administration: y coordinate
-int ball_radius = 20; // ball administration: ball radius
-
-void setup() {
- size(200,200); // set draw area size
- frameRate(framerate); // set animation framerate
- ball_x = width/2; // set the initial ball coordinates
- ball_y = ball_radius; // set the initial ball coordinates
- stroke(#003300); // set the default shape outline colour
- fill(#0000FF); // set the default shape fill colour
-}
-
-void draw() {
- frame++; // note that we're one frame further than last time
- float bounce_height = height/2 * abs(sin(PI*frame/framerate)); // compute the ball height for this frame
- float ball_height = height - (bounce_height+ball_radius); // because the top of the screen is 0, and the bottom is "height",
- background(#FFFFEE); // clear the drawing area
- ball_y = (int) (ball_height); // set the new ball y position
- ellipse(ball_x,ball_y,ball_radius,ball_radius); // draw the ball
-}
-{% endhighlight %}
-
-
-
-play controls:
-
-
-
-
-
This looks a bit long for a minimal program, but then again, this actually does something: it shows us a ball that bounces up and down, taking one second for each bounce. It shows a few aspects of
-Processing too: every variable is strongly typed. So you have to indicate what you'll be using a variable for, and you can choose from:
-
-
-
boolean, a binary value that can be either true or false
-
byte, an 8-bit value
-
char, a byte representing an ascii character
-
color, a type specific to Processing, representing an on-screen color
-
int, a 32 bit signed integer number
-
-
long, a 64 bit signed integer number
-
float, a 32 bit signed decimal number
-
double, a 64 bit signed decimal number
-
-
-
And of course there are also the typical complex data types:
-
-
-
-
Object, a catch-all data type for things that are complex data types.
-
String, a text string (stored as UTF-16).
-
ArrayList, a list structure for arbitrary values with add/remove functionality.
-
HashMap, a structure that can store {<unique key>, <arbitrary value>} pairs.
-
XMLElement, a convenient XML-mirroring object.
-
-
-
-
You'll see why this last one turns out to be really useful later on.
-
-
Coming back to the minimally functional example of a Processing program, or "sketch", there are also some examples of Processing' own API at work. The following methods are native Processing calls:
-
-
-
size(int, int), sets the drawing area dimensions, and the global "width" and "height" values.
-
frameRate(int), sets the refresh rate for the drawing area, and the frameRate value.
-
-
stroke(color), sets the shape outline color.
-
fill(color), sets the shape fill color.
-
abs(number), computes the absolute value of any number.
-
sin(number), computes the sinoid value based on any number (treated as radians).
-
background(color), sets every pixel of the drawing area to the specified color.
-
ellipse(int, int, int, int), draws an ellipse on the drawing area.
-
-
-
-
The Processing API is in fact quite expansive (See http://processing.org/reference for the full list), but it can't cover everything. Luckily it supports object oriented programming, so that our previous example can also be written as an object oriented sketch:
Instead of doing everything in the draw() function, the object oriented approach tucks all the code that relates to computing the ball's position in the definition
-for what we consider a "Ball". To be good object oriented programmers, we've also said that things that are a Ball are also a Bouncer, and this lets us extend our
-sketch very easily to instead of a bouncing ball, have a bouncing box by keeping almost everything the same, and adding a new class Box that's a Bouncer:
All of a sudden we have a bouncing box, that starts from a falling position instead of from the ground, and we didn't have to modify the master draw() function for
-it! In fact, let's just use a group of bouncing things:
Fantastic, two bouncing balls and a bouncing box, bouncing counter-point to each other. But it's not very interactive yet. Let's change it so that we can "hang on"
-to bouncing things until we let go of them again. Processing allows interaction with the keyboard and mouse, using what are known as "event handlers", methods that Processing automatically calls for you when you use the keyboard or mouse. In this case we care about mouse interaction, so we'll look at mousePressed and mouseReleased events:
Because the Ball and Box classes will do the same thing on mouse interaction, the interface Bouncer has been changed to an actual class too, to take care of some of
-the shared functionality. Now if you click on anything that's a Bouncer it'll stop moving until you let it go. Let's go one step further an just allow us to move the
-bouncing things around, too.
And with that, on to the original topic of this article: using Processing on web pages
-
-
-
-
Putting a sketch on the page
-
-
The great thing about Processing is that it can be used on webpages. Traditionally, you would convert your sketch to a java applet, and embed that on a page, but the processing.js project has changed this: you can now use your sketches directly without turning it into an applet at all. In the same way that you include a javascript file, or a CSS stylesheet, you can simply link to your sketch and magic happens.
-
-
Let's say we save the previous sketch, with the bouncing and the mouse interaction, as "mysketch.pde", and we want to show this on a webpage. Using processing.js, this is a trivially simple trick:
And we're done. In fact, I went ahead and made sure this page already uses processing.js, and that there is a mysketch.pde to load. If you click on the play control for the sketch above, it will start running, and do exactly what you would expect it to do based on what it does when you run it from the Processing environment.
-
-
-
-
Putting a sketch inline on the page
-
-
-
While not recommended, you can also put your sketch directly on a page, much like how you can put javascript or CSS styles directly on a page. However, in order for processing.js to properly load your code, you'll need some extra help in the form of the "init.js" file that is included with the processing.js examples archive from the processing.js downloads page
There are several reasons for why this is not a very good practice, but the most important one is that this way you can't be sure whether or not you've written a bug-free sketch. By writing it directly on the page, you might in fact have written some buggy code, which you will then find is terribly hard to debug because the browser is not equiped with a debugger for Processing code. In fact, processing.js rewrites your sketch into pure javascript (using some terribly clever tricks that we won't go into), so even if when it tells you where the error is in a javascript debugger, it will tell you where it went wrong in the converted javascript object, not the actual place in your source code. So keep it as a separate file, and make sure to test your code in the Processing IDE!
-
-
-
-
-
Making your sketch and your page see each other
-
-
-
Just running a sketch on a page is fine, but the benefit of a webpage is that it offers the kind of user interaction that you can't get from within the sketch itself. Pretty buttons, text areas that fold away, pop up, etc. make it very attractive to have your sketch do all the animation graphicsy work, but have all the information about the sketch, as well as controls for it, on the webpage. This is entirely possible - in fact, the "stop" and "play" buttons for the sketch above are examples of javascript telling the sketch what to do. Because a webpage offers more than a plain sketch can, processing.js has a few special tricks up its sleeve, so that you can get the most out of your creative work. Arguably the most important of these is the "get the sketch" function:
This is the pivotal function on the javascript side of things. It gives you a direct reference to your sketch, and everything in it, so that you can call any function and examine and modify any
-variable that is in the sketch.
-
-
-
-
Making javascript see your sketch
-
-
Let's say we have the following sketch:
-
-
-
-void setup() {
-size(200,200);
-noLoop(); // turn off animation, since we won't need it
-stroke(#FFEE88);
-fill(#FFEE88);
-background(#000033);
-text("",0,0); // force Processing to load a font
-textSize(24); // set the font size to something big
-}
-
-void draw() { }
-
-void drawText(String t)
-{
-background(#000033);
-// get the width for the text
-float twidth = textWidth(t);
-// place the text centered on the drawing area
-text(t, (width - twidth)/2, height/2);
-}
-
-
-
We can make this sketch draw a different text based on some text we have on our webpage, using javascript. This is in fact really easy: first,
-let's save this processing code as mysketch2.pde, and load it onto a page in the same way as earlier in the article.
-Then, we use javascript to ask for our sketch instance, after which we call the "drawText" function with some text that we get from the web page
-that the sketch is running on:
This has the same effect as the sketch that's running below. Simply fill in a bit of text, and hit the ▶ button to see the sketch render it on the drawing area.
-
-
-set text:
-
-
-
-
-
So far so good, but what if we also want to make Processing code call javascript? In order for us to so, while making sure the sketch keeps running both on your page an in the Processing environment, we have to do a bit more work
-
-
-
-
Making your sketch "see" javascript
-
-
You can't just stick plain javascript in your sketch and hope everything goes well because it's "on a web page". A better approach is to neatly separate your sketch and your on-page javascript, and ensure that whatever you want to do on your page runs through a javascript function. How do we do that? Let's say we have the following page:
As an exercise, let's try to get the mouse coordinates from that mouseMoved event onto the page. This means we'll need to define a javascript function that will do this for us:
What we've done is we've told Processing: "There are things that follow the JavaScript interface. This means that whatever else they can do, they'll have a function called "showXYCoordinates" and that function takes two arguments, both of type int."
-- of course, the sketch will not magically know our on-page javascript, so we also define a function that lets us tell the sketch what actually counts as javascript,
-which is what the bindJavascript(...) function is for.
-
-
This leaves us with needing to make sure that we really do tell the sketch what javascript is, which we'll do as follows on the page:
This defines a function that checks whether processing.js has loaded our sketch yet. If not, it tries again 250ms later. If the sketch is loaded, the reference to
-the sketch is used to tell it what "javascript" should be. This is achieved by virtue of processing.js trusting that you wrote valid code. As such, as long as you're on
-the javascript side of things, you can pass the sketch whatever you like, and the sketch will trust that it conforms to what the method says the type should be. In this
-case we pass the javascript "this" value (which refers to the global javascript environment for the current window), and tell processing "this thing conforms to your JavaScript interface, s
-o it has loads of things but the only thing you need to be concerned about is whether or not it has a showXYCoordinates(int, int) function, which it does."
-
-
So, our final sketch behaves like the sketch below, and our final page source looks like the following:
Passing complex objects from javascript to your sketch
-
-
This leaves us with one last topic that we need to cover, simply because it's so common: using an AJAX approach to get some data, and then passing that data, properly formatted, to your sketch.
-
-
-
-
Actually using Processing objects
-
One interesting thing that processing.js allows us to do is to create objects as we defined them in our sketch, in javascript,
-and then hand them over to the sketch to deal with. To give an example, let's use the following sketch, which lets you draw points by clicking with the mouse, and links up all the points with lines:
Because processing.js turns the sketch into actual javascript, every class we defined in it can be created using new pjs.ClassName(arguments,...).
-
-
-
-
JSON
-
-
Another way to get data from javascript into a sketch is by way of a JSON description. JSON is particulary interesting because javascript can read a JSON text string and immediately turn it into a full-fledged javascript object. Let's look at our point-drawing sketch again, this time with a dedicated "addPoint" method:
Now what if -- instead of using mouse clicks, or predetermined javascript -- we want to load points based on some data on a remote server? We change our web page so
-that it can deal with JSON data from a remote server, and then make our javascript tell the sketch what to do:
-
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>My Processing Page</title>
-<script type="text/javascript" src="jquery.js"></script>
-
-<script type="text/javascript" src="processing.js"></script>
-<script type="text/javascript">
-function drawPoints(id) {
-var pjs = Processing.getInstanceById(id);
-var json = $.get("http://thatfunkysite.com/serving/json.asp");
-var data = eval("("+json+")");
-if(data) {
-// we know the JSON is an array of points, called "points"
-for(p=0, end=data.points.length; p<end; p++) {
-var point = data.points[p];
-pjs.addPoint(point.x, point.y);
-}
-}
-}
-</script>
-</head>
-<body>
-<canvas id="mysketch5" data-processing-sources="mysketch5.pde"/></canvas>
-<div id="controller"><button id="loadPoints" onclick="loadPoints('mysketch5')"/></div>
-</body>
-</html>
-
-
load points:
-
-
-
The JSON that gets loaded in the example sketch in this section is the following:
Another favourite is the XML document. This is where the Processing data type "XMLElement" comes into play. Rather than trying to use javascript to parse the XML, we pass the xml data straight on to our sketch, which will know exactly what to do with it:
A special kind of XML document is the SVG Scalable Vector Graphics document. What's special about it is that it already represents visual data, and Processing can load SVG XML natively.
This sketch will load the following SVG code, and allows you to click on the shape to change its color, or click-drag it to move it around:
-
-
-
-<svg width='200' height='200'>
-
-<path d='M 10 10 L 190 10 L 140 100 L 190 190 L 10 190 L 50 100 L 10 10 M 100 80 L 140 30 L 50 30 L 100 80 M 100 120 L 50 170 L 140 170 Z'/>
-</svg>
-
-
-
-
Javascript Objects
-
One last thing you may want to pass to a sketch is a real javascript object. Say we have a physics library that we want to take advantage of in our
-sketch, and for Processing it's a .jar file, but there's a javascript version too. This thing lets us create a javascript "Physics" object that we can
-call functions on for computing momentum and force transfer when we make two things hit each other. Since processing.js does not support .jar libraries
-(because it's precompiled binary java class code, and pjs cannot unpack a jar file, reverse engineer the .java source, transform it to Processing API
-calls, then confirm all calls are supported) we'll use this convenient javascript library. But how to do this cleanly?
-
We have to do three things:
-
-
Write an interface for the object we're using, so our sketch will know what it even is,
-
use a javascript binding so that we can ask javascript to make these objects for us, and
-
write a javascript function to make these objects for us.
-
-
So let's get cracking! First we determine which functions in the javascript Physics object we actually make use of. We could write an interface that
-has correct method signatures for every function in the library, but this would be overkill. After reviewing our code we see that we actually only
-make use of three of the objects functions: collide_objects(forcevector1, forcevector2, collisionangle), get_force_vector(startpoint, distancevector,
-accelleration) and get_trajectory(startpoint, objectmass, initialvector, gravityvector, gravitystrength). Let's build our interface:
-
-
-interface Physics
-{
-// collision modifies the two force vectors in place. Nothing is returned.
-void collide_objects(float[] forcevector1, float[] forcevector2, float collisionangle);
-
-// get force vector returns a force vector
-float[] get_force_vector(float[] startpoint, float[] distancevector, float accelleration);
-
-// trajectory calculation returns a curve, represented as a lest of 2D coordinates
-float[][] get_trajectory(float[] startpoint, float objectmass, float[] initialvector, float[] gravityvector, float gravitystrength);
-}
-
-
-
First job done. Now to bind javascript. We've already looked at how to do this, so just follow the standard procedure and job's a good'n.
-In addition to whatever javascript functions you want to expose, however, we must add one more:
-
-
-interface JavaScript {
-...
-Physics buildPhysicsObject([properly typed variables to match the javascript constructor]);
-...
-}
-
-
-
-
Finally, we now make use of our purely javascript library in our js file(s):
-
-
-function buildPhysicsObject(x, y, someothervar)
-{
-return new Physics(x,y,someothervar);
-}
-
-
-
This last step seems silly, but we have to delegate the task of building a javascript object to javascript. If we tried to do this inside our sketch,
-processing.js will not complain, but Processing will. To make matters worse, it also obscures the point of failure: if something goes wrong in the sketch,
-did it go wrong because processing.js has a bug, or because you were sloppy with javascript inside a Processing sketch? Golden rule: keep the different
-languages separated as much as possible.
-
We're almost set to use our javascript library for Processing purposes now. The only thing left is to create these objects and then use them in our sketch:
-
-
-class MassBody
-{
-// a class for bodies with mass that travel with some speed and are located at some x/y position
-float[] forceVector = new float[2]; // 2 dimensional vector;
-int XDIM = 0; // index constant
-int YDIM = 1; // index constant
-float x = 0; // position
-float y = 0; // position
-MassBody(float x, float y) { forceVector[XDIM] = 0; forceVector[YDIM] = 0; this.x=x; this.y=y; }
-void draw() { /* draws the body */ }
-float[] getForce() { return forceVector; }
-void impartForce(float[] stimulus) { forceVector[XDIM] += stimulus[XDIM]; forceVector[YDIM] += stimulus[YDIM]; }
-void updatePosition() { x+=...; y+=...; }
-}
-
-MassBody body1 = new MassBody(...);
-MassBody body2 = new MassBody(...);
-
-Phsyics physicsObject
-
-void bindJavascript(JavaScript js) {
-javascript = js;
-int x = 0;
-float y = 9;
-String[] somevalues = {"scalar", "vector", "tensor"};
-physicsObject = javascript.buildPhysicsObject(x,y,somevalues);
-}
-void setup()
-{
-...
-}
-void draw()
-{
-// if the two bodies collide, compute the resultant forces
-if(body1.collides(body2))
-{
-// forces are recomputed in place
-float angle_12 = body1.getAngleTo(body2);
-physicsObject.collide_objects(body1.getForce(), body2.getForce(), angle_12);
-body1.updatePosition();
-body2.updatePosition();
-}
-body1.draw();
-body2.draw();
-}
-
-
-
And we're done!
-
-
-
Processing.js as javascript graphics library
-
As last point of business, you can of course also use Processing.js as a pure graphics library, by invoking it for some canvas and then calling
-Processing API calls directly. Let's jump right in! The following code is what you would write on-page, although of course as ever it's far better
-practice to link to your source files, so you should really place what's in the script tags in a file myPjsSketch.js and link to it using src="..."
-instead.
-
The following code is split up into multiple (numbered) sections.
This binds a new Processing instance to the indicated canvas. The function(p) {}
-bit is actually completely unimportant, but must be used until ticket
-# 1111 lands in Processing.js 1.2 (March 2011). Once 1.2 is out, the binding will simply be var pjs = new Processing(canvas).
-
-
-
-// let's write a sketch
-var value=0;
-// Definition for the initial entry point
-pjs.setup = function() {
-pjs.size(200,200);
-// we want to turn off animation, because this is a demo page and it
-// would use cpu while not being looked at. Only draw on mousemoves
-pjs.noLoop();
-}
-
-
-
-
This setup() function defines the entry point for our sketch. It sizes the canvas, and tells it not to animate by default.
-
-
-
-// Draw a "sine wave" using two bezier curves, with an undulating amplitude.
-pjs.draw = function() {
-// partially clear, by overlaying a semi-transparent rect
-// with background color
-pjs.noStroke();
-pjs.fill(255,75);
-pjs.rect(0,0,200,200);
-// draw the "sine wave"
-pjs.stroke(100,100,200);
-pjs.noFill();
-pjs.bezier(0,100, 33,100+value, 66,100+value, 100,100);
-pjs.bezier(100,100, 133,100+-value, 166,100+-value, 200,100);
-}
-
-
-
The draw() function defines the main draw function, which is called whenever a frame update is requested (either because the sketch is looping, or
-because redraw() is called manually)
The mouseMoved() function is a Processing event handler that is triggered by the mouse moving around over the canvas. It is far more convenient to
-use the built-in event handler than to write our own.
-
This is all we need in our sketch, so there's only one call left to make:
-
-
-
-// Finally, calling setup() will kickstart the sketch
-pjs.setup();
-})();
-</script>
-
-
-
-
-
-
So let's see that in action - the code that we just ran through is supposed to draw a sinewave,
-with an amplitude that depends on where the mouse is on the canvas. If all went well, it will look like this:
-
-
-
-
-
-
More information
-
-
This guide was brought to you by Mike "Pomax" Kamermans.
-
For more information, you can visit the following websites, or visit us in the #processing IRC channel on irc.mozilla.org.
diff --git a/articles/_posts/2011-12-02-RenderingModes.html b/articles/_posts/2011-12-02-RenderingModes.html
deleted file mode 100644
index dbe547f..0000000
--- a/articles/_posts/2011-12-02-RenderingModes.html
+++ /dev/null
@@ -1,257 +0,0 @@
----
-layout: default
-desc: The different rendering modes available in Processing.js
-title: Rendering Modes
-permalink: /articles/RenderingModes.html
----
-
- Understanding Rendering Modes in Processing.js
-
- Introduction
-
- The Processing language enables complex 2D and 3D graphics programming without having
- to understand the details of the underlying graphics system. It is designed to be
- easily learned, yet allows one's skills to grow and evolve without ever feeling
- limited.
-
- Processing can be used to work with both 2D and 3D graphics. It achieves this through
- a number of different rendering engines, which affect how it works. For example,
- one might choose to render a 2D sketch using the JAVA2D and P2D renderers or create
- 3D sketches with the P3D and OPENGL renderers. There are also renderers for creating
- PDFs. Processing allows developers to choose renderers based on tradeoffs of speed
- and quality.
-
- A renderer is chosen through the use of Processing's
- size() function. For example, to create a 2D sketch that is 200 by 200 pixels
- in size:
-
size(200, 200, P2D);
-
-
- The 2D Rendering Context
-
- Processing.js uses the HTML canvas element to provide 2D and WebGL rendering contexts.
- The canvas 2D API is used to implement Processing's JAVA2D and P2D renderers (see
- the canvas API for
- details on canvas). You can create a 2D Processing.js sketch using any of the following:
-
-
-
size(200, 200, P2D);
-
-
-
size(200, 200, JAVA2D);
-
-
-
size(200, 200); // default is 2D
-
-
-
-
-
- Here is a simple 2D Processing.js sketch:
-
-
-
-
- Processing.js 3D renderers (P3D and OPENGL) are implemented using WebGL. The Web-based
- Graphics Library (WebGL) is a canvas rendering context that provides a JavaScript
- based 3D drawing API for the web (see
- https://developer.mozilla.org/en/WebGL). WebGL is based on OpenGL ES 2.0,
- a subset of OpenGL designed to be used in embedded devices. Many modern browsers
- support WebGL, but not all. You can confirm that your browser and computer/operating
- system support WebGL here.
- You can download a WebGL enabled browser
- here.
-
- Just as Processing relies on OpenGL for its 3D graphics (OPENGL renderer), Processing.js
- uses OpenGL via WebGL, allowing Processing.js sketches to work just like their Processing
- equivalent.
-
- In order to create a 3D OpenGL sketch in Processing, two things are necessary. First,
- the OpenGL library must be imported. Second, the OpenGL rendered must be specified:
-
- Since Processing.js is actually JavaScript, it does not support importing Java-based
- libraries. However, in order to enable sketches written in Processing to work in
- Processing.js, the import line can be safely included—Processing.js will simply
- ignore it. The following methods of creating a 3D Processing.js sketch are equivalent:
-
- Once you have a 3D enabled browser installed you can try out some example 2D and
- 3D sketches here.
-
-
- Processing.js as a Simplified Web Drawing API
-
- Once a 3D sketch has been created, all of the normal Processing drawing operations
- can be done. Most Processing functions have 2D and 3D versions (e.g., you provide
- different arguments for points in 2D or 3D space). By learning the Processing syntax,
- it's easy to create complex 2D and WebGL graphics without ever touching the underlying
- graphics APIs. This is true of Processing and Java, and also of Processing.js and
- canvas/WebGL. The Processing langauge provides a powerful and beginner friendly
- on-ramp to canvas 2D and WebGL. Consult the
- Processing.js Langauge Reference for specific details on how to use each
- function.
-
- Using the Processing.js API in JavaScript
-
- In addition to running standard Processing sketches, Processing.js can also be used
- in so-called API mode. This is the Processing language API which is accessbile to
- JavaScript without any Processing code. The Processing.js API is available if you
- download the complete Processing.js zip file instead of just the .js file from the
- Downloads page (for example: processing.js-version.zip vs processing.min.js) (http://processingjs.org/download).
- It is essentially the same as Processing.js, but without the code parser (i.e.,
- you can use the API either way, but the Processing.js API is a somewhat smaller
- file). See
- Writing JavaScript-only Processing.js Code for more details.
-
- Accessing the Raw Canvas Context - Advanced:
-
- It's also possible to work with the raw canvas context, both 2D and WebGL, from
- Processing.js, JavaScript, or both. This is not a recommended method, since it will
- make your Processing.js sketch harder to use in Processing; however, sometimes it's
- useful to know how to control the canvas context from outside the sketch in JavaScript,
- or to do something that Processing doesn't allow, which the canvas or WebGL APIs
- do.
-
- All Processing.js sketches have an externals property, accessible from within the
- Processing code as a global variable. This object is meant to allow for accessing
- and sharing external but related data between the sketch code and the web page.
- The externals object has a number of useful properties, including:
-
-
sketch: the current sketch object
-
canvas: the canvas element associated with a sketch
-
- context: the canvas rendering context being used by the sketch
-
-
-
- From JavaScript, these can be accessed via a Processing.js sketch's instance:
-
- The same thing can be done from within Processing code, where the externals object
- is available as a global variable:
-
-// Processing.js allows you to mix JavaScript, so using var is fine here:
-var currentContext = externals.context;
-
-
-Once you have a reference to the context, you can use any valid canvas API call,
-including raw WebGL functions if using a 3D sketch.
diff --git a/articles/_posts/2011-12-03-p5QuickStart.html b/articles/_posts/2011-12-03-p5QuickStart.html
deleted file mode 100644
index dd377bb..0000000
--- a/articles/_posts/2011-12-03-p5QuickStart.html
+++ /dev/null
@@ -1,466 +0,0 @@
----
-layout: default
-desc: A guide to Processing.js for Processing developers
-title: Processing Quick Start
-permalink: /articles/p5QuickStart.html
----
-
- This quick start guide is written from the standpoint of a Processing developer.
- No HTML or JavaScript knowledge is assumed, and only basic Processing knowledge
- is necessary.
- If you're in a rush, here's what you need to know:
-
-
Processing.js is written in JavaScript, and uses HTML5's <canvas> element.
- It converts your Processing code to JavaScript and runs it.
-
To use it, download Processing.js here:
- downloads
-
Make your Processing *.pde files as you normally would, for example hello-web.pde
-
Create a web page that includes Processing.js as well as a <canvas> with info
- about where to get your sketch file (you can specify multiple *.pde files, separating
- them with spaces):
- Processing is built using Java. It was created at much the same time that the web
- was starting. At this time the choice of the Java language, and Java Runtime, as
- implementation targets for Processing made a lot of sense. In the mid-1990s, Java
- was poised to become the language of the web, with Applets and other Java technologies
- being used broadly on the client-side. Even Netscape, who created the language which
- would eventually become the lingua franca of the web with JavaScript, named their
- language so as to align themselves with the growing hype around Java.
-
- In the end, Java became an important server side technology, receding from the client-side
- and browser. Today, most web browsers still support Java Applets, by means of a
- binary plugin. However, few web developers deploy Java-based web applications now,
- due to long load and startup times and difficulties relying on Java (or compatible
- Java versions) being installed. This trend is not isolated to Java, but is happening
- to all browser plugins (e.g., Flash), which are becoming less popular as issues
- of security, installation, deployment, etc. make them inconvenient or risky.
-
- Another reason that plugins like Java and Flash have fallen out of favour is that
- recent advances in standard web technologies, specifically HTML5 and JavaScript,
- have made it possible to do things that previously depended on native (i.e., faster,
- compiled) code. Companies like Google, with GMail and Google Docs, or Scribd (see
- Scribd-in-HTML5)
- have shown that HTML, CSS, and JavaScript alone are enough to build fast, full featured
- web applications.
- Processing.js is built using JavaScript and HTML5. Processing.js is really two things:
- a Processing-to-JavaScript translator; and an implementation of the Processing API
- (e.g., functions like line(), stroke(), etc.) written in JavaScript instead of Java.
- It might seem odd at first to imagine your Processing sketches running in a browser,
- usually without modification. But this is exactly what Processing.js enables.
-
- Processing.js automatically converts your Processing code to JavaScript. This means
- that you don't have to learn JavaScript in order to run your code in a browser.
- You can, quite literally, write your code using the Processing IDE like you always
- have, and follow the steps below to get it running on the web. There's nothing new
- to learn, beyond getting a simple web page created.
-
- Under the hood, Processing.js uses the new HTML5 canvas element to create your sketch's
- graphics. The canvas element is a new feature of the web, and is either implemented
- or will be implemented by all major web browsers. All Processing drawing features
- have been reimplemented in Processing.js to use canvas, so any browser that supports
- canvas will also support Processing.js.
-
- Here's a sample of a Processing.js sketch running in the browser. If you can see
- it working, your browser supports everything you need already, and you can move
- on to instructions below.
- There's nothing you should do differently to write sketches for Processing.js: you
- write your Processing.js code exactly like Processing. For most people, this will
- mean using the Processing IDE, which has the nice benefit of letting you write,
- run, and test your code all in once place. Remember, any valid Processing sketch
- should also be a valid Processing.js sketch.
-
- If you want to experiment with web-based Processing.js code editors, you can also
- try these:
- Let's make a simple sketch that is 200 by 200 in size, sets the background to gray,
- draws a small white circle, and prints a message to the debug console:
- Processing.js is a JavaScript library that is meant to be included in a web page.
- You don't have to compile it, tell your web server about it, etc. It simply has
- to be included in a web page, and the browser will do the rest.
-
- You can download Processing.js at the download
- page. The library comes in a number of forms, for example:
-
-
processing-1.0.0.js (note that 1.0.0 is just the version, the number might be higher
- when you look at this)
-
processing-1.0.0.min.js
-
-
- The version numbers may be different as you read this, but note the file extensions.
- Both end in .js, but one also has .min. The .min version is Processing.js in a minified
- form, which means it will be smaller to download (minified JavaScript uses tricks
- like removing whitespace and renaming long variable names to single letters). File
- sizes, and download times, matter on the web in a way they don't with normal Processing
- sketches.
- It's easy to get overwhelmed with the amount there is to learn about modern web
- technologies. But there's a secret: you can ignore 95% of it as you start, and add
- more later as you have time and interest. Unlike compilers or programming languages,
- web browsers are designed to accept almost any input you throw at them, whether
- valid or not, whether complete or not. Here's your first Processing.js web page:
- That's it! No <html> or <body> tags, no title, no CSS, just the processing.js
- script, and a canvas. While there isn't much here, it's important to understand
- what is. First, the script tag has a src attribute, which is the file to
- load. This could be a full url or a relative path. In this case the browser is going
- to look for a file named processing-1.0.0.min.js in the same directory as
- your web page.
-
- The second thing in this web page is a <canvas> tag. Notice that it too has
- an attribute, data-processing-sources. This is a list of filenames (or just
- one filename if you only have 1 file) separated by spaces (filenames and URLs on
- the web can't include spaces, so space is a safe choice for separating lists). In
- this case, the browser is going to look for a file named hello-web.pde located
- in the same directory as your page page.
-
- How does the browser know how to load a Processing *.pde file? Processing.js takes
- care of this, and will download, parse (i.e., translate to JavaScript), then run
- it automatically when the page is loaded.
-
- And that's it! Save this file to the same directory as hello-web.pde and
- processing-1.0.0.min.js and call it hello-web.html.
-
- If you're the kind of person who doesn't like taking shortcuts, here's what a more
- complete web page might look like:
-
-
-
-
-
- Hello Web - Processing.js Test
- <script src="processing-1.0.0.min.js"></script>
-
-
-
- Processing.js Test
-
- This is my first Processing.js web-based sketch:
- Both ways work, and you shouldn't let yourself get burdened by HTML and other web
- syntax until you feel you want to do other things with your web pages.
- In case it isn't obvious, you run your hello-web.pde sketch by loading your
- hello-web.html web page in a compatible browser. Web browsers will provide
- you a way to load a local file, usually using the File menu and then Open File....
- If you've saved the files above on a web server, you can use the remote URL instead.
- While Processing.js is compatible with Processing, Java is not JavaScript, and canvas
- has some differences from Java's graphics classes. Here are some tricks and tips
- as you start working on more complex sketches in Processing.js.
- Processing uses the concept of a data directory, where images and other resources
- are located. Processing.js does not include this. As a result, you should always
- provide file pages (e.g., images) that are relative to your web page, which is the
- norm on the web.
- 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 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.
- 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 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's a typical Processing sketch that
- loads an image synchronously and then draws it:
- This code will not work in the browser with Processing.js, because the call to image()
- will happen before the file picture.jpg has been downloaded. The fix is to
- ask Processing.js to download the image before the sketch starts, and cache it--a
- technique known as preloading. Here is the modified code:
- Notice the extra comment line at the top of the code. The @pjs directive
- is for Processing.js, and not the developer. Think of it as an extra line of code
- that will be executed before the program begins.
-
- If you have multiple images to load, use a list like so:
- 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.
Also in the class of integer vs. floating point issues, color(number) and color(number, number) may not behave quite as expected. In native Processing, color(int) and color(float) behave differently in that the first is used for full color integers. Calling color(#FF0000) and color(16711680) are the same call, so they produce a red color. However, when using float values the color()/1 function treats the input as gray values, between 0 and the max indicated value (255, by default). Any value lower than 0 or higher than max is simply capped. Because of the integer vs. floating point issues with JavaScript, Processing.js does not perform any capping, and so even though the following code will show a black and a white line in Processing, it will show a yellow line, and an "invisible" line in Processing.js instead.
We recommend you always sanitize your inputs for color if you need colors to be "in range", and only use hex colors, using color(#RRGGBB), or rgb/rgba colors, using color(r,g,b) and color(r,g,b,a)
- Using the data-processing-sources attribute on the canvas, and having Processing.js
- load an external file is the preferred and recommended way to include scripts in
- a web page. However, it is also possible to write in-line Processing code.
-
- A few changes are necessary to make the example above work with inline Processing
- code:
-
-
-<script src="processing-1.0.0.min.js"></script>
-<script type="application/javascript">
-/*
- * This code searches for all the <script type="application/processing" target="canvasid">
- * in your page and loads each script in the target canvas with the proper id.
- * It is useful to smooth the process of adding Processing code in your page and starting
- * the Processing.js engine.
- */
-
-if (window.addEventListener) {
- window.addEventListener("load", function() {
- var scripts = document.getElementsByTagName("script");
- var canvasArray = Array.prototype.slice.call(document.getElementsByTagName("canvas"));
- var canvas;
- for (var i = 0, j = 0; i < scripts.length; i++) {
- if (scripts[i].type == "application/processing") {
- var src = scripts[i].getAttribute("target");
- if (src && src.indexOf("#") > -1) {
- canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
- if (canvas) {
- new Processing(canvas, scripts[i].text);
- for (var k = 0; k< canvasArray.length; k++)
- {
- if (canvasArray[k] === canvas) {
- // remove the canvas from the array so we dont override it in the else
- canvasArray.splice(k,1);
- }
- }
- }
- } else {
- if (canvasArray.length >= j) {
- new Processing(canvasArray[j], scripts[i].text);
- }
- j++;
- }
- }
- }
- }, false);
-}
-</script>
-<script type="application/processing" target="processing-canvas">
-void setup() {
- size(200, 200);
- background(100);
- stroke(255);
- ellipse(50, 50, 25, 25);
- println('hello web!');
-}
-</script>
-<canvas id="processing-canvas"> </canvas>
-
-
-
- This code is more complex because it has to figure out which canvas goes with which
- script (i.e., you can have multiple Processing sketches living in the same page,
- and therefore, multiple canvases). Also note that the scripts include a type
- attribute, which distinguishes between JavaScript and Processing code (the browser
- will ignore Processing scripts). Finally, note the use of the id and target
- attributes to connect the Processing script with the associated canvas.
-
- Portions of the code above are from the Processing.js project's init.js file,
- see the
- file on git. This file will likely be going away in the future, and happen
- automatically as part of Processing.js initialization.
- Now that your sketch is working, and you have a basic web page, you'll probably
- start getting ideas about how to make this look more beautiful, how to better integrate
- your sketch with the surrounding web page or site, and how to mix data from various
- web services and APIs. Is it possible to mix images on Flickr and a Processing.js
- sketch? Yes. Is it possible to link Twitter to Processing.js? Yes. Anything the
- web can do, your Processing.js sketch can do.
-
- This is an important idea, and is worth restating: Processing.js turned your once
- Java-based code into JavaScript, and your graphics into <canvas>. As a result,
- anything you read on the web about dynamic web programming, AJAX, other JavaScript
- libraries or APIs, all of it applies to your sketch now. You aren't running code
- in a box, cut-off from the rest of the web. Your code is a first-class member of
- the web, even though you didn't write it that way.
-
- If you're feeling adventurous and want to go learn more about how to do other thing
- with HTML, JavaScript, CSS, etc. remember that everything they say applies to you
- and your sketches.
-
diff --git a/articles/_posts/2011-12-04-jsQuickStart.html b/articles/_posts/2011-12-04-jsQuickStart.html
deleted file mode 100644
index b6afc7e..0000000
--- a/articles/_posts/2011-12-04-jsQuickStart.html
+++ /dev/null
@@ -1,539 +0,0 @@
----
-layout: default
-desc: A guide to Processing.js for JavaScript developers
-title: JavaScript Quick Start
-permalink: /articles/jsQuickStart.html
----
-
- This quick start guide is written from the standpoint of a JavaScript developer.
- The document assumes you know JavaScript and web programming, but only very basic
- Processing knowledge is assumed.
- If you're in a rush, here's what you need to know:
-
-
Processing.js converts Processing code to JavaScript and runs it in the browser,
- using <canvas> for a drawing surface.
-
To use it, download Processing.js here:
- downloads
-
Make your Processing *.pde files as you normally would, for example hello-web.pde
-
Create a web page that includes Processing.js as well as a <canvas> with info
- about where to get your sketch file (you can specify multiple *.pde files, separating
- them with spaces):
- The Processing language was originally created at MIT as part of the Media lab and
- Aesthetics and Computation group. They needed a way to bridge the gap between software
- developers, artists, data visualizers, etc., and to do so in a way that allowed
- new programmers (or non-programmers) to do complex visual work easily. Processing
- was built using Java, and can be thought of as a simplified Java, with a simplified
- Java API for drawing and graphics.
- Processing has a large and vibrant community, who are good at creating 2D and 3D
- graphics, visualizing data sets, audio, video, etc. With HTML5 the web gained canvas,
- audio, and video--things which had previously only been available via plugins like
- Flash or Java. At the same time, advances in JavaScript engines have made it possible
- to do things in script that were previously too slow.
-
- By porting the Processing language to the web, both the Processing and web communities
- benefit. For Processing, this means that code which used to only work on the desktop
- now "just works" in the browser. For the web, this means that a new but mature and
- full-featured approach to graphics programming becomes available. The <canvas>
- element is too low-level for most developers to use directly--JavaScript libraries
- are necessary. Processing.js can be thought of as just such a library, simplifying
- the use of the 2D and 3D canvas operations.
- The Processing language was designed to be small but complete, and easy to learn.
- This document does not attempt to teach you Processing, and you are encouraged to
- seek out Processing specific tutorials, books, and examples. Any Processing code
- or concepts should map to Processing.js (the exceptions are listed below). You can
- also use pure JavaScript to work with the Processing drawing API, skipping the Java
- syntax of Processing in favour of JavaScript.
- Processing.js was originally created in order to allow existing Processing developers
- and existing Processing code (often referred to as sketches) to work unmodified
- on the web. As a result, the recommend way to use Processing.js is to write Processing
- code, and have Processing.js convert it to JavaScript before running it.
-
- Over time, many web developers have begun using Processing.js, and asked that we
- design a way for the API to be used separate from the Processing language itself.
- Therefore, we have provided a way for JavaScript developers to write pure JavaScript
- code and still use the Processing.js functions and objects. NOTE: Processing.js
- is first and foremost a port of Processing to the open web, with design decisions
- favouring compatibility with Processing. It was not designed as a general purpose
- HTML drawing library. Having said that, it can be used as a high-level drawing API
- for canvas.
-
- Below we discuss the various methods for using Processing.js in your web pages.
Create a separate Processing file or files, naming them whatever you want, as long as they have a
- *.pde extension.
-
Create a web page that includes Processing.js as well as a <canvas> with info
- about where to get your sketch file(s), and include Processing filenames as a space-separated
- list in a data-processing-sources attribute on the canvas:
-
-
-
-
-
-
- Hello Web - Processing.js Test
-
-
-
-
- Processing.js Test
-
- This is my first Processing.js web-based sketch:
- Processing.js will automatically scan the document on page load for <canvas>
- elements with data-processing-sources attributes, download the files using
- XMLHTTPRequest, and feed them to the Processing-to-JavaScript translator. The resulting
- JavaScript is run using eval.
- Processing.js automatically downloads and converts any Processing code to JavaScript.
- It does this using the Processing.compile() method, and those interested in building
- tools or utilities for Processing.js can do the same.
-
- In order to obtain "compiled" code (i.e., JavaScript suitable for use by the Processing.js
- runtime) from Processing code, do the following:
-
-
-// hard-coded Processing code, text from an HTML widget, downloaded text, etc.
-var processingCode = "...";
-var jsCode = Processing.compile(processingCode).sourceCode;
-
-
-
- For example, converting the following Processing code produces the "compiled" JavaScript
- underneath:
- The previous method produced JavaScript code from Processing, but you can also write
- JavaScript on its own. The Processing.js parser turns Processing code into a JavaScript
- function, then runs it. As a result, it's possible to skip the Processing code altogether,
- and simply write a JavaScript function, passing this to your Processing instance.
- Here's an example:
-
-
-function sketchProc(processing) {
- // Override draw function, by default it will be called 60 times per second
- processing.draw = function() {
- // determine center and max clock arm length
- var centerX = processing.width / 2, centerY = processing.height / 2;
- var maxArmLength = Math.min(centerX, centerY);
-
- function drawArm(position, lengthScale, weight) {
- processing.strokeWeight(weight);
- processing.line(centerX, centerY,
- centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
- centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
- }
-
- // erase background
- processing.background(224);
-
- var now = new Date();
-
- // Moving hours arm by small increments
- var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
- drawArm(hoursPosition, 0.5, 5);
-
- // Moving minutes arm by small increments
- var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
- drawArm(minutesPosition, 0.80, 3);
-
- // Moving hour arm by second increments
- var secondsPosition = now.getSeconds() / 60;
- drawArm(secondsPosition, 0.90, 1);
- };
-}
-
-var canvas = document.getElementById("canvas1");
-// attaching the sketchProc function to the canvas
-var processingInstance = new Processing(canvas, sketchProc);
-
-
-
- Here a sketch function is created, similar to what the parser would produce. This
- function should take 1 argument, a reference to a processing object (i.e., the Processing
- runtime), which will be created by the Processing constructor. Any Processing functions
- or objects are accessible as properties of this object.
-
- Once that function is complete, pass it, along with a reference to a canvas, to
- the Processing constructor (remember to use new).
- One of the first questions people ask with Processing.js is whether they can read
- values from the document in which the Processing sketch is running, or vice versa.
- The answer is yes.
-
- Processing.js converts Processing code into JavaScript contained in a function closure.
- The variables and functions you create are not attached to the global object (i.e.,
- window). However, you can still get access to them.
- Since Processing code gets converted to JavaScript and run like any other function,
- all Processing code has access to the global object. This means that if you create
- a variable or function in a global script block, they are automatically accessible
- to Processing. Consider this example:
- The previous example kept a clean separation between the JavaScript and Processing
- code, while loosening the boundary between the two. Because Processing.js converts
- Processing code to JavaScript, it's also possible to mix them directly. The Processing.js
- parser will leave JavaScript it finds within the Processing code unaltered, allowing
- developers to write a hybrid of Processing and JavaScript (NOTE: this is why we
- don't use a pure Processing parser approach in processing.js). Here is the previous
- example rewritten using this method:
- There is some JavaScript syntax that can't be easily mixed this way (e.g., regex
- literals). In those cases you can simply move your pure JavaScript to a <script>
- block and access it using the method described above.
- Reaching out from the Processing code to JavaScript is easier than going the other
- way, since the JavaScript created by the Processing.js parser is not exposed directly
- on the global object. Instead, you gain access using the Processing.instances property.
-
- The Processing constructor keeps track of instances it creates, and makes them available
- using the getInstanceById() method. By default, when a <canvas> has a data-processing-sources
- attribute, its id is used as a unique identifier for the Processing instance. If
- no id attribute is provided, you can use Processing.instances[0].
-
- After you have a reference to the appropriate Processing instance, you can call
- into it like so:
- 
-