ims-07
For this final sketch, I expanded an earlier fullscreen flow-field sketch into an audio-reactive installation piece. The original reference sketch used particles moving through a Perlin noise field, which creates the feeling of invisible currents moving across the screen. I kept that structure, but changed the behavior, visuals, and sound relationship so the sketch felt more personal and more connected to the music.
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.
Each particle samples a noise value based on its x/y position. That noise value is converted into an angle, and the particle moves in that direction. This is what creates the flowing motion.
The sketch uses FFT analysis to read the frequency content of the audio. I split the sound into low, mid, and high frequency ranges. Low frequencies mostly represent kick, bass, and heavier percussion. Mid frequencies capture more of the body of the sound, like chords, melodic material, and voice. High frequencies capture brightness, shimmer, noise, and some drums/sound design.
I experimented with making the sketch behave more like a literal spectrogram, where the y-axis mapped frequency from low to high and the x-axis mapped time history from older to newer FFT frames. I ended up moving away from that because it made the piece feel too diagrammatic. Instead, I returned to a more nonlinear mapping where the whole particle field responds atmospherically to the spectrum.
In the final version, low, mid, and high frequencies affect the entire visual system in different ways. Low frequencies push the particle speed and add brightness. Mid frequencies shift the color and saturation. High frequencies create sparkle, brightness, and more shimmer in the hearts and stars. This makes the sketch feel less like a graph and more like a living field being shaped by the music.
The drums look especially strong because the sketch maps low-frequency energy to particle speed, brightness, and scale. Kick drums and low percussion create spikes in the FFT’s low-frequency range, so when the drum hits, the particles get larger, brighter, and move faster. It makes the percussion feel like it is physically pushing the particle field.
I also changed the particles themselves. Instead of only drawing points, each particle can be a dot, heart, or star. The dots are built with p5’s ellipse(), while the hearts and stars are custom shapes made with vertices and curves. Each particle also has its own size, rotation, and slow spin, so the field feels more varied and less uniform.
For the colors, I switched from simple RGB mapping to HSB color mode. This made it easier to create a more spectral range of colors because hue, saturation, and brightness can be controlled separately. The result is more vivid and reactive than my earlier pastel-only version, but it still keeps the pink, purple, and blue atmosphere I wanted.
The fullscreen button was added to make the sketch easier to present as an installation.
Overall, this piece started as a flow-field particle study and became an audio-reactive visual environment. I wanted it to feel like the music was moving through the particles instead of just playing in the background.
Some questions I asked ChatGPT:
How do I use p5.FFT() to make particles respond to low, mid, and high frequencies separately?
Can you explain how Perlin noise controls the direction of particles in a flow-field sketch?
How can I map bass energy to particle speed in p5.js?
How can I make audio-reactive particles get larger and brighter when the drums hit?
What is the difference between mapping audio to RGB color versus HSB color in p5.js?
How can I make a p5.js sketch use softer pink, purple, and blue colors without losing audio reactivity?
How can I turn point particles into custom shapes like hearts and stars in p5.js?
How do I draw a custom star shape with vertices in p5.js?
How do I draw a heart shape using beginShape() and bezierVertex()?
How can I make each particle rotate or shimmer independently?
Why does loadSound() say it is undefined in p5.js, and how do I fix it?
How can I make an alternate line mode that shows particle motion trails instead of shapes?
How can I make audio reactivity more sensitive without making the visuals too chaotic?
What does it mean to lower the threshold for FFT energy in an audio-reactive sketch?
My p5.js sketch plays audio but the visuals are not changing enough. How can I make the FFT mapping more sensitive?
The drums are making the particles look really good. Why are the shapes getting bigger and brighter on drum hits?
My colors look too similar over time. How can I make the particle colors vary more across the spectrum?
My sketch looks too technical when I map frequency literally. How can I make the audio mapping more atmospheric?
I used ChatGPT as a coding assistant to help debug the p5.js sketch, think through FFT mapping strategies, add fullscreen / URL parameter functionality, and revise the visual system while adapting an existing flow-field reference sketch into my own audio-reactive installation.
