Week 5-Processing is cool!

This week, Gordie and I braved the strange new world of Processing. Before getting any visuals, we tackled the initial stage of the assignment, which was recreating the earlier lab in which we programmed the arduino to receive input from a potentiometer that was connected to it. The result was a series of crazy symbols "garbage data" which can been seen here:

Click To Play

Here is the code:

int analogPin = 0;
int analogValue = 0;

void setup()
{
// start serial port at 9600 bps:
Serial.begin(9600);
}

void loop()
{
// read analog input, divide by 4 to make the range 0-255:
analogValue = analogRead(analogPin);
analogValue = analogValue / 4;
Serial.print(analogValue, BYTE);
// pause for 10 milliseconds:
delay(10);
}

Here are our first attempts at using processing to graph serial communication with the potentiometer:

Click To Play

Here’s the code, with appropriate props given to the great Tom Igoe:

/*
Sensor Graphing Sketch

This sketch takes raw bytes from the serial port at 9600 baud and graphs them.

Created 20 April 2005
Updated 5 August 2008
by Tom Igoe
*/

import processing.serial.*;

Serial myPort;        // The serial port
int graphXPos = 1;    // the horizontal position of the graph:

void setup () {
size(400, 300);        // window size

// List all the available serial ports
println(Serial.list());
// I know that the fisrt port in the serial list on my mac
// is usually my Arduino module, so I open Serial.list()[0].
// Open whatever port is the one you're using.
myPort = new Serial(this, Serial.list()[0], 9600);

// set inital background:
background(48,31,65);
}
void draw () {
// nothing happens in draw.  It all happens in SerialEvent()
}

void serialEvent (Serial myPort) {
// get the byte:
int inByte = myPort.read();
 // print it:
println(inByte);
// set the drawing color. Pick a pretty color:
stroke(123,128,158);
// draw the line:
line(graphXPos, height, graphXPos, height - inByte);

// at the edge of the screen, go back to the beginning:
if (graphXPos >= width) {
 graphXPos = 0;
 // clear the screen:
 background(48,31,65);
}
else {
 // increment the horizontal position for the next reading:
 graphXPos++;
}
}

The only modifications we made to the program were in the choices of our colors. I went with a pink and lime green color scheme for her graph as a tribute to my old job, PartyCat, while Gordie the Red Sox Fan chose red and blue as a tribute.