The outline of this project was to create a type-based interactive artwork. This interactive wall installation allows users 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.
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.
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.
Interested in learning more about me?
Please message me or check out any of my socials below!
hello@liennguyendesign.com
[ for educational purposes only ]
