Processing and Arduino are two of the most versatile and lowest entry points into programming. If you are unfamiliar with either, let me introduce you.

Processing (processing.org) is a Java-based programming language and IDE for simple visual output, something that is quite challenging in most languages, especially Java. It takes quite a bit of massaging to just get a pop-up to not look like garbage. As the official site explains:

Processing is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production.

Arduino is a C-based programming language, IDE, and micro-controller for simple physical computing and prototyping. The site explains:

Arduino is an open-source electronics prototyping platform based on flexible, easy-to-use hardware and software. It’s intended for artists, designers, hobbyists, and anyone interested in creating interactive objects or environments.

There are plenty of reasons to learn to use both Processing and Arduino independent of one another, and I encourage you to do so. This tutorial combines the two languages and capabilities to give an introduction both. This week we cover making them interoperable using a one-way serial connection and LED outputs. Next week’s tutorial will be about more secure connections (handshaking) and passing information in both directions.

Goal: To learn how to use serial communication to send information from Processing to Arduino.

Part One: Virtual light switch
Using a virtual button in Processing, an LED can be turned on and off using Arduino. This is done by sending one of two ASCII characters to Arduino through the serial port when a box registers a mouse hover over in the Processing canvas. When an ‘L’ is sent, the LED is off; when an ‘H’ is sent, the LED is on.

Part Two: Physical Mouse Speedometer
Based on the speed of mouse, a series of LEDs acts as a VU meter. This is done by sending various 5 ASCII (‘A’-'E’) characters corresponding to different speed levels. For an alternate project, this basic idea can actuate a Servo motor to produce a more precise speedometer.

What you will need:

Arduino, installed (get it here)
Processing, installed (get it here)
5 LEDs (preferably 2 green, 2 yellow, 1 red)
1 Breadboard
1 USB serial cable
Various wires to connect Arduino, LEDs, and breadboard

Part One

Processing

import processing.serial.*; //This allows us to use serial objects

Serial port; // Create object from Serial class
int val; // Data received from the serial port

void setup()
{
    size(800, 600);
    println(Serial.list()); //This shows the various serial port options
    String portName = Serial.list()[1]; //The serial port should match the one the Arduino is hooked to
    port = new Serial(this, portName, 9600); //Establish the connection rate
}

void draw()
{
    background(255);
    if (mouseOverRect() == true)
    { // If mouse is over square,
        fill(150); // change color and
        port.write('H'); // send an H to indicate mouse is over square
    }
    else
    { // If mouse is not over square,
        fill(0); // change color and
        port.write('L'); // send an L otherwise
    }
    rect(50, 50, 100, 100); // Draw a square
}

boolean mouseOverRect()
{ // Test if mouse is over square
return ((mouseX >= 50) && (mouseX = 50) && (mouseY }

Arduino

#define PIN13 13 //define the pin (this a native declaration to C).
char val; // Data received from the serial port

void setup()
{
     pinMode(PIN13, OUTPUT); // Set pin as OUTPUT
     Serial.begin(9600); // Start serial communication at 9600 bps
}

void loop()
{
    if (Serial.available())
    { // If data is available to read,
        val = Serial.read(); // read it and store it in val
    }

    if (val == 'H')
    { // If H was received
        digitalWrite(PIN13, HIGH); // turn the LED on
    }
    else
    {
        digitalWrite(PIN13, LOW); // Otherwise turn it OFF
    }
}

Part Two

Processing

import processing.serial.*; //This allows us to use serial objects

Serial port; // Create object from Serial class
int val; // Data received from the serial port

void setup()
{
    size(800, 600); //define the size of the canvas
    println(Serial.list()); //This shows the various serial port options
    String portName = Serial.list()[1]; //The serial port should match the one the Arduino is hooked to
    port = new Serial(this, portName, 9600); //Establish the connection rate
}

void draw()
{
     background(255); // establish the background color

     char speed = 'E'; // instantiate a character variable to be passed into the serial port
     // using the mouseSpeed function, break down the speeds into discrete categories
     if (mouseSpeed()>45)
     {
        speed = 'A'; // fastest category (45 pixels distance from previous location)
      }
      else if (mouseSpeed()>30)
      {
        speed = 'B';
      }
      else if (mouseSpeed()>15)
      {
        speed = 'C';
      }
      else if (mouseSpeed()>5)
      {
        speed = 'D';
      }
      else
      {
        speed = 'E';
      }
      background(mouseSpeed());
      println(speed);
      port.write(speed);
}

int mouseSpeed()
{
     return((int)(abs(mouseX-pmouseX)+abs(mouseY-pmouseY))); //check the current mouse position against the previous mouse position
}

Arduino

#define PIN13 13 //define the pins
#define PIN12 12
#define PIN11 11
#define PIN10 10
#define PIN9 9

char val; // Data received from the serial port

void setup()
{
    pinMode(PIN13, OUTPUT); // Set pins as OUTPUT
    pinMode(PIN12, OUTPUT);
    pinMode(PIN11, OUTPUT);
    pinMode(PIN10, OUTPUT);
    pinMode(PIN9, OUTPUT);

    Serial.begin(9600); // Start serial communication at 9600 bps
}

void loop()
{
    if (Serial.available())
    { // If data is available to read,
        val = Serial.read(); // read it and store it in val
    }

    switch(val)    //interpret values sent through serial port into physical interface (VU meter)
    {
        case 'A': //if 'A' is received then turn all lights on LEDs
            digitalWrite(PIN13, HIGH);
            digitalWrite(PIN12, HIGH);
            digitalWrite(PIN11, HIGH);
            digitalWrite(PIN10, HIGH);
            digitalWrite(PIN9, HIGH);
            break;
        case 'B':  //if 'B' is received then turn on the first four LEDs
            digitalWrite(PIN13, HIGH);
            digitalWrite(PIN12, HIGH);
            digitalWrite(PIN11, HIGH);
            digitalWrite(PIN10, HIGH);
            digitalWrite(PIN9, LOW);
            break;
        case 'C':  //if 'C' is received then turn on the first three LEDs
            digitalWrite(PIN13, HIGH);
            digitalWrite(PIN12, HIGH);
            digitalWrite(PIN11, HIGH);
            digitalWrite(PIN10, LOW);
            digitalWrite(PIN9, LOW);
            break;
        case 'D': //if 'D' is received then turn on the first two LEDs
            digitalWrite(PIN13, HIGH);
            digitalWrite(PIN12, HIGH);
            digitalWrite(PIN11, LOW);
            digitalWrite(PIN10, LOW);
            digitalWrite(PIN9, LOW);
            break;
        default: //if 'E' is received then turn on the first LED
            digitalWrite(PIN13, HIGH);
            digitalWrite(PIN12, LOW);
            digitalWrite(PIN11, LOW);
            digitalWrite(PIN10, LOW);
            digitalWrite(PIN9, LOW);
            break;
    }
}