var serial;

var latestData = "waiting for data"; // you'll use this to write incoming data to the canvas

​

​

function setup() { 

  createCanvas(600, 600);

  noFill();

  strokeWeight(10);

      serial = new p5.SerialPort();

  serial.open("/dev/cu.usbmodem621");

  serial.on('data', gotData);

} 

​

function draw() { 

    let latestCol = map(latestData,50,400,100,255);

  background(latestCol, latestCol, 127);

  let mappedData = map(latestData, 50,400,100,300);

  var v = mappedData; 

  var origV = v;

​

  // Left Eye

  ellipse(width*.4, height*.4, v*.25 + 10, v*.25 + 10);

​

  // Right Eye

  ellipse(width*.6, height*.4, (2500/v) + 10, (2500/v) + 10);

  // Nose

  v+=random(-5, 5);

  bezier(width*.5, height*.5, v*.6, height*.6, v*.6, height*.8, width*.45, height*.67);

​

  // Mouth

​

  bezier(width*.3, v*.6 + height/2, width*.4, height*.8, width*.6, height*.8, width*.7, v*.55 + height/2);

​

}

​

​

// There is data available to work with from the serial port

function gotData() {

  var currentString = serial.readLine(); // read the incoming string

  trim(currentString); // remove any trailing whitespace

  if (!currentString) return; // if the string is empty, do no more

  console.log(currentString); // println the string

  latestData = currentString; // save it for the draw method

}

​