Serial Input into P5.js
The set up of the board was very straightforward.
The programming of Arduino and p5.js together also seemed like it would be straightforward, since most of it was copy and paste, but Brian and I found a little bug in the code, where inData was defined as a global variable at the top of everything, but then within a function, said “let” inData be…. when “let” was deleted, it started to work perfectly.
My understanding of the code was that there were a few steps that mainly were about making sure that the two devices (p5 and Arduino circuit) were talking to each other. The code checked for compatibility, the right port, and made sure to cover any error messages, and it also drew a black canvas with a button to select the right port, and to also display the value of the sensor. As the potentiometer was turned “up” the values increased, and when turned “down” the value decreased. This was probably also set in the copy and pasted code.
However, I wanted to see where exactly my programming would come into play and how I could use this serial communication in future projects, so Brian and I tried some simple lines that would make the background color go from “red” to “blue” in a smooth gradient as the potentiometer was turned “down” and “up”. This required a map of the “inData” start and end values (0-255) with the “gradient” map (0-1), which, using the lerpColor function, mapped to “r” and “b” which I set values for the colors of red and blue. All of this gave a “col” value that became the background color as the potentiometer turned.
Yay!