Creating fun visuals in p5.js has become an obsession ever since I realized the joys of creative coding. For this particular project, I combined my fascination with space travel and hypnotic visuals. Initially, I wanted to capture the feeling of traveling through hyperspace. Then came the idea to turn it into an immersive experience. I added in the seven piano keys for the user to be able to make their own melodies. As an art piece, it signified how we are swept into the unrelenting tide of time, to music we cannot control, but have the power to make some noise that can go harmoniously with the tide, or bring forth chaos.
Tangible Keyboard:
I wanted to extend the piano keys to an external keyboard to add some fun to the user experience. After constructing a paper keyboard, I used capacitive touch configured with an Arduino Uno to make it into a tangible interface.
p5.js and Arduino:
Finally, I used the serial connection support for p5.js and Arduino to let the paper keyboard control the sketch. You can see the final version of the completed piece below.
Source code available in this link