Overview
Explore the potential of particle system with interaction inputs like mouse, webcam, and file. Please only use browsers to interact with each project.
Advisor
Karin Hodgin Jones, Juan Salamanca
time
Sept 2019 - May 2021
tools
p5js, Processing
Context
A particle system is a technique used in computer graphics and simulation to create and manage a large number of small, individual entities called "particles.” Over a period of time, particles are combined into a system, move or reform within the system, and eventually disappear.
While creating generative art in p5js, I became intrigued by particle systems. I challenged myself to explore different methods of interacting with particle system. Eventually, I developed several interactions based on mouse, keyboard, image, and camera input.
play
My first attempt at creating a particle system. A circle that changes its shape, color, stroke weight, and background based on mouse movements and keyboard interactions.
Inspired by the TV show WandaVision, I created two small particle systems to simulate Scarlet Witch's power. Moving the mouse closer to her hands would increase particle emission, making it look like she's shooting out more energy from her hands.
I couldn't get enough of WandaVision, so I created another simulation piece of Scarlet Witch's powers. This time, with a massive emission from her chest. By moving the mouse around the canvas, viewers can change the direction, velocity, and speed of the particle system.
play
Particle systems, in many ways, remind me of how pixels combine to form the interfaces we see. I started exploring ways to project and capture an image's pixels onto the canvas. I controlled the movement of pixels and created a new animated font family called Wiggly.
Animation improvement
Here is an example of how each pixel moves. Although I was able to make the movement feel fuzzy by changing the opacity, I wasn't satisfied with it because it didn't feel natural. Therefore, I started experimenting with different methods of animating particles or pixels...
I found an algorithm called Perlin noise. It is a force field that controls the directions of force for every particle. We can get an organic feel to the randomness. By adjusting flow directions, particle sizes, and density, I can apply this algorithm to an image and create a beautiful fluid field with an organic feel to the randomness.
The randomness of Perlin noise enables the generation of images with subtle yet noticeable differences. When viewers see images generated by Perlin noise, they may feel a sense of obscurity. However, what if the images are of something they are very familiar with? How would that make them feel?
I chose to use some of the more recognizable Marvel superheroes, applied the Perlin noise algorithm on them, and turned them into everflowing force fields. I made the particles extremely small this time, so viewers can observe the delicate but vibrant movements of the particles.
The audiences can still recognize the characters based on their traits, but the fuzzy particle movements definitely make it more enjoyable to watch.
Some close-up shots:
play
In this project, you can click to add more particles and make the canvas foggier, or drag to remove particles and clean the canvas. I used the audience's webcam as the background, so they can feel as if they are looking into a mirror. The mirror frame makes this project look more realistic.
Add particles:
I created a mechanism where audiences can remove the particles from the screen. This reminded me of foggy bathroom mirrors where you wipe it to clear the cloudiness, so I combined the particle systems with webcam input and created foggy mirror.
Inspired by a foggy mirror, when I projected and adjusted webcam pixels onto the canvas, it created a more abstract reflection. The ambiguous nature of this webcam experience makes the audience feel like they're looking into a very wet mirror.
As I refined my ability in manipulating webcam pixels, I learned about The Coding Train’s video on rendering video as text ASCII characters. As I remade this technique, I replaced the ASCII characters to be Mandarin, specifically lyrics from an indie rock band that I like.
I named this project after my favorite album of the band, The Servile. I relate to their lyrics deeply, so projecting myself onto the canvas with all the lyrics can truly reflect my experience of listening to their music.
