var serial = new Serial();

var x=0;

var y=0

var z=0;

​

var ball = {

  x:200,

  y:200

}

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(220);

  textSize(12);

  textAlign(LEFT, TOP);

  text(`${x.toFixed(2)}, ${y.toFixed(2)}, ${z.toFixed(2)}`, 10,10);

  circle(ball.x, ball.y,20);

}

​

function gotSerialValues(values) {

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

     serial_values.push(values[i]);

    if( values[i] == 10){

      let result = "";

      for( s of serial_values){

        result += String.fromCharCode(s);

      }

      const splits = result.split(',');

      x = parseFloat(splits[0]);

      if( !x )x = 0;

      y = parseFloat(splits[1]);

      if( !y )y = 0;

      z = parseFloat(splits[2]);

      ball.x -= y*5;

      ball.y -= x*5;

      if( ball.x <= 0)ball.x = 0;

      if( ball.x >= width)ball.x = width;

      if( ball.y <= 0)ball.y = 0;

      if( ball.y >= height)ball.y = height;

      serial_values = [];

    }

  } 

}