So far I have been developing projects for Computational Media and Physical Computing separately. What I created in P5.js was developed and stayed in the browser, in the computer screen. Likewise, the inputs and outputs happening in my Arduino projects such as the LEDs, sensors and buttons in the breadboard, were physically interacting only outside any screen. But what if I want to make a physical button that triggers something in my P5.js sketch? How do I make it work?

For two devices to communicate, whether they are desktop computers, microcontrollers, or any other form of computer, we need a method of communication and an agreed-upon language. Serial communication, in this case, is one of the most common forms of communication between computers. Thus, this is the method I will be using to make a potentiometer and a button interact with the following sketch.

Check the code here.

As you can check this sketch is very similar to my previous Computational Media post. Indeed I used its code as a base. I replaced the images for a png cut taken out from a photo of my eye. I also took a photo of my eye closed and added an interaction so when the mouse is clicked the crazy random eyes can blink at you ;).
You can check also this version that where I replaced the images to pngs of my mouth so when the mouse is clicked the sketch sends you a kiss :*.

Check the code here.

Anyways, as you noticed I played enough with the p5.js sketch so now it’s time to integrate it with my Arduino code. First I established that I wanted to use, instead of the slider, a potentiometer to rotate the image. Second instead of the mouse Click for the blinking, I would replace this interaction for a physical button.

As a total beginner in serial communication, I followed this tutorial and watched the those videos of Professors Tom Igoe and Jeff Feddersen.

With that in mind, I created my circuit.

I added the code to my Arduino, keeping in mind that the way the data was sent was how my p5.js serial code would read, understand it, and then be able to make it interact properly with my sketch. Therefore, since I was using two inputs (the potentiometer and the button), I needed to make my Arduino code send it to my p5.js in a way it would get this data and understand it as two different variables. The way I did it was by parsing a “,” (comma) between those different numbers. You can check my Arduino code below.

Then, also following the tutorial linked before, i downloaded the p5.serialcontrol port and added the required information to make the effective serial communication with my Arduino circuit and my code.

And it worked!!!

Check the Serial P5.js code here.


Share this Post

Leave a Reply

Your email address will not be published. Required fields are marked *