Assignment 8: Arduino meets Processing

I really enjoyed playing with both Arduino and Processing this week! I’m excited to get on with the final project as I am envisioning all sorts of creative possibilities.

Anyhow, this week I tried to follow the class slides but found it all a bit confusing, so I took to the internet and was pleasantly surprised with what I found.

I was able to get Arduino talking to Processing in no time and learned some more coding along the way. I wanted to see if I could get the switch, potentiometer, or photo resistor to manipulate one of my ‘Fraag the Frog’ Processing sketches. I was successful in doing so.

First I set up a simple potentiometer configuration with Arduino and then after searching online I found a great resource for Arduino tutorials,, and took code from Jeremy’s excellent examples and implemented them into one of my past Processing sketches.



//DIGF 6B02 - Creation & Computation
//Assignment 8: Processing + Arduino
//by Harjot Bal

//'FRAAG the Frog' sketch meets Arduino via Serial Communication

//ARDUINO Serial Communication
//Code Reference: Jeremy Blum, see for excellent Arduino tutorials.

//Variable to define analog input location of potentiometer.
  int potentiometerPin = 0;

void setup()
  //Create serial object (9600 Baud rate)

void loop()
  //Parameters within which to define and map incoming potentiometer value from analog input.
    int val = map(analogRead(potentiometerPin), 0, 1023, 0, 255);
  //Print each value.
  //Delay time between each value.


Click here to view my Processing code (too long to paste, the code below includes ONLY snippets of the Serial Communication related code that I used)

Top of Program: 
 //Call to enable Serial Communication
    import processing.serial.*;
  //Variable to label the port from which the potentiometer's value is taken.
    Serial port;
  //Variable that signifies the potentiometer's value.
    float potentiometerSize = 0;
In void setup:
//Initialize the port from which the potentiometer's value is being taken, middle value (port location) changes everytime you plug Arduino into your computer or restart, so change this value accordingly.
      port = new Serial(this, "/dev/tty.usbmodemfd131", 9600);
    //Code that tells Processing not to take a new value until it is recognized by Arduino as a new value.
A new function:
void serialEvent (Serial port) {

  //The variable 'potentiometerSize' is equal to the imcoming serial/potentiometer value. Note: The 'readStringUntil('\n')' code tells Processing not to take a new value until it is recognized by Arduino as a new value.
    potentiometerSize = float(port.readStringUntil('\n'));

IMPORTANT: The code used in my sketch defines the ‘port’ by its location on my own laptop as found in the drop-down menu ‘Tools>Serial Port’ in Arduino. This port name will change each time you connect your Arduino board, this is the same deal if its done on another computer…so change this port name accordingly before running!

 Check out this video to see how it works!

Fraag the Frog meets Arduino


Now here’s a video of how I plan to debut my final project on completion… (some Arduino humour for you…lame, I know)

Project Opener

1 comment to Assignment 8: Arduino meets Processing

  • Lynn Ridley

    Harjot – thank you so much for posting Jeremy’s link. His tutorials really help. (love the opening music score for your project – we wait with great anticipation!)