Lab: Serial Input & Output with P5.js
Before Start：
Serial Input to P5.js
GOAL: control the sketch with Potentiometer,
Reference: https://itp.nyu.edu/physcomp/labs/labs-serial-communication/lab-webserial-input-to-p5-js/
Serial Output From P5.js
GOAL: control the LED with mouse and keyboard.
Reference: https://itp.nyu.edu/physcomp/labs/labs-serial-communication/lab-webserial-output-from-p5-js/
Prepartion:
Pre-set breadboard, Jumper Wires, Potentiometer, LEDs. Resistors, 8-ohm speaker.
PART I: SERIAL INPUT
Add a Potentiometer to the Circus
The potentiometer is connected in pin 0.
Program the Microcontroller
In this code, I print both analogValue, and mappedPot to confirm the sensor is connected right and the map() works correctly.
P5.js Sketch
Here is the full sketch for PART I: https://editor.p5js.org/yd2512/sketches/ZcBmFh5QJ
Add P5.js WebSerial library first in index.html, then check if WebSerial is supported in Chrome. And it works! yeah!
Then I was trying to read incoming serial data and got this result ↓
After that, graphData() and draw() fucntions are updated into this to really draw something.
And I got this, the higher lines are analog Value before map() I believe, Since it is about4 times higher than the short one.
Finally, the code is been edited as shown below and the preview changes based on my control of the Potentiometer
PART II: SERIAL OUTPUT FROM P5.JS
Add an LED to the board
I forgot to take a picture before starting programming, but this is the circus I did for this step.
Program the Microcontroller
The Arduino is programed to read the analog input
The P5.js Sketch
The full Sketch is here: https://editor.p5js.org/yd2512/sketches/hkFIp232b
Same with PART I, P5.js WebSerial Library is added to index.html. And set the code to let P5 recognize the port/ When first run the code, I need to selected the port first.
Then mouseDragged(), keyPressed() and draw() is updated. When I run the code, the incoming value is still undefined, but when I drag the mouse, the Console shows the number shown as below.
Program the Microcontroller Again
After changing the code into this, when I send H or L to the serial monitor, the LED goes on or off.
Program P5.js to control the LED
Updated keyPressed() to make it read H and L
After that, mouseDragged() is updated to convert the string expected by the microcontroller to an integer, then convert it back to a string and a delimiter. And here is the result:
