In the early days of the personal computer revolution, computers were small, simple, and easy to operate. It was always great fun to write BASIC games on my Commodore 64 using its amazing sound generator, cool sprite graphics, and joystick features. With only a few lines of code, well okay maybe more than a few lines, you could make anything you could imagine.
However the fun couldn’t last, with the advent of the IBM Personal Computer, things got serious. Computers became much harder to interact with. Increased capability brought increased complexity. The sound and graphics features no longer came standard with the machine but were sold as optionally priced add-on cards.
While BASIC was available, it lost its allure as programmers started using C and assembler to get more out of the PC hardware. Features like more memory and hard disks were gained but features like graphics, sound generation, and easy joystick control were lost and the age of programming for fun closed its doors.
What is Processing?
Processing was borne out of the frustration of teaching programming concepts to new students using traditional programming languages. In 2001, Casey Reas and Ben Fry developed the Processing environment as a simpler alternative reminiscent of their time on the earliest personal computers.
Now young programmers, graphic artists and those of us longing for the golden days of the Commodore 64, the Apple II, and the Atari 800 could once again let our imaginations soar and dare to dream some truly creative programming.
Using Java as the base language, Reas and Fry added functional enhancements to make it easier to access graphics, sound, mouse, and keyboard features. They created the PApplet class as the basis for all of your creative endeavors.
What is a Processing Sketch?
In Processing, all programs are called sketches. Processing saves your sketches in the Documents subdirectory. Each sketch is given a default name of today’s date. However, you have the option to change the sketch name to anything you want.
Shown below is one of the first sketches you’ll likely make when learning Processing. The sketch tracks mouse movement and draws a small circle wherever the mouse pointer passes over.
By tweaking the sketch in different ways you can have the circle change in size randomly or tied in some way to the mouse movement. You can do the same for the circle’s color. Shown below is a processing sketch that changes the color based on mouse positioning and uses the mouse speed to change the size of the circle. Can you think of other variations to try?
What does a Processing Sketch need?
A key feature of every processing sketch is the definition of two methods:
- void setup()
- void draw()
The setup() method is run once and is used to initialize key parts of your sketch. In contrast, the draw() method is run repeatedly, commonly at 1/60th of a second and the draw method is often where all the magic of your sketch occurs.
Each time the draw() method is called, your sketch has access to the latest mouse coordinates and to any keystrokes made everything you need to make it interactive. The draw() method also has access to your variables and objects so you can apply small changes to them before or after drawing your frame.
What else comes with Processing?
Processing provides you with a simple onscreen sketch editor and some buttons to play, stop or debug your sketch. Processing also provides an optional collection of examples, 3rd party libraries, tools, and modes that extend the processing environment in interesting ways.
Some cool libraries
Some cool 3rd party Processing libraries are:
- AI for 2D Games – create intelligent games (see Soccer game example)
- controlP5 – minimalistic GUI controls, great for futuristic apps
- fisica – create interactive physical models
- grafica – plotting fancy interactive/zoomable plots
- minim – audio record/playback library with FFT algorithm
- PixelFlow – particle systems library
Some cool examples
Processing and its 3rd party libraries come with extensive examples that work out of the box. Here are some of the more notable ones:
- Rotating Arcs, a Processing example
- Bouncing Ball, a Processing example
- Brownian Motion, a Processing example
- Dynamic FFT display from the Minim library
- Windblown sheets fromPixelFlow (wins the coolest award of all examples)
- Soccer game from AI for 2D Games library
Some cool tools
Processing comes with a few cool tools:
- G4P – GUI editor and code generator
- Shape Sketch – draw shape and code is generated for it
- Bezier Editor
- Git source code manager
Some cool modes
Processing modes allow you to change the base programming environment from a Java-based environment to another programming language or device environment.
The three most popular modes are:
- Python mode
- Android mode
For the Python mode, Processing uses the Jython language which is Python on Java. It’s a great mode to explore Python programming concepts with graphics and it allows you to incorporate those cool Java libraries into your Python sketch for even more fun. Python mode also comes with a small collection of examples that are a good resource for ideas and techniques.
For the Android mode, Processing switches to using the Android toolkit (installed separately), and while you still program in a Java context many of the graphical resources will be the Android variants. When you decide to run your sketch, processing will ask the Android toolkit to side-load the sketch to your Android device if attached to your computer.
Before you run off and start writing a billion-dollar Android application using Processing be aware that there is some setup work that must be to make this work.
Specifically, you must first install the Android toolkit so that the Android processing mode can find it and you must activate developer mode on your device which varies with the vendor. Instructions on how to do these steps are fragile and often change with new releases of the Android toolkit and with the version of processing you are using.
However, once you get it working it’s wonderful to play with. Alternatively, there is a variant of Processing that runs on the Android device itself which is much easier to configure and doesn’t require all the setup steps.
Other Android apps to check out:
- APDE: Android Processing Development Environment
- AIDE: Android Interactive Development Environment
and some cool iOS app variants to check out:
- Pythonista for Python on all platforms of iOS
- Codea for Lua on iPad but not on iPhone
Where Can I Learn More?
There are several websites to explore each with its own collections of tutorials, sketches, and libraries:
There are also some cool books on Processing by the creators:
- Getting Started with Processing by Casey Reas and Ben Fry
- Processing Handbook by Casey Reas and Ben Fry
And some cool books from other authors:
- The Sparkfun Guide to Processing by Derek Runberg
- Learning Processing by Daniel Shiffman
- Nature of Code by Daniel Shiffman
And even a couple on Python Processing:
- Getting Started with Processing.py by Allison Parrish
One Last Word…
Lastly, as they say on YouTube:
Like, comment and ***subscribe***
If you have any suggestions for future articles on Processing please let me know in the comments below and join PF now.