Lab: Serial Input and Output w/ p5.js

Serial Input to p5.js

In trying the first portion of the lab where the potentiometer values of the Arduino are sent as data to a p5.js sketch I ran into an error because “printList” is not defined and needed to comment out this line of code

serial.on('list', printList);  // set a callback function for the serialport list event

in order to get the program below to run. Later I realized it was because a printList() function was never created in the example steps.

let serial; // variable to hold an instance of the serialport library
let portName = '/dev/tty.usbmodem1411';
let inData;

function setup() {
  createCanvas(400,300);
  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
  serial.open(portName);              // open a serial port
}

function draw() {
   background(0);
   fill(255);
   text("sensor value: " + inData, 30, 50);
}

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

function portOpen() {
  console.log('the serial port opened.')
}

Beyond this everything ran smoothly for the first two labs of the week. No questions. The third lab is when I started to run into some technical issues and confusion.

Serial Output from p5.js

In the above clip, you can see that although the mouse is moving there is no change in the number on the screen. It does change when a key is pressed on my keyboard though. I’m not sure why mouseDragged() is not working but keyPressed() is.

At the end of this lab, there’s a section titled “Program p5.js to Send a String with a Newline Character.” Here I was lost. I’m a bit rusty with p5.js and I suspect this is why.