/**
 * Storing Input.
 *
 * Move the mouse across the screen to change the position
 * of the circles. The positions of the mouse are recorded
 * into an array and played back every frame. Between each
 * frame, the newest value are added to the end of each array
 * and the oldest value is deleted.
 */

////////////////////////////add
import processing.serial.*;
Serial myPort;
int x;
////////////////////////////added

int num = 60;
float mx[] = new float[num];
float my[] = new float[num];

void setup() {
  size(640, 360);
  noStroke();
  fill(255, 153);

  myPort = new Serial(this, "/dev/cu.usbserial-D307RG9V", 9600); //port////add

}

void draw() {
  background(51);

  // Cycle through the array, using a different entry on each frame.
  // Using modulo (%) like this is faster than moving all the values over.
  int which = frameCount % num;
  mx[which] = x;//mouseX;////// changed mouseX to X
  my[which] = mouseY;

  for (int i = 0; i < num; i++) {
    // which+1 is the smallest (the oldest in the array)
    int index = (which+1 + i) % num;
    ellipse(mx[index], my[index], i, i);
  }
}

////////////////////////////add
void serialEvent(Serial p){
  x = p.read(); // read value from serial
  println(x);
}
////////////////////////////added