The outline of this project was to create a type-based interactive artwork. This interactive wall installation allows the user to push and move projected particles with their hands. There is a dial that switches between different visuals. Each visual is a different color and font to create enough difference between the tabs.
Tools: p5.js, Visual Studio Code, ml5
With the help of AI, I turned the particles on the screen into randomly generated letters. I then linked a repel effect to mousePOS. The repel effect puts a layer of moving bubbles the same color as the background while repelling the letters to give the visual of pushing the letters away from a large empty space. Then I linked it to hand positioning using ml5.js HandPose. I changed the typeface to bubble letters to give the effect I wanted.
I wanted to combine flow fields with text. To do so, I started with tutorials by Dan Schiffman (TheCodingTrain) and Steve's Makerspace. By figuring out how to add flow fields and perlin noise, I then asked AI if there was a way to overlay text on top of a flow field. I continued to work with the code, adding multiple particles assigned random letters. I then added a hover effect that made the letters larger and in color. I mapped it to mousePos then ml5.js HandPose.
I started with the same file as the first experiment and changed the typeface. Then I asked AI to have the particles move based on motion tracking and create a liquifying effect using blending modes. With the help of Interactive Artist, Owen Lowery, I edited the blending modes to make a glitch-like effect that occurs when tracking hands. I continued to work on the file to make it where more movement, moves more of the screen. I also added a reset feature.
Try Mouse Tacking Version: Repel Particle Tracking p5
Try Mouse Tacking Version: Flow Field p5
Try Mouse Tacking Version: Blending Mode p5
Projection mapped onto the wall using an HDMI cord connected to my laptop. I did this for each of the visuals. With the help of Professor Josh Miller, we connected an audio dial and remapped it to an A and B shortcut. Using coded iframes in Visual Studio Code, there was a way to hide and show the frames using A and B shortcuts. To display each code at full screen, I instead created three individual files in VSC and displayed them in Chrome using a live server extension and changed the dial shortcuts to match the tab shortcuts instead. Now the dial can switch between the three visuals and display them all at fullscreen.
