Hacking a Processing Sketch for Firmata (Firmata 101)

by Paul Badger

What you should have done so far.

  • Unpacked and installed Firmata on your Freeduino*
  • Quit the Arduino IDE
  • Unpacked and installed the Arduino library in Processing/libraries.

Open the Processing Sketch "Examples -> Topics -> Fractals and L-Systems -> Tree

Run the code and try out the sketch - Very groovy, no? Look over the code and see where the mouse input gets into the sketch.

float a = (mouseX / (float) width) * 90f;

This might be a good place to intervene to hook the sketch up to outside input.

Here's the code for the whole sketch

/**
 * Recursive Tree
 * by Daniel Shiffman.  
 * 
 * Renders a simple tree-like structure via recursion
 * Branching angle calculated as a function of horizontal mouse location
 */

float theta;   
void setup() {
  size(200,200);
  smooth();
}

void draw() {
  background(0);
  frameRate(30);
  stroke(255);
  // Let's pick an angle 0 to 90 degrees based on the mouse position
  float a = (mouseX / (float) width) * 90f;
  // Convert it to radians
  theta = radians(a);
  // Start the tree from the bottom of the screen
  translate(width/2,height);
  // Draw a line 60 pixels
  line(0,0,0,-60);
  // Move to the end of that line
  translate(0,-60);
  // Start the recursive branching!
  branch(60);

}

void branch(float h) {
  // Each branch will be 2/3rds the size of the previous one
  h *= 0.66f;

  // All recursive functions must have an exit condition!!!!
  // Here, ours is when the length of the branch is 2 pixels or less
  if (h > 2) {
    pushMatrix();    // Save the current state of transformation (i.e. where are we now)
    rotate(theta);   // Rotate by theta
    line(0,0,0,-h);  // Draw the branch
    translate(0,-h); // Move to the end of the branch
    branch(h);       // Ok, now call myself to draw two new branches!!
    popMatrix();     // Whenever we get back here, we "pop" in order to restore the previous matrix state

    // Repeat the same thing, only branch off to the "left" this time!
    pushMatrix();
    rotate(-theta);
    line(0,0,0,-h);
    translate(0,-h);
    branch(h);
    popMatrix();
  }
}


Now use "Open..." to open the example in the Arduino library (in Processing).
Processing Folder -> libraries -> arduino -> examples -> arduino_input -> arduino_input.pde

Here's the code:

import processing.serial.*;

import cc.arduino.*;

Arduino arduino;

color off = color(4, 79, 111);
color on = color(84, 145, 158);

void setup() {
  size(470, 280);
  arduino = new Arduino(this, Arduino.list()[0], 57600);

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

void draw() {
  background(off);
  stroke(on);

  for (int i = 0; i <= 13; i++) {
    if (arduino.digitalRead(i) == Arduino.HIGH)
      fill(on);
    else
      fill(off);

    rect(420 - i * 30, 30, 20, 20);
  }

  for (int i = 0; i <= 5; i++) {
    ellipse(280 + i * 30, 240, arduino.analogRead(i) / 16, arduino.analogRead(i) / 16);
  }
}


Without explaining the graphics in this sketch (I'll leave that to you, dear reader) Let's see what is necessary to get Processing talking to the Arduino via Firmata.

First there are some import lines to reference the arduino and serial libraries, and a data type definition, these three lines are necessary somewhere at the top of the sketch.

import processing.serial.*; // reference the serial library

import cc.arduino.*; // reference the arduino library

Arduino arduino; // create a variable arduino of the Arduino data type

Then in the setup function this line is required

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

Let's paste them into the tree sketch. Look over the tree sketch below with the new lines in them. [Sorry this wiki formatting is going to be ugly].

Finally we add an Arduino library function, arduino.analogRead(0), to replace the input from the mouse.

Just hook up a potentiometer or some other variable voltage input to analog pin 0 on your Freeduino and you've got the sketch moving with Arduino power.

Here's the code, with red highlighting for lines that have been changed or added.

 /*
* Recursive Tree
* by Daniel Shiffman 
*
* Renders a simple tree-like structure via recursion
* Branching angle calculated as a function of horizontal mouse  location
*/ 

import processing.serial.*; // reference the serial library

import cc.arduino.*; // reference the arduino library

Arduino arduino; // create a variable arduino of the Arduino data type

float theta;
void setup() {
  size(200,200);
  smooth(); 

println(Serial.list()); // List all the available serial ports:

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

}

void draw() {

  background(0);
  frameRate(30);
  stroke(255);
  // Let's pick an angle 0 to 90 degrees based on the mouse position

/* float a = (mouseX / (float) width) * 90f; // original line */

float a = (arduino.analogRead(0) / (float) width) * 90f;

 // Convert it to radians
  theta = radians(a);
  // Start the tree from the bottom of the screen
  translate(width/2,height);
  // Draw a line 60 pixels
  line(0,0,0,-60);
  // Move to the end of that line
  translate(0,-60);
  // Start the recursive branching!
  branch(60);

}

void branch(float h) {
  // Each branch will be 2/3rds the size of the previous one
  h *= 0.66f;

  // All recursive functions must have an exit condition!!!!
  // Here, ours is when the length of the branch is 2 pixels or less
  if (h > 2) {
    pushMatrix();    // Save the current state of transformation (i.e. where are we now)
    rotate(theta);   // Rotate by theta
    line(0,0,0,-h);  // Draw the branch
    translate(0,-h); // Move to the end of the branch
    branch(h);       // Ok, now call myself to draw two new branches!!
    popMatrix();     // Whenever we get back here, we "pop" in order to restore the previous matrix state

    // Repeat the same thing, only branch off to the "left" this time!
    pushMatrix();
    rotate(-theta);
    line(0,0,0,-h);
    translate(0,-h);
    branch(h);
    popMatrix();
  }
}

Note that the math is not the same as the original mouse action, but I'll also leave this to the reader to work out - some very interesting things happen with the tree anyway.

Now try out the other Firmata examples and functions and you'll be up and running with Firmata in no time.

"*" Freeduino here is used to mean the entire set of Arduino and Arduino-compatible hardware.

Share