Merging Serial Communication with p5 Underwater Scene

I am starting to use asynchronous serial communication to connect what we are doing with the Arduino in P Comp with what we are doing with p5 in ICM. It’s pretty exciting with all the new possibilities, but first I wanted to see if I could use two sensors to make changes in a pre-existing p5 sketch I had.

First I set up my breadboard and Arduino. As I’ve done many times before, I have a simple set up with my potentiometer and photoresistor connected to the analog inputs.

I wanted to use my potentiometer and my photoresistor to make changes to my sketch. To keep it simple and so I could see the direct change, I decided to play with the size of the creatures and bubbles in my underwater sketch. First, I wanted to get the sensor values from my Arduino. Here is my code I loaded up to the Arduino.

As you can see, the values coming out of the Arduino will be a string that looks like “photoresistor value, potentiometer value”. I made sure to separate the values with a comma so I could later use the split() function in javascript to store the sensor values in an array. Note: only code relevant to serial communication is shown.

Now, I had a “factor1” controlled by the potentiometer and a “factor2” controlled by the photoresistor. I used these variables as size factors in the functions for the jellyfish, fish, and bubbles. A small gif of the sketch in action is below. You can see when I turn the potentiometer the fish change size, and then when I cover and uncover the photoresistor the bubbles change size.

Now I am thinking of new ways to combine different interactions on the screen with physical interactions that can be detected by sensors. Reworking this early p5 sketch has been a good exercise, and I am planning on making something where the actions caused by the physical interactions make more sense.

Leave a Reply

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