p5 Controller IRL was my ITP Camp project for the summer of 2023. It has both digital and physical elements that come together in the form of an interactive installation. The goal was to explore how to make p5.js sketches interactive and engaging to people experimenting with the outcomes without being I’ve realized that by bringing buttons, sliders, toggle switches, etc. off-screen and introducing a tangible, non-virtual element the experience becomes much more immersive and it creates a feeling of a more intimate control of what’s happening on-screen.

I wrote a visualization program with p5.js that can be modified to create many different visual outputs and built a physical controller that can be used not only with this specific program, but that can later be used with many other p5 sketches with varying values and interactive elements.

What's being controlled?
In this case, the program displays bubbles floating on the screen that bounce off each other. The sliders in the middle of the controller modify the size of the different types of bubbles, as well as the background color. The buttons on the right of the controller add and remove bubbles, as well as switch between different patterns displayed within each bubble (they switch between shaders). The toggle on the top left activate displaying bubbles within larger bubbles and the other toggle activates a sound-reactive element (which stretches the bubbles). Finally, the knobs below the toggle switches control the colors.