Interface and Application Programming

Link to class: Interface and Application Programming

This weeks assignment was to write an application that interfaces with an input &/or output device. I used the hello.light board I build on past assignment and played with Processing to build and interface. I had a lot of trouble on understanding the language from Processing, but eventually, I finally managed to pull out a simple interface that interacted with the phototransmitor data that was send.

On Saturday we had a small class with Satoshi, who explained some of the basics of Programming. Either way, since this is completely different from what I do for a living, I was lost. The main problem was using the Serial command to interact with what ever interface I had designed.

** If it is of any help to anyone, Proccesing for Windows 64bits doesn't allow for Serial command. For this you need to download the 32bits version and it will run smoothly **

Finally, with the help of Ana Kaziunas' tutorial, I understand how to properly use the Serial, modifying a design I found over at Processingjs.org.

The design in pretty simple: A lot of consecutive lines appear on the screen. The values I get from the sensor varies from 0 to 255. What I've done is assigning a value to a different color. For example, for values bigger than 10, I have assigned the color Yellow; for values bigger than 80, I have assigned the color Red; and for values bigger than 150 I have assigned the color Blue.

So, when the sensor recieves a huge amount of light, the lines turn yellow, when it recieves a medium amount of light, the lines turn red; and when it recieves little or no light at all, the lines turn blue.

I added a alpha value to the lines, so they appear as painted with a brush.

My intention with this interface is to relate the values from the light sensor to different colors and generate some sort of interactive abstract painting.

Here is the final result.

And here is my code:

import processing.serial.*;

// Pressing Control-R will render this sketch.

int i = 0;
Serial serialPort;

void setup() { // this is run once.

// set the background color
background(255);

// canvas size
size(300, 300);

// smooth edges
smooth();

// limit the number of frames per second
frameRate(20);

// set the width of the line.
strokeWeight(12);

// 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()[1], 9600);
}

void draw() { // this is run repeatedly.

while (serialPort.available () > 10) {
int height = serialPort.read();
// set the main color
// in this case is yellow
stroke(255, 218, 3, 100);
println(height);

// when the sensor throws a value over 80
// the stroke color changes to red
if (height > 80) {
stroke(255, 3, 3, 100);
}
// when the sensor throws a value over 150
// the stroke color changes to blue
if (height > 150) {
stroke(3, 8, 255, 100);
}
}
// draw the line
line(i, 0, random(0, width), height);

// move over a pixel
if (i < width) {
i++;
} else {
i = 0;
}
}