Culture / Technology / Tutorials

Off-The-Shelf-Hacker: Enrich Your Project with a Processing Sketchbook

28 Nov 2015 9:29am, by

While the Processing language may have been designed for artists, it certainly has a place in the Off-The-Shelf-Hacker’s toolbox. Processing was designed to help visual artists code. It’ll run on a variety of hardware platforms including GNU/Linux notebooks, Windows machines and the Raspberry Pi.

It gets even better because the integrated development environment (IDE) is virtually the same as the Arduino IDE, so there are tons of useful and interesting libraries you can pull in for your projects. I find it to be especially useful for small, quick, proof of concept jobs, like creating an on-screen analog gauge or generating animated text and simple graphics.

We’ll explore using Processing for digital signage on the Raspberry Pi, in an upcoming article or two. Of course, Processing can be used for bigger things, with large data sets. Jer Thorp uses Processing for big-time data visualizations. I saw one of his keynotes and he puts on an awesome visual graphics show.

This week, we’ll take a quick look at the Processing language, see how it’s installed and investigate how it might be used in future projects.

Download And Install

Browse to the Processing download page and get the appropriate file for your machine. I used the 64-bit Linux version. I put it in my home directory and used tar, on the command line, to uncompress the file.

     rob% tar -xzvf processing-3.0.1-linux64.tgz

After tar finished I renamed the newly created Processing directory (processing-3.0.1) to “processing3” with the following command, so I could just type “cd proc*3” to get into the correct directory for running programs.

     rob% mv processing-3.0.1 processing3

Run Processing with the following. You can investigate creating a standalone program (with the code you write) under the “file” and “export application” menu items.

     rob% ./processing

Next click “file” and “Examples” to get a list of pre-written programs that demonstrate various features of Processing. Click the “Input” item and then select the “MousePress” program. You’ll see the code pop up in a new editing window.

Running a Processing program is straightforward. Click the right arrow (run) button at the top of the edit window and a new window will appear, on-screen. Position the cursor in the new window and you’ll see a series of black-colored crosses as you move the mouse around. Click and hold down the mouse button to change to white-colored crosses. Stop the program by clicking the button with the little square (stop), next to the run button.

Graphic #1, below, shows the Processing integrated development environment with the “mousepress” example code and running program window. Notice that the editor looks very similar to the Arduino IDE. I like the fact that you can switch from Processing to do graphical and quick programming jobs, to designing Arduino sketches with virtually the same environment and coding structures. Standardization across tools, is a plus for the physical computing hacker.

Processing Language screenshot

Graphic #1 – Processing Language screenshot

Here’s the code for the mousepress mini-application.

/**
 * Mouse Press. 
 * 
 * Move the mouse to position the shape. 
 * Press the mouse button to invert the color. 
 */

void setup() {
  	size(640, 360);
  	noSmooth();
  	fill(126);
  	background(102);
	}

void draw() {
  	if (mousePressed) {
    	stroke(255);
  	} else {
    	
	stroke(0);
	}
 
	line(mouseX-66, mouseY, mouseX+66, mouseY);
	line(mouseX, mouseY-66, mouseX, mouseY+66); 
}

We initialize some values at the beginning. Set the background and fill colors. Then, draw the crosses, using two line functions, as the mouse moves. If a mouse button is pressed, the color changes to white, as long as it’s held down. The draw() function runs as a loop.

Since, I’ve dabbled a bit in C, Processing makes total sense to me. Move over to the Arduino and it’s the same code, albeit with slightly different functions. The two environments share many functions.

How Can You Use It?

You’ll be amazed at the sophistication of some of the example programs. You can use mathematical functions to create graphs and geometry, network functions to grab data from remote machines (Arduinos, Raspberry Pi’s and the Web) and scientific functions to visually model real-world behavior, such as a bouncing spring.

The editor has a pretty good selection of labor saving features, such as the usual cut/paste, indent and debug tools. As I mentioned earlier, once you get a program working, it can be exported to run standalone on your notebook or Raspberry Pi. I like to develop on my Linux notebook and copy my work over to the Raspberry Pi, but that’s just my normal workflow. The Pi 2 is definitely capable of running the Raspberry Pi IDE, if you want to do everything there.

Next Steps

Be sure to travel through the Processing exhibition page to get an idea of the cool projects other developers are building. There must be a couple of hundred projects, with new ones added every month.

Next week we’ll go a little deeper into Processing and cover a few programs for animated text and shapes for digital signage. We’ll look at the code and I’ll cover running an app in standalone mode.

In the meantime, take a look at Processing and let me know what you think.

Feature Image: “Light Kinetics,” an interactive light installation that uses Processing, from Espadaysantacruz.


A digest of the week’s most important stories & analyses.

View / Add Comments