The first thing you need to do is go to https://processing.org to download the Processing integrated development environment, or IDE (which is where you write the code). After you download it, the Processing IDE unzips as an application. You can install that wherever you install your applications and then open it up. It should look something like Figure 9-1.

Figure 9-1. Processing’s IDE

The play button compiles and runs the sketch; the stop button stops the sketch; the debug button opens up a debugging screen; the Java button lets you switch modes (we’ll get to the modes part soon); the black part at the bottom is where you see any console outputs; and the second tab is where any errors will show up when you run your sketch.

There are two main parts to a sketch: the setup part and the draw loop. Between the curly brackets following void setup(), you define some characteristics of your sketch, such as how big the output window will be and the background color of the sketch. In the curly brackets following void draw() is where you put the majority of the instructions for the sketch. This is called the draw loop, because Processing executes the instructions (code) in the draw loop from beginning to end, and then it loops back around to the beginning and does the same thing. This happens about 60 times per second. In Figure 9-2, the setup part runs once, and then the draw part runs over and over again.

Figure 9-2. Structure of basic sketch

Processing is a visual-oriented language, so every time you run a sketch in it, there’s an output window that pops up to show you what’s going on, as demonstrated in Figure 9-3. In the preceding example, we defined the size of this output window in the setup section as 500 pixels wide by 400 pixels in height, with a background of white, and drew a line in the draw loop.

Figure 9-3. Screenshot of basic sketch with output window

Figure 9-4 shows that for a lot of the code instructions you’ll be writing, there are two main parts: the function (line, in this case), and the arguments (the numbers), which are specifically structured pieces of information that you type in the parentheses.

Figure 9-4. Diagram of line instructions

Figure 9-5 presents a diagram for line, which draws a line between two points. The four arguments are the x-coordinate for the first point; the y-coordinate for the first point; and then the x-coordinate for the second point; and, finally, y-coordinate for the second point. In the example, those values are 20, 30, 350, and 300.

When drawing things to the screen, everything (two-dimensional at least) is drawn on an x–y pixel grid. As Figure 9-5 illustrates, the first pixel in the upper-left corner is (0,0), the one to the right of it is (1,0), and the one below it is (0,1). When you’re drawing something, it helps to think of its position as follows:

(“number of pixels from the left side,” “number of pixels from the top)

Figure 9-5. Diagram of pixel grid

In the preceding example, we drew a line that begins at a grid position 20 pixels from the left side and 30 pixels from the top, and it ends the line at 350 pixels from the left side and 300 pixels from the top (Figure 9-6).

Figure 9-6. Points of the line with pixel locations labeled in the output window

Every time the draw loop is run, it draws what you define on top of the previous layer (Figure 9-7). In the example, the first instruction of the draw loop is a background color that gives the impression of a clean slate every time. If that weren’t there, you’d see everything the sketch has ever drawn to the screen.

Figure 9-7. Diagram of layers

All of the functions you can use in Processing are listed in the reference page on the Processing website. It’s incredibly useful and shows you how to use each function with a short chunk of example code. You can also highlight a function in your sketch, right-click the highlighted function, and select “Find In Reference,” which will take you to that function’s page in the reference. There are also a large number of examples. To access them, on the menu bar, click file, and then click examples. These are really helpful when you’re trying to do something and you need to see how particular commands and functions work.

Processing Libraries are really useful ways to extend the functionality or make some advanced tasks a little easier. To add a library to your sketch, on the menu bar, click the Sketch drop-down menu, and then select Import Library. There are a handful of libraries that ship with Processing. Also on the menu bar, you can click Add Library, which lets you add all kinds of great third-party libraries. I suggest starting out with Andreas Schlegel’s controlP5—a great graphical user interface library for Processing.

Android mode is one of my favorite parts of Processing. You can use it to export your processing sketch to an Android device. To switch to this mode in the upper-right corner of the IDE, click Java, click Add Mode, and then select Android mode. Then, plug in an Android device to your computer, and when you run the sketch, it will run on an Android device! I’ll get a little more in depth with this toward the end the chapter.

There are seemingly endless resources out there to help you learn Processing. Of course, everyone learns in different ways, but there are a couple resources that really helped me become comfortable with Processing. First is just going through the examples that ship with it. They’re small, complete sketches that explain a lot of what Processing can do. I’d start by just clicking through a few of those to get an idea of what’s going on. The second resource is anything that comes from Daniel Shiffman, an amazing creative coder and professor in NYU’s ITP program. Daniel’s “Orange Book,” Learning Processing, is the primary way I was able to learn Processing so quickly, and I still reference it from time to time when I need to do something that I haven’t done in a while. Additionally, Daniel has an incredibly comprehensive video series hosted on his Vimeo account at https://vimeo.com/shiffman.

At the top of the Arduino Uno that you can see in Figure 9-9, there’s a place to plug it in to a power outlet, and the serial port with which you plug it in to your computer. The rest of the Arduino board comprises a series of contact points called pins. In the Power and Ground section above the pins are labeled GND, 3.3 V, and 5 V. You use these pins to provide power for a sensor that you plug in to the board. Below the Power and Ground pins are the analog pins, which are labeled A0 through A5. This is where you can plug in analog sensors. These pins are input only; the board doesn’t have analog output. On the opposite side are the digital pins, they’re labeled 0 through 13 and can function as both input and output ports. You can use the digital pins with the tilde (~) next to them for what’s called pulse width modulation, which is when you mimic an analog output by turning the digital pin on and off so quickly that it seems like an analog output (e.g., it turns an LED on and off so quickly that it looks like it’s dimming).

Figure 9-8. The Arduino Uno, the most common Arduino board

Figure 9-9. Inputs and outputs of the Arduino board

I’m using the Arduino Uno in my example because it’s the most common Arduino board. But, one of the wonderful things about open source hardware is that you can make your own boards! This means that they come in all shapes and sizes, as depicted in Figure 9-10, with different built-in capabilities. I’ll go through a few of these toward the end of the chapter.

Figure 9-10. A variety of different Arduino boards

The Arduino IDE (Figure 9-11) is very similar to that of Processing. There are the buttons at the top that start the code, and there is a console output on the bottom. The big differences are that Arduino has more buttons for starting a new sketch, opening an existing sketch, and saving the current sketch. You’ll also notice that there’s no button to stop the code. This is because after the code is loaded on to the Arduino board, it will keep running over and over again as long as the board has power—it doesn’t need to be still plugged in to the computer.

Figure 9-11. The Arduino IDE

Similar to the structure of the sketch for Processing, the Arduino sketch has two main parts: the setup part and the loop (Figure 9-12). Between the curly brackets following void setup(), you define some characteristics of your sketch, such as stating what certain pins will be used for. In the curly brackets following void loop() is where you put the majority of the instructions for the sketch. Just like Processing, it executes the instructions (code) in the draw loop from beginning to end, and then loops back around to the beginning and does the same thing over and over again.

Figure 9-12. Basic Arduino sketch structure

The code itself is also structured similarly to Processing with a function, arguments in parentheses, and semicolon line endings. In this line shown in Figure 9-13, we’re configuring digital pin number 11 to turn on.

Figure 9-13. Diagram of line instructions

Sensors are obviously a huge part of wearable devices, so before we get more detailed about how Arduinos work, let’s talk about what sensors actually do. Generally, sensors take some kind of physical input like touch, motion, light waves, or audio waves, and converts those signals to an electrical signal.

As Figure 9-14 shows, there are two main types of sensor outputs that the Arduino can receive: digital signals and analog signals. Digital signals are either on or off (represented in code by a 1 or a 0, or high signal or low signal), kind of like a light switch.

Figure 9-14. Digital sensor input and output

Analog signals (Figure 9-15) contain a lot more information. Analog sensors that work with the Arduino usually output an electrical signal somewhere between 0 and 5 volts. Then the Arduino converts that input to a digital signal that returns a value between 0 and 1,023. In short, digital sensors are either on or off (two states), and analog sensors have 1,024 different potential states (0 is also a potential state, thus the total of 1,024).

Figure 9-15. Analog sensor inputs and outputs

For an incredibly short (only two lines of code!) self-contained Arduino example, we’re going to take an analog sensor and make it dim an LED. Figure 9-16 shows what it’s going to look like.

Figure 9-16. Everything hooked up

For this example, I’m using my favorite analog sensor, a MaxSonar EZ1 by Maxbotix. The EZ1 is an incredibly simple ultrasonic range finder. It sends out ultrasonic audio waves, listens for them to bounce back off of something, and then converts that distance to a voltage between 0 volts and 5 volts. I plugged the GND pin on the sensor to the GND pin on the Arduino, and the +5 pin on the sensor to the 5 V power to provide power to the sensor. I then plugged the AN pin on the sensor to the A0 pin on the Arduino.

To dim an LED, you need to plug it in to a PWM pin with the tilde (~) symbol next to it on the board. For this example, I took a white LED and plugged the long lead into the 11 pin and the short lead in to the GND pin that’s right next to the 13 pin.

The code is incredibly simple:

void setup() {
  pinMode(11, OUTPUT);
}

void loop() {
  analogWrite(11, analogRead(A0)/4);
}

The first line of code in the setup section declares that we’re going to use pin number 11 as an output.

The second line of code in the loop section instructs the Arduino to write an analog signal to pin number 11 by using the analogWrite function. The first argument for this function is 11, which specifies that pin number 11 is the one to which to write. The second argument, analogRead, is also a function that instructs the Arduino to take the signal from the A0 pin which is the pin that we’ve used for the sensor. The signal is going to come in to the Arduino as a number between 0 and 1,023, so I divided that number by 4 in order to map it to the PWM pin, which takes an input between 0 and 255.

If everything is hooked up properly, you’ll be able to move your hand closer and further away from the sensor to make the LED become brighter and dimmer, respectively.

Similar to Processing, there are many resources out there that you can use to learn all about Arduino. A great start is definitely to poke around with the examples that come with the IDE and maybe pick up a starter kit. I always suggest getting everything from https://www.adafruit.com because it has the most well-constructed learning material for everything it sells. Another great resource is the O’Reilly book Getting Started With Arduino, which is very helpful when you’re first starting out.

The first step is to load the Firmata sketch on to your Arduino. Firmata is a collection of software libraries for both Processing and Arduino that lets them interface with each other. Firmata ships with the Arduino IDE and you can find it by going to the File menu in the Arduino IDE, selecting Examples, and then, in the “Examples from Libraries” section, select Firmata and click StandardFirmata, as illustrated in Figure 9-17.

Figure 9-17. Finding Firmata

This will bring up the Standard Firmata sketch. Load that on to your Arduino, and then close the Arduino IDE, (if you don’t close out of the Arduino IDE, Processing won’t be able to communicate with your board).

Now, you need to download the Firmata library for Processing. To do so, go to the Sketch menu in Processing, click Import Library, and then click Add Library (Figure 9-18).

Figure 9-18. Firmata in Processing

This opens up the Contribution Manager. Simply click the library with the title of Arduino (Firmata), and you’re good to go.

Now we’re going to open a new sketch in Processing. The first thing we’re going to do is import the Firmata library and the Serial library (the Serial library ships with the IDE). To do this, write the following code before the setup section:

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

Next, we need to set up the Arduino and make a variable to store the sensor information:

Arduino arduino;
float potRead = 0;

Then it’s time for the setup section. The code that follows sets the size of the sketch to 300 pixels wide and 300 pixels tall, and the background of the sketch to white:

void setup() {
  size(300, 300);
  background(255);
  fill(255, 0, 0);

  for (int i = 0; i <= Arduino.list().length-1; i++)
  println(i + " - " + Arduino.list()[i]);

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

  for (int i = 0; i <= 13; i++)
    arduino.pinMode(i, Arduino.INPUT);
}

After you run the sketch for the first time, in the console output window beneath the text editor, you’ll see a list of ports that looks something like Figure 9-19.

Figure 9-19. Console output

You now need to determine which one of these ports are connected to your Arduino. It’s going to be one of the ports labeled usbmodem, and you’re probably going to need to go back and forth a few times picking different ones. In the preceding code example, look for the line that has REPLACE, delete that word, and replace it with the number in the list in Figure 9-19 that corresponds to the port connected to Arduino—in this example, the port is /dev/tty.usbmodem1411, so I replaced the word REPLACE with 5.

Now for the draw loop. It comprises only two lines. The first line draws the background every time it goes through the loop, which basically clears the slate for each layer. The second line draws a circle with the ellipse() function. The ellipse() function takes four arguments; the x-position of the center of the circle, the y-position of the center of the circle, the width of the circle, and the height of the circle.

We’re drawing the circle at the dead center of the sketch, at 150 pixels from the left side and 150 pixels from the right side. For the width and height of the circle, we’re reading the 0 analog pin from the Arduino. Here’s the code to do that:

void draw() {
  background(255);

  ellipse(150, 150, arduino.analogRead(0), arduino.analogRead(0));
}

If everything is working properly, when you move your hand in front of the sensor, the circle should grow larger; when you move your hand away from the sensor, the circle should become smaller.

Ketai is an extremely useful Processing library that’s built for Android Mode. Ketai gives you access to everything on the phone, such as the accelerometer, gyroscope, light sensor, camera, and microphone; but it also has some other useful things like data storage, computer vision (face detection), location information, and internet connectivity.

Android watch, in this instance, is not talking about Android Wear, but when trying to prototype a smartwatch, I found out that you can actually find watches that run full Android. I can’t really think of why someone would want a watch that runs Android, but they definitely work really well with Processing Android Mode.