let ellipseXcord;

let ellipseYcord;

let ellipseRadius;

​

function setup() 

{

  createCanvas(500, 500); //create canvas

  background(100);

  textDisplay();

  //set the initial ellipse to be in the centre

  ellipseXcord = width/2;

  ellipseYcord = height/2;

  ellipseRadius = height/10;

}

​

//displays this text in the starting

function textDisplay()

{

  text("PRESS ANY KEY TO START SERIAL PORT", width/2 - 109, height/2 - 5);

}

​

function draw() 

{

  background(220);

  if (serialActive) //if the serial is active

  {

    ellipse(ellipseXcord, ellipseYcord, ellipseRadius, ellipseRadius); //then keep changing the coordinates of ellipse bases on ellipseXcord

  }

  else //if the serial is not active

  {

    textDisplay(); //then display the text with instructions

  }

}

​

function readSerial(data) //call back function

{

  if (data != null) //if the data received is not null

    {

      ellipseXcord = map(data, 300, 1500, ellipseRadius, width - ellipseRadius); //map the value of the data and then update the variable

      //do it with ellipse radius because dont want half the circle off the screen

    }

}

​

function keyPressed() //if any key is pressed, then set up serial

{

  setUpSerial();

}