Linkin-Park Audio Visualizer 🎵

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.

---

🌟 Key Features

🎨 Particle Animation

• Particles are dynamically positioned using an image texture.
• React to audio frequency in real-time using AudioAnalyser.

🖥️ Shader Effects

• Custom vertex and fragment shaders to control particle movement and color.

✨ Postprocessing Effects

• Bloom for glowing highlights.
• GlitchPass for glitchy transitions (toggleable via GUI).
• Film Grain Overlay for a cinematic touch.

🖱️ Interactive Controls

• 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.

---

🚀 Setup

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