Learning

Basic Syntax

A brief look at the structure of a Processing sketch reveals how easy it is to program interactive visualizations.

As with any language, you begin by defining your global variables. Then you create a setup() function, where you control the visualization's properties, like the canvas size, frame rate and perhaps variables such as the stoke-weight or background-color.

The next step is to create your draw() function, which controls the behavior of each frame in your animation. The draw function loops continuously unless you tell it otherwise by using the exit() command.

To the right is a basic example of Processing.js in action. If you take a moment to read the source code below, you will see that a few lines of Processing code can go a very long way. You may also notice that Processing syntax is almost identical to Java.

Adding interactivity to your visualization is incredibly simple. There are a host of
built-in functions such as: mousePressed(), which controls the
behavior of your script on click events; or mouseMoved() which
defines what should happen as your mouse moves across the Canvas.

Processing.js also tracks a range of pre-defined variables like key, which
stores the value of the last key pressed; or mouseX and
mouseY, which store the last recorded position of the mouse
pointer.

Using Processing

There are two ways of implementing processing. The first way is the recommended one.
Let me illustrate both of these: