Week 14 - Interface and Application Programming

Write an application that interfaces with an input and/or output device.

Design the interface with Processing

I decided to write an application that interfaces with the Hello Light I made in the input device assignment using the free Processing programming language to visualize the data from the sensor on the input device board via FTDI cable plugged in to my laptop.

Processing interface

 

It was the first time I used Processing so I began from a sketch I found in Fab Academy at AS220: http://academy.cba.mit.edu/content/tutorials/akf/interface_application_programming_processing.html

/**
* 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));
}

 

This example uses the Processing serial libaries to read sensor input form the hello input devices boards and draws a circle that flashes random colors if certain sensor values are detected and stops flashing if the values change sufficiently.

When I run the program from Processing to the board it worked perfectly when I interacted with the sensor and the visualization changed.

Interacting with the photoresistor of the Hello Light board.

 

I started to modify every value in order to learn wich every sentence means in this sketch, and so different pictures based on the input comming in from the sensor and were visualized on the screen.

Then I looked for a Processing Cheatsheet where find the name of the functions in order to make different shapes or effects in the application.

Processing cheat sheet: shapes

 

 

IMG 4129 from Fabricio Santos on Vimeo.

I think that Processing is a very good way to create Digital Art.

 

- - -

Files:

· Processing