Visualizing Data in Processing

From the last chapter of Getting started with Processing .

Click on the image above to see the animated gif of the different color / alpha values I played with.



Arduino code first

//Read a sensor
int sensorPin = 0;  //select input pin
int val = 0;

void setup(){
  Serial.begin(9600);  // open serial port
}

void loop (){
  val = analogRead (sensorPin) /4;  // Read value from Sensor
  Serial.print(val, BYTE);          // Print variable to serial port 
  delay(100);                       // Wait 100 millis
}

Then Processing run this processing code

import processing.serial.*;

Serial port;    //create object from serial class
float val;      // data received from the serial port
float angle;
float radius;

void setup() {
  size(1024,768);
  frameRate(30);
  strokeWeight(2);
  smooth();
  String arduinoPort = Serial.list()[0];
  port = new Serial(this, arduinoPort, 9600);
  background(255,255,205);
}

void draw() {
  if ( port.available() > 0){
    val =port.read();
    //convert the values to set the radius
    radius = map(val, 0, 80, 0, height*0.45);
  }

  int middleX = width/2;
  int middleY = height/2;
  float x = middleX + cos(angle) * height/2;
  float y = middleY + sin(angle) * height/2;
  noStroke ();
  line(middleX,middleY, x , y);

  x = middleX + cos(angle) * radius;
  y = middleY + sin(angle) * radius;
  stroke(random(0,255), random(0,255), random(0,255),random(0,255));
  line(middleX, middleY, x, y );

  angle += 0.01;

}