Some Notes On Getting Started With Processing

In lab 4 we ask you to once again embark on the process of learning a new programming language. For a non-programming course this might seem like quite a lot of programming. My hope is to ease this worry here. Processing is actually quite similar to the Arduino programming environment and much of what you know will transfer over quite well.

If you have not done so already please consider downloading Processing so that you might follow along.

A Simple Processing Program

Let’s start by taking a look at a simple Processing program:

void setup() {
  size(480, 120);

void draw() {
  if (mousePressed) {
  } else {
  ellipse(mouseX, mouseY, 80, 80);

If we replace draw above with loop this looks identical to an Arduino program. It so happens that it operates the same way as well. In Processing, like Arduino, the setup function runs once when the program starts and then draw is run over and over again until the program terminates.

This example program is from the Processing Getting Started tutorial. You might try running this code yourself at this point and seeing what it does.

To understand how this code works we can imagine that we are programming a painting. In setup we select a canvas that is 480 pixels wide and 120 tall with a call to size(480, 120). We then paint that canvas in draw.

draw starts by checking if the mouse is pressed. The mousePressed variable is set by Processing before every call to draw. It is true if the user’s mouse is pressed and false otherwise.

Depending on on the status of the mouse we then select what color we would like to draw with our paintbrush with a call to fill. In this case fill(0) means that we would like to use the color white and fill(255) means that we would like to use the color black. This maps pretty closely to the values you passed to analogWrite in your Arduino programs.

Having selected a paint color and canvas we can paint a circle on the canvas with a call to the ellipse function. In our call we take advantage of mouseX and mouseY which Processing populates in much the same way as mousePressed with the x and y coordinates of the mouse.

The Processing Program In The Lab

In the lab you are provided with an example program to visualize the values being read from one of your analog input pins. I have reproduced it below.

import processing.serial.*;
import cc.arduino.*;

Arduino arduino;

int ledPin = 13;
int potPin = 0;

int ledBrightness = 0;
int potVal = 0;

void setup() {
  size(500, 500);

  arduino = new Arduino(this, Arduino.list()[5], 57600);

  arduino.pinMode(ledPin, Arduino.OUTPUT);

void draw() {
  int potVal = arduino.analogRead(potPin);
  int ledBrightness = int(map(potVal, 0, 1023, 0, 255));
  arduino.analogWrite(ledPin, ledBrightness);

  fill(255, 255, 255);
  ellipse(width/2, height/2, potVal/3, potVal/3);

The mechanics of this program are the same as the one above with a couple notable exceptions.

import processing.serial.*;
import cc.arduino.*;

These lines tell Processing that we would like to use its serial and Arduino libraries for our code. You can safely ignore the details of how this works. If you would like to learn more though here is some documentation.

arduino = new Arduino(this, Arduino.list()[5], 57600);

This line creates a new Arduino object. Objects are a bit of a nebulous concept in programming but you can think of them as a way to store data and functions to operate on that data in the same location. In this case our Arduino object is storing information about its connection to the Arduino and providing methods to manipulate that state.

You will likely need to use a different value in place of [5]. On my machine the Arduino was the 6th item in the output from Arduino.list(). As lists are zero indexed this corresponds to the 5th index.

background(0, 0, 0);

Unlike the previous example where we wanted to leave past circles drawn on the screen around for artistic effect in this case we want to clear them so that they don’t get in the way of our current drawing. We do this by painting a black background at the beginning of each call to draw.

Other than those three things the hope is that much of this code is familiar to you. Good luck on your labs!