let fromArduino;

​

function setup() {

  createCanvas(640, 480);

  textSize(18);

}

​

function draw() {

  // one value from Arduino controls the background's red color

  background('pink');

  noStroke()

  fill('white')

  rect(width/2, 0, width/2, height);

  fill('black');

  rect(0, 0, width/2, height);

  stroke('black');

  fill('white');

  ellipse(xPos, height/2, 50);

​

  if (!serialActive) {

    text("Press Space Bar \nto select Serial Port", 20, 30);

  } else {

    text("Connected", 20, 30);

    // Print the current values

    text('xPos = ' + str(xPos), 20, 50);

  }

​

}

​

function keyPressed() {

  if (key == " ") {

    // important to have in order to start the serial connection!!

    setUpSerial();

  }

}

​

// This function will be called by the web-serial library

// with each new *line* of data. The serial library reads

// the data until the newline and then gives it to us through

// this callback function

function readSerial(data) {

  ////////////////////////////////////

  //READ FROM ARDUINO HERE

  ////////////////////////////////////

​

  if (data != null) {

      fromArduino = data;

      xPos = map(fromArduino, 300, 750, 0, width);

    }

​

}