Lab 4 - P5 Serial Control
Overview
In lab 4, we learned the basics of serial communication in order to send at least two sensor values from Arduino to P5JS. Using P5 and physical components, we had to create an interactive, visual output from the incoming sensor data.
Lab Objectives:
- Explore serial communication between Arduino and P5
- Learn how to appropriately format data to send between devices
- Build an interface using P5
Part 1: The Arduino Side
First, we had to build a circuit with two analog sensors. These sensors will be utilized to print the values to the Serial Monitor in Arduino to ensure we are getting valid values. Serial print messages will be sent as ASCII string then data will be parsed in P5 mapping values that correspond with binary bit from 0 to 255.
Schematics
Part 2: The P5 Side
Using the P5 Web Editor, connect to the Serial Port that your Arduino is sending data to, read and parse the values into P5. Before designing an interactive interface, there are a couple house keeping things to set up in order to communicate from the physical to computing universe.
We need to set up:
- Serial Control App
- Serialport.js
- Serial Events
Part 3: P5 Serial Setup
Although the first two are necessary in order to communicate, serial events are where p5 will communicate to the serial port and translate the ASCII information that is readable to the computer (Bytes).
These are the necessary event components as well as for good practice:
- list – the program asks for a list of ports.
- connected – when the sketch connects to a webSocket-to-serial server
- open – a serial port is opened
- close – a serial port is closed
- data – new data arrives in a serial port
- error – something goes wrong.
Part 4: Code
Serial Control App (on left) and Arduino serial communication to physical port (on right).
P5 Web Editor with serial event communication (on right) and live canvas view port (on left).
