An introduction to Processing with Processing.js

Index of Files

• The local copy of the Processing.js library (processing-1.4.1.js)
• The basic Processing sketch (01.html)
• The simplest use of Processing (02.html)
• Introducing setup() and draw() (03.html)
• Drawing functions in Processing (04.html)
• Animation 0 -- A very simple animation (05.html)
• Animation 1 -- A falling ball (06.html)
• Animation 2 -- A bouncing ball (07.html)
• Special effects 1 -- Leaving a trail (08.html)
• Animation 3 -- Follow the mouse (09.html)
• Animation 4 -- A simple "paint" app (10.html)
• Animation 5 -- A responsive grid (11.html)
• Interaction 1 -- Changing the grid color based on a mouse event (12.html)
• Interaction 2 -- Additional mouse events (13.html)
• Interaction 3 -- Capturing key events (14.html)
• Interaction 4 -- listening for other keys (and using fonts) (15.html)
• External Data -- Incorporating JSON data (16.html)

The local copy of the Processing.js library: processing-1.4.1.js

This is the current version of the Processing library we are using for this sketch.

We can also link to the library online.

The basic Processing sketch: 01.html

The minimal code for incorporating Processing into a web page. Please note the Processing object instantiation. The default size of the canvas is 100 x 100 pixels.

The simplest use of Processing: 02.html

We are here using Processing as an in-page JavaScript console.

Introducing setup() and draw(): 03.html

Setting the basic attributes of the sketch; for example, note the Processing commands for setting the size of the sketch and the background color of its canvas. Our canvas shows up when these commands are run. In the inspector, note how the canvas tag is updated.

Drawing functions in Processing: 04.html

Notes

1. After calling size(), the environment variables width and height hold the dimensions of the sketch.

2. By default the draw() function is called repeatedly, and in this case, prints the frame rate that processing is aiming to maintain. The default frame rate is 60 fps.

3. Processing offers a wide range of drawing functions that you can play around with. Please consult the online documentation

4. If you uncomment the noLoop() line (#27), you will see that draw() is then only run once.

5. The JavaScript functions draw() and setup() can be renamed to anything we wish. The function names that we assign to p.setup and p.draw determine the behavior of the Processing sketch.

Animation 0 -- A very simple animation: 05.html

Notes

1. We can use frameCount to control what is drawn in specific frames. in this case we ensure that a test pattern is drawn to the screen for the first 120 frames of the animation (which roughly corresponds to two seconds).

2. After the opening pattern is shown for roughly two seconds, a ball is drawn at the center of the canvas.

Animation 1 -- A falling ball: 06.html

Notes

1. The x and y variables will hold the position of the ball. You can see this on line 42 where they are being passed in ball as arguments and on line 67 where the arguments are used to set the position of the center of the ellipse representing the ball.

2. As you can see on line 43, every animation frame, we change the y position of the ball by one pixel. This means that the ball will move downwards at roughly 60 (frame rate) pixels per second.

Animation 2 -- A bouncing ball: 07.html

Notes

1. The variable direction holds the direction of the ball’s motion. It is used on line 48 to change the sign of the change to the amount by which the y position of the ball is changed on line 46.

2. Line 48 is run only if the ball moves outside the bounds of the sketch as determined by testing its y position compared to the top and bottom of the sketch on line 47. (|| is a logical OR.)

Special effects 1 -- Leaving a trail: 08.html

Note that by a simple change in how the background of the sketch is refreshed, we can have the ball leave a small trail behind.

Instead of drawing a solid color into the background of the sketch, draw a rectangle the size of the background with a fill color with a transparency.

Animation 3 -- Follow the mouse: 09.html

A simple animation in which the ball follows the mouse and leaves a small trail behind. Note that the ball's (ellipse's) position is set to the mouse position in line 42.

Animation 4 -- A simple "paint" app: 10.html

Processing not only makes it easy to get the current mouse position (mouseX, mouseY) but also saves the previous mouse position in the variables pmouseX and pmouseY.

By drawing a line from the current position of the mouse to its previous position, we can make a simple paint program. Note that to leave a trail on the canvas permanently, lines 39 and 40 need to be commented out.

Animation 5 -- A responsive grid: 11.html

Notes

1. In lines 53-62, we draw a regular grid where in each cell we have a squares with a circle at its centers.

2. The size of the circle drawn at a grid position depends on its distance from the mouse’s position. (lines 55 and 60).

3. Change line 55 to var dotSize = gridSize; to see a version of the grid that is not interactive.

4. The distances are measured in gridSize units, and that is why we multiply them by the grid size to draw them in the correct px dimensions in commands on lines like 58 and 60.

Interaction 1 -- Changing the grid color based on a mouse event: 12.html

Each time the mouse is released, line 53 is run which changes the color used for drawing the grid.

Interaction 2 -- Additional mouse events: 13.html

Notes

1. Processing provided listeners for a variety of mouse events. We have written functions for handling the events fired when the mouse is pressed, released, moved, or dragged.

2. The dots closest to the mouse position are the smallest when the mouse is moved (but not dragged)

3. But when the mouse is dragged, the dots closest to the mouse position are largest.

4. Refinements: The mouse getting pressed changes the color of the grid and flips the behavior in (2) so that the dots closest to the mouse are largest. And when the mouse is released, the dots closest to the mouse become smaller again.

Interaction 3 -- Capturing key events: 14.html

Notes

1. We are using the arrow keys to move the white dot around.

2. Also a mouse interaction enhancement: when dragging the mouse, the dot appears at point opposite to the mouse position with respect to the center of the canvas.

Interaction 4 -- listening for other keys (and using fonts): 15.html

When a letter of alphabet is typed on the keyboard, the letter appears next to the active cell in the grid. The drawn letter is updated when a new key is pressed.

External Data -- Incorporating JSON data: 16.html

The shape and location of the triangle drawn when the key 0 is held down is determined by the JSON data provided.

---

Resources

• Processing.js reference
• JavaScript Quick Start for Processing.js
• Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction by Daniel Shiffman
• Processing: A Programming Handbook for Visual Designers and Artists by Casey Reas and Ben Fry