* Originally by Aaron Sherwood

 * Modified by Mangtronix

 *

 * Add this library to Sketch files

 *  https://github.com/mangtronix/IntroductionToInteractiveMedia/blob/master/code/p5.web-serial.js files

 *

 * You must include this line in your index.html (in Sketch Files) to load the

 * web-serial library

 *

 *     <script src="p5.web-serial.js"></script>

 *

 * Arduino code:

 * https://github.com/mangtronix/IntroductionToInteractiveMedia/blob/master/code/Week11Serial.ino

 */

​

let rVal = 0;

let alpha = 255;

let leftToright = 0; // True (1) if mouse is being clicked on left side of screen

​

function setup() {

  createCanvas(640, 480);

  textSize(18);

}

​

function draw() {

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

  background(map(rVal, 0, 1023, 0, 255), 255, 255);

​

  // the other value controls the text's transparency value

  fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));

​

  if (!serialActive) {

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

  } else {

    text("Connected", 20, 30);

​

    // Print the current values

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

    text('alpha = ' + str(alpha), 20, 70);

​

  }

​

​

  // click on one side of the screen, one LED will light up

  // click on the other side, the other LED will light up

function mousePressed() {

  // Determine the direction of the click

  if (mouseX < width / 2) {

    leftToright = true;

  } else {

    leftToright = false;

  }

​

function keyPressed() {

  if (key == " ") {

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

    setUpSerial();

  }

}

    if (leftToright) {

    serial.write('L1'); // Turn LED ON

  } else {

    serial.write('L0'); // Turn LED OFF

  }

}

  function printList(portList) {

  for (let i = 0; i < portList.length; i++) {

    print(i + " " + portList[i]);

  }

}

​

​

// 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]);

    }

​

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

    //SEND TO ARDUINO HERE (handshake)

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

    let sendToArduino = leftToright + "," + "\n";

    writeSerial(sendToArduino);

  }

}

​

​