let alpha = 255;

​

function setup() {

  createCanvas(640, 480);

}

​

function draw() {

  background(250, 200, 152);

​

  if (!serialActive) {

    print("Press Space Bar to select Serial Port");

  } else {

    print("Connected");

​

    // ellipse

    noStroke();

    fill(255, 0, 0);

    ellipse(map(rVal, 0, 1023, 0, width), height / 2, 100, 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) {

    // make sure there is actually a message

    // split the message

    let fromArduino = split(trim(data), ",");

    // if the right length, then proceed

    if (fromArduino.length == 2) {

      // only store values here

      // do everything with those values in the main draw loop

​

      // We take the string we get from Arduino and explicitly

      // convert it to a number by using int()

      // e.g. "103" becomes 103

      rVal = int(fromArduino[0]);

      alpha = int(fromArduino[1]);

    }

    writeSerial("0,0" + "\n");

  }

}

​