var serial; // variable to hold an instance of the serialport library
var portSelector; // a select menu for the port list
var vert = 0;
var horiz = 0;


function setup() {
  frameRate(120);
  createCanvas(640, 480); // make canvas
  background(0); // black background
  smooth(); // antialias drawing lines
  serial = new p5.SerialPort(); // make a new instance of the serialport library
  serial.on('list', printList); // set a callback function for the serialport list event
  serial.on('connected', serverConnected); // callback for connecting to the server
  serial.on('open', portOpen); // callback for the port opening
  serial.on('data', serialEvent); // callback for when new data arrives
  serial.on('error', serialError); // callback for errors
  serial.on('close', portClose); // callback for the port closing

  serial.list(); // list the serial ports
}
// get the list of ports:
function printList(portList) {
  // make a select menu and position it:
  portSelector = createSelect();
  portSelector.position(10, 500);

  // portList is an array of serial port names
  for (var i = 0; i < portList.length; i++) {
    // Display the list the console:
    // console.log(i + " " + portList[i]);
    // add item to the select menu:
    portSelector.option(portList[i]);
  }
  // set a handler for when a port is selected from the menu:
  portSelector.changed(openPort);
}

function openPort() {
  var thisPort = portSelector.value();
  if (thisPort != null) {
    serial.open(thisPort);
  }
}

function serverConnected() {
  print('connected to server.');
}

function portOpen() {
  console.log('the serial port opened.')
  // send a byte to prompt the microcontroller to send:
  serial.write('x');
}

function serialError(err) {
  print('Something went wrong with the serial port. ' + err);
}

function portClose() {
  print('The serial port closed.');
}

function serialEvent() {
  // read a string from the serial port
  // until you get carriage return and newline:
  var inString = serial.readStringUntil('\r\n');

  //check to see that there's actually a string there:
  if (inString.length > 0) {
    if (inString !== 'hello') { // if you get hello, ignore it
      var sensors = split(inString, ','); // split the string on the commas
      if (sensors.length > 2) { // if there are three elements
        vert = map(sensors[0], 0, 1023, width, 0); 
        horiz = map(sensors[1], 0, 1023, 0, height); 
        if (sensors[2] != 0) {
          noStroke();
          fill(0);
          rect(0, 0, width, height)

        }
      }
    }
    serial.write('x'); // send a byte requesting more serial data
  }
}

function draw() {
  fill(r, vert /2, horiz /2);
  noStroke();
  ellipseMode(CENTER);
  ellipse(vert, horiz, 10, 10); // draw the circle
  // }
  // }
}

The above code is to generate an Etch-A-Sketch with a color gradient of blue and green mapped to the x, y location of the ellipse()

The internal IMU has a fairly low range, as stated in the literature it is -4-4, which gives a low resolution but works nonetheless. I’m going to try and map the value from the IMU in a different way to combat this issue.