top of page

Physical Computing Week 3: Labs

This week we learned about serial communication and how we can program P5.js to communicate with our Arduino and visa-versa.


  1. When two computers communicate using asynchronous serial communication, the must both agree on the communication speed (baud rate) and the formatting or communication language (ascii v bytes). On top of that, the byte logic should be consistent and any delimiters necessary for the program need to be agreed upon.

  2. Only 1 application can access a given serial port at a time.

  3. Another application is using the port, so the program that is trying to access it is unable to - because only 1 application can access the port at a time.

  4. ^^

  5. ASCII or Binary

  6. Ascii takes up more bytes when sending data, but it is a more human readable language than Binary. Most receiving programs will default to using ASCII or Unicode characters.

  7. The Arduino IDE's serial monitor assumed incoming data should be interpreted as ASCII characters.

  8. The sending device is using binary, which is why the image is showing random characters, because the serial monitor is assuming an ASCII protocol.

  9. 255

  10. You could break up larger values into separate bytes and then rejoin them once transferred

int pot;
int mappedPot;

void setup() {


void loop() {
pot = analogRead(A0);

mappedPot = map(pot, 0, 1023, 0, 255);



int pot;
int lightsensor;
int btn;
void setup() {
  delay(5000); //adds a delay to make sure there is time to press play on p5.js sketch

void loop() {
  pot = analogRead(A0);
  lightsensor = analogRead(A1);
  btn = digitalRead(2);

  if (Serial.available() > 0) { //dont send anything unless p5.js is ready to accept information
    byte incoming =;
    Serial.print("\r"); //you can also use Serial.println() instead


It took me a while to get the LED to dim using the mouse in a p5.js sketch, because I realized I had put the mouseDragged() function inside of the draw() loop and basically broke the program. But I eventually got it working after about 20 minutes of debugging.

Here's the code:

var serial;          // variable to hold an instance of the serialport library
var portName = 'COM3'; // fill in your serial port name here
var inData;                            // for incoming serial data
var outByte = 0;                       // for outgoing data
function setup() {
  createCanvas(400, 300);          // make the canvas
  serial = new p5.SerialPort();    // make a new instance of the serialport library
  serial.on('data', serialEvent);  // callback for when new data arrives
  serial.on('error', serialError); // callback for errors;           // open a serial port

function serialEvent() {
  // read a byte from the serial port:
  var inByte =;
  // store it in a global variable:
  inData = inByte;
function serialError(err) {
  println('Something went wrong with the serial port. ' + err);

function draw() {
  // black background, white text:
  // display the incoming serial data as a string:
  text("incoming value: " + inData, 30, 30);  

  function mouseDragged() {
  // map the mouseY to a range from 0 to 255:
  outByte = int(map(mouseY, 0, height, 0, 255));
  // send it out the serial port:

Here's a video of it working:

I was also able to complete the IMU lab and use the accelerometer and gyroscope in the Nano 33 IoT to make a digital model of the Nano move in p5.js.

Here's a video of it working!

I feel like I'm starting to get the hang of serial communication, although it's going to take me some time to get used to the differences in code between p5.js and Arduino - I've already been making a ton of mistakes switching between the two languages.

Unfortunately I didn't have any of the components to complete the Synchronous Serial Communication labs. I didn't see them included in the Octopart shopping list, but did find two of the components on the Taobao shopping list. Anyway, those are on order now and I'll update this blog when I get a chance to do the labs. I did however read the documentation and watched the videos so I get at least a basic understanding of what's happening.


bottom of page