In this lab, I had to use serial communication to send two sensor values from Arduino to P5JS. With the sensor values I made an interactive, visual output in the P5 editor.
Materials
-breadboard
-Arduino
-2 potentiometers
-P5 serial control app
-P5JS editor
Arduino Side
The first step in this lab was building a circuit with two potentiometers and writing code that gave clean readings to the serial monitor.
Here's my circuit:
Here's the Arduino code:
P5 Serial Control App Side
The next step is to connect the Arduino with the serial control app by downloading it and connecting it to the right port.
P5JS Side
The final step is to use the incoming data from the serial control app/Arduino to create a visual output. You must include a serial port JS file and a reference to your Arduino port for the program to run.
Here's my P5 code:
Make sure to download this file and call it in your index.
Here's what the finished product should look like:
Sensor1 controls the size of the ellipse and sensor2 controls the number of rings.
Taking it FurtherAlthough I followed the directions laid out by Arielle, I was unable to properly connect the Arduino to the P5JS editor. The Arduino connected and sent the proper data to the P5 serial control app, but not to the P5 editor. I kept receiving an undefined port error. To get around this hurdle, I manually animated what the code is supposed to do using Adobe After Effects. I think P5 is interesting, and I want to continue using it, but I need to figure out the serial communication side. So, my next step is to try running the same programs, but on a different machine, to see whether my computer is at fault for the misconnection.
Comentarios