​

function setup() {

  createCanvas(400, 400); // Create a canvas of 800x400 pixels

  ellipseX = width / 2; // Set initial x-coordinate of ellipse to middle of the screen

  noStroke(); // No stroke for the ellipse

}

​

function draw() {

  background(220); // Refresh background on each frame

  fill(255, 0, 0); // Set fill color to red

  ellipse(ellipseX, height / 2, 50, 50); // Draw ellipse at current x-coordinate and middle of the screen

  if (!serialActive) {

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

  } else {

    text("Connected", 20, 30);}

}

​

// function serialEvent() {

//   let data = serial.read(); // Read data from serial port

//   if (data !== null) {

//     // If data is not null

//     console.log(data);

//     ellipseX = Number(data); // Update ellipse's x-coordinate with the received value

//   }

// }

​

function keyPressed() {

  if (key == " ") {

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

    setUpSerial();

  }   

}

​

​

// this callback function

function readSerial(data) {

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

  //READ FROM ARDUINO HERE

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

​

  if (data != null) {

    // make sure there is actually a message

    // split the message

    console.log(data);

    console.log("fromArduino");

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

    // if the right length, then proceed

    if (fromArduino.length == 1) {

      // only store values here

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

      console.log("working");

      ellipseX = map(data,0,500000, 0,width);

    }

​

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

    //SEND TO ARDUINO HERE (handshake)

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

   let sendToArduino = fromArduino + "\n";

   writeSerial(sendToArduino);

  }

}