Wouldn’t you like to dance in the rain without getting wet? Getting caught in the rain can be refreshing in the summer, but listen, it’s October now and everyone is getting the sniffles, myself included. Introducing… Rain Dance.
CONCEPT
Rain Dance is an interactive installation that will project a raining scene with the silhouette of the viewer in the middle. This body tracking silhouette will have superimposed randomized GIFs of dancing feet that will become activated once the user is in front of the camera in the correct location and stepping on load sensors that are connected to an Arduino. A 30” circular pool of water will be placed directly underneath the projected image of the feet. Sound exciters will be attached to the bottom of the pool, and when a user is moving their feet, a sound will be triggered causing the water to vibrate.
VISUALIZATION PROTOTYPE: p5.js
I wanted to create the raining scene with p5.js using a randomized array of raindrops, but how can I tackle the randomized GIF of dancing feet that would splash around this scene? The idea is that the load sensor would detect a set minimum weight and trigger a GIF to appear. I envisioned pulling an image URL from an API, but I had difficulty with the getting the syntax just right.
I followed Shiffman’s Working with APIs in Javascript tutorial, and I was successful in calling specific parameters to point to the correct GIF URL.After some more perusing, I found another relevant Shiffman tutorial: The Giphy API and Javascript. Here is a link to my sketch following the tutorial with the GIF correctly loading. In the example however, Shiffman populates the GIFs into a list, and does not confine it within a canvas. If I create a canvas, the GIF appears outside of the canvas. I tried the push, pop, and translate functions within the function where I createImg() to see if I can shift the GIF to where I want it, and did not find any success.
I decided I would create an array of saved GIFs. I thought it might be as straightforward as loading images, but I quickly realized that this was not the case. Branching off the rotating cat example, I replaced the kitty with a GIF and saw that the positioning of the GIF was static and would not generate a GIF when I clicked the mouse. What is the best way to create an array of GIFs?
I came across Lauren McCarthy’s now closed request for adding GIF support to the image() function and also this thread in StackOverflow. . The following libraries handle GIFs:
antiboredom - p5.gif.js
WenheLI and NHibiki - p5.gif
npmjs - p5.createLoop
My sketch using p5.gif.js did not work - I received these errors: Uncaught ReferenceError: loadGif is not defined (: line 12), Uncaught TypeError: Cannot read property 'loaded' of undefined (: line 21)
My sketch using p5.gif worked, but it took forever to load a very simple GIF, and I still did not understand how to shift where the GIF would be positioned.
The p5.createLoop looked more like it focused on creating GIFs within the p5 environment, and that “add draw option to stay in sync with GIF loop” is still on the to-do list.
Interacting with the Arduino
Now that I have a p5js sketch to work with, I can use an Arduino to communicate with the sketch via Serial. Using load sensors, I plan on using two load cells that will measure the weight of the left foot, and the other two for the right foot. When a user leans left or right on the load cells, they would change the X position of the GIF at a mapped value. Because I am still waiting for my load cell amplifier that will combine the readings from the four load cells, I decided to use a potentiometer in its place. The potentiometer is mapped to the width of the canvas so that the GIF can be shifted when its values are changed.
