Skip to content

16. Interface and application programming

• Group assignment: Compare as many tool options as possible.

• Individual assignment: Write an application that interfaces with an input &/or output device that you made.

Group assignment


Josep Marti, Felipe Santos, Alberto Lopez, Diar Amin, Gustavo Abreu, Juan Carlos, Eva Blsakova.


Quickly comparing some softwares, IDEs, languages and platforms that we already used before we could discuss about which one is more oriented for which case.

Python is a really good programming language, has a big community and can manage many types of inputs and outputs. It has a lot of libraries, IDEs and documentation and a good learning curve. Usually works in any computer.

Processing handles inputs and outputs very well and can work with Arduino, graphics, sounds and interactive content. It has it’s own language but it works with Java language as well. You can usually run it on any computer, including Raspberry Pi.

Unity 3D is more graphic and more toward AR and VR, as the other ones, like Processing and Python, depends more on codes and works better with inputs and outputs. It can deal with 3D graphics better than the other ones with real time physics simulations and other features. The final program is usually a mobile application or a computer software.

Although they’re all really powerful tools we feel like they are different softwares for different tasks.

Individual assignment


I have already worked with Unity 3D in the past to make an APP that could transform tags into augmented reality models and with Processing to do some interfacing with the X-Box Kinect in an art installation. With Python I’ve made a Raspberry Pi Photobooth that thad some graphic interfacing to.

Interfacing Arduino and Processing

For the individual assignment I decided to use Processing because sounds really interesting mixing the powerful visual engine from Processing with the physical input from Arduino.

I followed this tutorial, Sparkfun explains how to do both way communications between the two platforms but in this case I’m sending data from the Arduino to the Processing sketch.

The setup was easy, only a matter of setting the Arduino code to send outputs through the serial port and setting the Processing sketch to receive this inputs through the serial port.

On the Arduino the simplest way to do it is with


So in this case I had a function on my Arduino Code that not only outputted the notes from the buzzer but also sent the Serial inputs to the Processing sketch:

void aeoliancap(void)

  if(readCapacitivePin(4) > capacitance)    {tone(outputpin, NOTE_AS4, notelength); Serial.println("AS4");}
  if(readCapacitivePin(12) > capacitance)    {tone(outputpin, NOTE_GS4, notelength); Serial.println("GS4");}
  if(readCapacitivePin(6) > capacitance)    {tone(outputpin, NOTE_FS4, notelength); Serial.println("GS4");}
  if(readCapacitivePin(8) > capacitance)   {tone(outputpin, NOTE_DS4, notelength); Serial.println("GS4");}
  if(readCapacitivePin(5) > capacitance)    {tone(outputpin, NOTE_G5, notelength); Serial.println("G5");}
  if(readCapacitivePin(13) > capacitance)   {tone(outputpin, NOTE_A5, notelength); Serial.println("A5");}


Processing Sketch

To use my FabLeo board and my Input shield I looked for a Processing example sketch for a Piano. I found this one on the Open Processing web site and rewrote it to receive Serial commands.

The GUI part of the code is really simples, it’s just a rectangle with a stroke as a visual response to the keys pressed, you define the size and the render mode of the window on the setup.

size(512, 200, P3D);

Daniel Shiffman is a great reference in Processing, he made a lot of tutorials in video and text. To learn a little about the render mode I went to his reference page:

“There are five render modes: the default renderer, P2D, P3D, PDF, and SVG.

‘Which render mode should I choose and why?’

Switching to P2D or P3D is advisable given one of the following scenarios: + You are drawing in 3D; + You want your sketch to run faster; + You want to use a particular graphic effect not available in default renderer.”

To define the colors in draw you can call for background and stroke with the values for the colors.

background(0); //bg color
  stroke(255); //outline
  MyNote newNote; //define
  float pitch = 0; //initial state
  for(int i = 0; i < out.bufferSize() - 1; i++) // drawing the animation
    float x1 = map(i, 0, out.bufferSize(), 0, width);
    float x2 = map(i+1, 0, out.bufferSize(), 0, width);
    line(x1, 50 + out.left.get(i)*50, x2, 50 + out.left.get(i+1)*50);
    line(x1, 150 + out.right.get(i)*50, x2, 150 + out.right.get(i+1)*50);

The rest of the code defines the buffer used for the audio samples and how they interact visually.

On Processing you have to use the Serial library to receive the Serial inputs from Arduino.

You’ll have to call it on void setup with:

String portName = Serial.list()[0]; //change the 0 to a 1 or 2 etc. to match your port
myPort = new Serial(this, portName, 9600);

For reading the values from the Arduino in the void draw is as:

void draw()
  if ( myPort.available() > 0)
  {  // If data is available,
  val = myPort.readStringUntil('\n');         // read it and store it in val
println(val); //print it out in the console

Then you can trigger other codes with the Serial inputs, an example could be taking a DHT temperature sensor value and showing on processing. That could be done with:

text(val, 520, 200);

Some other tips from the tutorial that I found interesting:

  • Make sure your baud rates match;
  • Make sure you’re reading off the right port in Processing - there’s a Serial.list() command that will show you all the available ports you can connect to;
  • Make sure that whatever character you’re buffering until is a character that you’re actually sending from Arduino;
  • If you want to send over a number of sensor values, it’s a good idea to count how many bytes you’re expecting so you know how to properly parse out the sensor data;

Digital Piano

My final object for this week is a digital piano that receives the inputs from a FabLeo and outputs musical notes.

In this case the Processing sketch is waiting for specific Serial inputs from the Arduino to transform it into sound with the help of a sound library from Processing.

if (val == "NOTE_AS4"){
newNote = new MyNote(262, 0.2);}
if (val == "NOTE_GS4"){
newNote = new MyNote(277, 0.2);}
if (val == "NOTE_FS4"){
newNote = new MyNote(294, 0.2);}
if (val == "NOTE_DS4"){
newNote = new MyNote(311, 0.2);}
if (val == "NOTE_G5"){
newNote = new MyNote(330, 0.2);}
if (val == "NOTE_A5"){
newNote = new MyNote(349, 0.2);

It means that every time that the Arduino send a “NOTE_AS4” signal through the serial port the sketch will play a note with the specific 262 pitch.

Running the sketch on my computer: