In this post I will connect a Processing sketch with an Arduino for the purpose of visualizing the input and output pins of the hardware board with graphics in Processing.
Getting to know Processing
I started out with a book by the Processing project founders:
It provides a very easy-to-get-started introduction to the subject. To learn more, the Processing IDE has a set of examples included that can be browsed, launched and modified from within the IDE. I really like this approach as it kickstarts you into learning by doing.
The Processing IDE is very light-weight and can be downloaded for Mac, Windows and Linux from processing.org.
A typical Processing sketch has a setup() method where you initialize your program, and a draw() method that is called repeatedly when the GUI is rendered and updated. A minimal Processing sketch that acts on mouse input can look like this:
This example (adapted from a built-in example in the IDE), draws a rectangle and a circle. The rectangle follows the mouse x-position and the rectangle moves in the other direction. The size of the objects are determined by the mouse y-position.
Working with 3D-objects is also straightforward. This sketch rotates a box and a sphere when the mouse is moved within the window:
Communicating with an Arduino UNO
A simple solution for interaction between a Processing sketch and the I/O pins of an Ardunio board is to use serial communication with the Firmata protocol over USB. By using the StandardFirmata sketch on the Arduino and the Processing Arduino Firmata library in Processing, it is possible to read and write pins via the USB connection from the Processing sketch.
You can e.g. read Arduino GPIO pin voltages (=binary or analog data from sensors) and visualize them in the Processing GUI or create an input control in Processing that sends data to a pin on the Arduino for controlling an actuator.
Reading analog input pins
To demonstrate reading analog input pins on the Arduino, I will connect potentiometers to some Arduino analog input pins and then read and visualize these values from a Processing sketch.
For the Arduino board I use three 500KΩ potentiometers for changing the input voltages to the input pins and one 4.7KΩ resistor to limit the current between 5V and ground. Here is a Fritzing drawing of my setup:
The Arduino runs the StandardFirmata sketch (available from File->Examples->Firmata in the Arduino IDE).
The main sketch in Processing contains a setup()- and a draw() method:
The program creates a list of objects that defines what pins should be used and what color to draw the corresponding bars with. In the setup() method the window size of the Processing GUI is set and the Arduino pins are set to input mode. In the draw() method, the voltages (0-5V) for each defined pin are fetched and this is scaled into the height of a filled rectangles on the screen. The voltage value and the pin name is drawn at the bottom of each bar.
In the main sketch I have used a helper class ArduinoIntegration that hides the details of the Arduino communication. The ArduinoIntegration class uses the Arduino Firmata Processing library to communicate via the Firmata protocol with the Arduino. The values from the analog pins are integers between 0 and 1024 which are then scaled to 0-5 to represent the actual voltages.
Note that the arduinoUSBDeviceName has to be set to the correct device name in your setup! On a Mac or Linux OS, use ls /dev before and after plugging in the USB cable from the Arduino to locate the device name to use.
The helper class implements an interface IArduinoIntegration and the main sketch uses this interface instead of the concrete class. This way it is possible to test the Processing sketch without a connected Arduino and instead use a fake ArduinoIntegration that e.g. just returns random voltages.
The Processing sketch in action looks like this:
When turning the potentiometers that are connected to the Arduino board, the bars and the voltage values are updated on the screen in realtime. Coincidentally, I happened to have just the right knob colors for my potentiometers :-).
Writing digital output pins
To demonstrate writing digital output pins on the Arduino, I will connect four LEDs to the digital outputs D8, D9, D10 and D11 on the Arduino and create a GUI with state switches in Processing that turns the LEDs on and off.
There are lots of great contributed libraries for Processing and there are several that provide nice looking and easy to use controls for your sketch. For my purpose, the GImageToggleButton in the G4P library by Peter Lager does the job well.
This sketch creates a list of pin objects with pin number, name and initial state. The pin objects have a toggle button and a label attached that are drawn on the screen (as the controls are connected to this, which is the PApplet Processing window object). When the toggle button is pressed, it changes state and an event handler is called that updates the pin object. In the draw() method, the pin objects are iterated over and the current state is sent to the Arduino via a helper class:
Running the program generates this GUI:
and with a connected Arduino you can turn pins D8-D11 on/off.
Getting to know Processing has been a pleasant experience. The simplicity of the IDE is a great strength for the beginner and the built-in and contributed libraries provide fantastic features that are bound to triggers creative ideas. I really like the concept of built-in examples and an integrated library downloader. With the possibility to connect physical devices like an Arduino, the Processing universe gets even bigger. So, let’s go innovating with Processing and have some fun!
The code from this blog post can be downloaded from GitHub: https://github.com/LarsBergqvist/processing_playground