Week 6: DOM and Serial Input to P5.js

If you've been following along, I've been learning P5.js by programming weekly variations to a small bit a code I wrote in response to the 10 Print project. This week is no different, except that this week we ventured into HTML and CSS--all the many ways available to describe the structure and style of the browser page in which my sketches live. My html page contains many objects that define how the information flows (also known as the DOM or Document Object Model), and these elements can be created and modified dynamically with JavasScript. It's a whole new world!

To start I hard-coded a link to the 10 Print site in the index.html file of my sketch to appear on the page--yay, a title! Then using JavaScript, I created a browser button and to it linked a function to change one value of my code: the Y coordinate of the Design element's line starting position. Pressing the button calls a function, and when that function executes, a random value is returned from a spread of 0-100. This is an event callback. Sometimes it's a subtle change, but I was only concerned with working out the logistics of dynamically changing the content of my project's canvas. (I followed Video 8.4 to help me with this.)

I tried to create a speed slider for my 2-dimensional array sketch but got stuck. I thought to start with the approach I applied above: turn the variable I want to change into a global one, in this case what I've described as the speed. It's important to note that even though I created a global variable, updating the class arguments (parameters?) with the syntax for global speed changed the animation completely, as if it was building on top of itself continuously. ! I didn't want this and left everything as "this.speed" to keep the situation under control. I was able to manually change the global speed and rerun the sketch to see different animation effects but could not connect the value of the slider to the value of global speed in the draw() function. My slider worked; I could print the value of my new slider in the console, but I couldn't store it's value into my global speed variable. What am I missing?! 

Fortunately, I recouped some momentum with sliders to update the starting and ending Y coordinates

In our physical computing class we've been learning about asynchronous serial communication, a way that computers talk to one another. More specifically for this point in our study, we're learning how to send values from the input sensors on our Arduino to our P5.js sketches in our browsers. Several pieces need to be in place or this communication to happen, such a P5 sketch that includes the P5.js serial port library and running the app, P5.serial control, which serves as the bridge between the Arduino’s microcontroller and the browser. Incorporating serial data into P5 sketches also utilizes event callbacks for when data become available in the serial port, so I set out to combine my practice with callbacks above with incoming serial data from my Arduino.

Again, I started with the most basic of setups to nail down the logistics. I connected one potentiometer to Analog Pin 0 on my Arduino (sketch) to move this very boring ellipse up and down in P5 (sketch). 


With that working, I set out to swap out my button in the first sketch above with a potentiometer. WOW! So satisfying to change that value with a knob instead of clicking on browser slider! The Arduino sketch did not change, but here's the updated P5 sketch.


For both serial to P5 sketches I implemented a a type of signal relay for when the devices should send and listen for data. Before establishing this call and response or handshaking method, my Arduino was blasting out data continuously. My understanding is that sometimes this can be problematic if the serial buffer fills up faster than the draw loop in P5 can read the incoming bytes. So I wrote into my sketches a way to synchronize the communication: when my microcontroller sends a byte, my p5 sketch executes a function (i.e. change the value of Y) and then sends a byte back to my microcontroller when its finished, and upon receiving that, my Arduino executes its function to send sensor data back to the browser. And round and round they go in polite dialogue.

Finally,  I challenged myself to connect two potentiometers to my Arduino (to Analog Pins 0 and 1), and use that data in place of the two sliders I created in the P5 sketch above to change y1 and y2. I learned how send the two input values from my Arduino as an ASCII string separated by a comma (sketch), and then in P5, read that string, split its values into an array of two items, convert those items into numbers, and assign one to the y1 variable and the other to the y2 variable. Here's the updated P5 sketch that shows this.