This lab is all about serial communication. We love talking to arduinos and we love listening to arduinos.

Figure 1: The breadboard for the first serial communication lab

The purpose of this lab was to introduce us to getting serial data out of the arduino and the first step was understanding

I plugged in my circuit to my computer and used to find the port that my computer needed to be attached to

ls /dev

Then I was able to print the output of the potentiometer reading to the terminal by running the command

cat /dev/cu.usbmodem14101

After that the next part of this was to connect the serial data to P5.

To do this we had to do things.

1. Include the SerialPort Library in the index.html file

<script language="javascript" type="text/javascript" src="<https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.serialport.js>"></script>

1. Turn on the p5.serialcontrol app

This was the sketch that was uploaded to p5 so that I could read in the sensor code.

let serial;          // variable to hold an instance of the serialport library
let portName = '/dev/cu.usbmodem14101';  // fill in your serial port name here
let inData;                             // for incoming serial data

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);
}

// get the list of ports:
function printList(portList) {
  // 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]);
  }
}

function serialEvent() {
  inData = Number(serial.read());
}

function serverConnected() {
  console.log('connected to server.');
}
 
function portOpen() {
  console.log('the serial port opened.')
}
 
function serialError(err) {
  console.log('Something went wrong with the serial port. ' + err);
}
 
function portClose() {
  console.log('The serial port closed.');
}

p5Sensor.mov

We were also able to turn it into a cool visualizer!

p5 graph.mov