Interface & Application Programming - Processing
This week's assignment is to
Write an application that interfaces with the input device you make in week 11 - input devices. Use the Processing programming language to visualize the data from the sensor on your input device board.Get Processing
Download Processing
http://processing.org/downloadLook through the Processing site: http://processing.org/
Learn About Processing
Read through the tutorials and examples, to get an idea of what is possible. http://processing.org/learning/. Read through the sections listed below.Getting Started
http://processing.org/learning/gettingstarted/Processing Overview
http://processing.org/learning/overview/Drawing
http://processing.org/learning/drawing/Color
http://processing.org/learning/color/Serial
http://processing.org/reference/libraries/serial/index.htmlRandom
http://processing.org/reference/random_.htmlSmooth
http://processing.org/reference/smooth_.htmlExample Sketches for use with Input Boards
These sketches use the Processing serial libaries to read sensor input form your hello input devices boards. You can then modify the sketches to draw different pictures based on the input comming in from the sensor.
Run the processing examples below with your (working) input device board plugged in to your computer via FTDI cable. The input from the sensor will be visualized on the screen. Interact with the sensor and the visualization should change. If it doesn't change, we need to adjust some code values.
Try modifing the code with different shapes below the "//EXPERIMENT WITH THE VISUALIZATION BELOW" comment.
Example Sketch 1
Draws random colored lines across the screen, the height varries with the sensor inupt.
/**
* Serial Input to Randomly Colored Lines
*
* Read data from the serial port and changes the color of a lines drawing
* across the screen the height of the lines changes relative to the values
* recieved from the sensor.
*
* written by Shawn Wallace
* updated / commented by Anna Kaziunas France
*/
import processing.serial.*;
Serial serialPort; // Create object from Serial class
int col = 0; //starting point for the lines on the screen
void setup() {
size(1024, 1024); //set window size
background(0); //set background color to black
stroke(255); // set stroke to white
smooth(); //smooth out the lines
// I know that the first port in the serial list on my mac
// is always my FTDI adaptor, so I open Serial.list()[0].
// On Windows machines, this generally opens COM1.
// Open whatever port is the one you're using.
println(Serial.list());
serialPort = new Serial(this, Serial.list()[0], 9600);
}
void draw() {
//if there is data comming in from the serial port
while (serialPort.available () > 0) {
//set the variable height equal to the data comming in.
int height = serialPort.read();
//to draw rows across the screen in columns
//then wrap back to other side of the screen
col = col+1;
if (col > 1024) {
col = 0;
}
println(height); //print the values read from the serial port to the console
//if the serial values are greater than 10
if (height > 10) {
//draw a line that increases / decreases based on sensor output.
//adjusted for sensor values.
line(col, (height-125)+512, col, 512-height);
}
//EXPERIMENT WITH THE VISUALIZATION BELOW
//currently draws random strokes for the full range of color
stroke((int)random(255), (int)random(255), (int)random(255));
}
}
Example Sketch 2
Draws a circle that flashes random colors if certain sensor values are detected and stops flashing if the values change sufficiently.
/**
* Phototransistor Input to Circle
*
* Read data from the serial port and changes the fill and stroke color of a circle
* relative to the values recieved from the sensor.
* Circle fill and stroke are random, unless a sensor value below 200 is recived.
*/
//import serial library
import processing.serial.*;
Serial serialPort; // Create object from Serial class
int diameter= 500; // initial diameter of the circle
void setup() {
size(500, 500);
background(0);
stroke(255);
smooth();
// I know that the first port in the serial list on my mac
// is always my FTDI adaptor, so I open Serial.list()[0].
// On Windows machines, this generally opens COM1.
// Open whatever port is the one you're using.
println(Serial.list());
serialPort = new Serial(this, Serial.list()[0], 9600);
}
void draw() {
//filter out the 1,2,3,4 framing code numbers
while (serialPort.available () > 4) {
int lightIn = serialPort.read();
//if the sensor value is greater than 200
//(you may need to tweak this number to get the code to respond to your board)
if (lightIn > 200) {
//print in the sensor values to the console
println(lightIn);
//set the variable diameter to the sensor value
diameter = lightIn;
//use the sensor value to draw an ellipse
ellipse(250, 250, diameter, diameter);
//redraw the screen
redraw();
}
}
//EXPERIMENT WITH THE VISUALIZATION BELOW
//if the sensor values are less that 200, the elipse with random stroke and fill colors
stroke((int)random(255), (int)random(255), (int)random(255));
fill((int)random(255), (int)random(255), (int)random(255));
}
Example Sketch 3
See comments in the sketch.
/**
* Simple Read - Combined with Neil Gershenfeld's hello.light.45.py
* http://academy.cba.mit.edu/classes/input_devices/light/hello.light.45.py
* adjusted values pulled from Neil's python visualazition program to make
* sense of high and low readings.
*
* Read data from the serial port and change the color of a rectangle
* when the phototransistor connected to the hello light board is receiving
* varing levels of light.
* This example works with the Wiring / Arduino program that follows below.
*/
import processing.serial.*;
Serial myPort; // Create object from Serial class
int val; // Data received from the serial port
int sensorData; // Data recieved from the serial port with 1,2,3,4 framing numbers filtered out
int highVal; //high value read in from Neil's C code
int lowVal; //low value read in from Neil's C code
int actualVal; // adjusted sensor value
void setup()
{
size(200, 200);
// I know that the first port in the serial list on my mac
// is always my FTDI adaptor, so I open Serial.list()[0].
// On Windows machines, this generally opens COM1.
// Open whatever port is the one you're using.
String portName = Serial.list()[0];
myPort = new Serial(this, portName, 9600);
}
void draw()
{
if (myPort.available() > 0) { // If data is available
val = myPort.read(); // read it and store it in val
if (val > 4) { // Filter out the framing numbers: 1,2,3,4
highVal = myPort.read(); // read the high value sent from sensor and store it
lowVal = myPort.read(); // read low value from sensor it and store it
actualVal = 256 * (highVal + lowVal); // getting the actual value of the sensor
println("The actualVal is " + actualVal); //print to the screen
}
//EXPERIMENT WITH THE VISUALIZATION BELOW
background(255); // Set background to white
//READ VALUE BEING PRINTED IN
//ADJUST THE VALUE AFTER THE <
//If you are not getting changes in the visualization in response to changes in the sensor
if (actualVal < 1024) { // If the sensor value is less than a this number
fill(0); // set fill to black
}
else { // otherwise....
fill(204); // set fill to light gray
}
rect(50, 50, 100, 100);
}
}
If Your Input Board is Not Working - Try This
If you can't get an input board working, you can still experiment with Processing - try using the mouse as input instead. I recommend working with some of the "Drawing" category examples where you draw with the mouse. You have already looked through the drawing learning content: http://www.processing.org/learning/drawing/ Try modifying some of the "Drawing" examples on this page: http://www.processing.org/learning/topics/
For example, you could take this sketch: http://www.processing.org/learning/topics/pattern.html and modify it so that you are drawing squares shapes or lines detailed in the drawling learning content, instead of the ellipse that is drawn in the example program. That would be acceptable for completion. It doesn't have to be very complex, just show that you understand how to modify a simple program.
