Acid House Starfield with Grooving Smileys (A ThreeJS Experiment)
Inspiration
Hey, so, inspired by this ThreeJS webgl particle sprites example and the fabulous In Pursuit of Repetitive Beats I thought I'd have a go (with ChatGPT's help) at converting the webgl example to use smiley faces, react to music, and provide various bits of control functionality (see And ... What Can You Do? below)
🪇 Groove On to the Acid House Starfield 🪩:
Visit Github pages: https://cloudshapes.github.io/threejs/acid-house-starfield/ to view full-screen
OK, So, What Can You Actually See?
The visualisation first loads three tracks (see references below), and once you click plays Come Together (Primal Scream) (you can choose between one of three tracks). Sprites are each allocated a frequency band (bass, mid-range, high-frequency) with each banding reacting differently:
- Bass sprites: pulsate
- Mid-range: oscillate gently on the x-axis
- High-frequency: vary their "hue" (colour basically)
And ... What Can You Do?
There's various knobs you can twiddle:
- View the bounding box (i.e. box the sprites are drawn in) and the x,y,z axes (see above left)
- Show a bass/mid-range/high-frequency audio visualiser (see above right)
- Move the camera view around x,y,z axes - left-click and drag
- Pan the camera itself - right-click and drag
- Zoom in/out using the mouse wheel
- Control the sprite speed (Z-speed in reality)
- Adjust the number of sprites
- Manipulate the fog
- Choose between one of three tracks
What Were the Key Challenges? 👺
- Where to find smileys, or how to create them with sufficient alpha channels.
- Understanding the existing ThreeJS webgl particle sprites example
- Multiple additions e.g. sprite manipulation (e.g. pulsing, oscillations), controls.
- Experimenting with sprite manipulation and knowing when to stop experimenting (this took the longest)
- How to listen & react to the audio
What Was Working with ChatGPT Like?
Blog post coming soon on this very topic.
References:
Music:
- Come Together (Primal Scream)
- Feel the Melody (Marvel Riot)
- Sean Finn, DJ Wady & MoonDark - Pasilda (CASSIMM Remix)
View Full Screen:
Code:
- Source up on Github: acid-house-starfield