by Paul Badger
What you should have done so far.
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.