A personal creative coding challenge built with WebGL and Three.js, this project visualizes audio data through dynamically animated particles. The particles are positioned based on an image texture (e.g., the Linkin Park logo) and react to the frequency of the audio.
Customize the experience by replacing the .mp3 audio file and .png image texture with your favorite band's song and logo.
- Particles are dynamically positioned using an image texture.
- React to audio frequency in real-time using AudioAnalyser.
- Custom vertex and fragment shaders to control particle movement and color.
- Bloom for glowing highlights.
- GlitchPass for glitchy transitions (toggleable via GUI).
- Film Grain Overlay for a cinematic touch.
- Mouse Movement: Adjust the camera position dynamically for an immersive effect.
- Audio Playback: Play and pause buttons for the audio track.
- GUI Adjustments:
- Change particle color.
- Toggle postprocessing effects.
- Adjust bloom strength and radius.
Download Node.js to get started. Then, follow these commands:
# Clone the repository
git clone <repository-url>
# Navigate to the project directory
cd <project-folder>
# Install dependencies (only the first time)
npm install
# Run the local server at localhost:8080
npm run dev
# Build for production in the dist/ directory
npm run build