PCM Wk 6: Serial Input to p5.js

Following along with the Lab: Serial Input to p5.js

1.) First, I hooked up the potentiometer on the breadboard to the Analog Input pin on the Arduino.

arduino board hooked up

2.) Followed along with the video to install the “p5.serialcontrol” App and download the “p5.js serialport library”. Then added the library to the p5.js sketch.

3.) Added the code in p5.js to first give me a list of the ports. Then I added the rest of the serial events to make sure to see in the console if the serial port is open/closed, to see what port I am working in. I then added in the variable “inData” and edited the “serialEvent()” function so that the “inData” variable reads the sensor value. Then I added in the text to print the sensor value on the canvas. See the video that shows the result of this.


4.) Then I drew a graph using sensor values. Below is a video that shows the results.



5.) Reading Serial Data as a String notes: so before this step, p5js was not reading the ASCII encoded numeric string, it was reading each individual ASCII number and applying that individual number to it’s associated ASCII number. So when we write Serial.println(), there will by 5 numbers that show up (3 numbers for each of the numbers in the string, and 2 for the return carriage and new line). So the code was in “function serial Event()” is changed to be “inData = serial.readLine()” to read the full ASCII string as a string.

6.) But then this created gaps, and in the p5 console there were “”. To solve for the gaps and “”, it was necessary to add a code that makes sure that what we are reading is a #. Below is a video that shows the result of that.


7.) The video below shows the final result without the arduino mapping the 0-255 and 0-1023, but able to give an ASCII encoded number in the p5js sketch.




1.) Is the “Number” a built-in function that turns a string into a numeric, such as in the example “inData = Number(inString);”?

2.) It was helpful to watch serial from Arduino to p5.js  video before beginning the lab. A question I had after watching the video, is about the properties for the functions code written in the library script. What exactly is the code doing to get it to perform that function?

3.) When does node.js come into this process? After doing the lab I was still not sure what it’s purpose is in the communication between serial port, the microprocessor, and the browser. I don’t think it was used in the lab (aside from installing it) or did I miss something?