Fab Academy: Interface and Application Programming

I used Anna's example 1 here as a basis for exploring some interface design using my input boards - the light sensor and temperature sensor. The example worked pretty much out of the box and was well commented so was a good way to understand some Processing - I had to edit the code initially to ignore sensor values below 10 (it seemed to spit out a proper reading every fourth time, and these small values the rest of the time). This was already in the code to a certain extent - it didn't draw a line for those values, but it did cycle onto the next column for them, so the result was an unsatisfying sparse bar graph, rather than a nice band of colour. All I had to do to rectify this was move the part of the code that moves into the next column

   col = col+1;

into the if statement that ignores the small values and draws a vertical line:

    //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.
      col = col+1;
    if (col > 1024) {
      col = 512;
    }

I then edited the code so that rather than printing out vertical lines in a band across the screen, the program draws ellipses. These change shape according to the values from the sensor, and colour according to these values too, as well as time.

Here is the key bit from the code for what I eventually settled on:

    stroke(255-height, col/4, height, height);
    fill(255-height, col/4, height, height);
    ellipse(512, 512, 3*height, 3*(255-height));

where height is the name of the variable that the sensor reading is read into.

My friends Mark and Nathan also showed me how to use some transparency to great effect. The last of the arguments after stroke and fill there corresponds to transparancy, which I also made equal to the sensor reading ('height').

Here's the full Processing sketch:

/**
 * 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 = 512; //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
 
    //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.
      col = col+1;
    if (col > 1024) {
      col = 512;
    }
    fill(0,0,0,10);
    rect(0,0,1024,1024);
    stroke(255-height, col/4, height, height);
    fill(255-height, col/4, height, height);
    ellipse(512, 512, 3*height, 3*(255-height));
    //line(col, (height-125)+512, col, 512-height);
    //line(1024-col, (height-125)+512, 1024-col, 512-height);
    println(height);  //print the values read from the serial port to the console
    }
    //EXPERIMENT WITH THE VISUALIZATION BELOW
    //currently draws random strokes for the full range of color
 
  }
}