// This Processing example reads byte-values from the serial
// port at 9600 bits-per-second (bps). It uses these values
// to set the color of a square on the canvas.
// Also, if the mouse moved, its relative x-position (0..7)
// is sent over the serial port.


import processing.serial.*;         // load serial library
Serial p;                           // declare serial port object


void setup() 
{ 
  size(200, 200); 
  noStroke(); 
  framerate(10); 

  // open the port that the Wiring board is connected to (in my case 2)
  // at the same speed that the board is transmitting (9600 bps).
  p = new Serial(this, Serial.list()[2], 9600); 
} 


void draw() 
{
  background(102);                   // clear background to grey
  if (p.available() > 0) {           // if data is available to read 
    fill(p.read());                  // read it and use as fill() color 
  } 
  rect(50, 50, 100, 100);            // draw a square
  
  if (mouseX != pmouseX)             // if mouseX changed
  {
    int x = int(8*(mouseX/width));   // compute the relative x-position
    p.write(x);                      // send it onto the serial line
    delay(100);
  }
}