NEO-CHAOS: Interactive Audio & Visual Synth

A crazy, random, retro-futuristic sound and visual board built with HTML5, Vanilla CSS, and Web Audio API. It features interactive particles, real-time audio synthesis, sequencers, device vibration triggers, and screen-shake effects.

---

⚡ How to Deploy to GitHub Pages (For Free!)

Since this is a static website (pure HTML, CSS, and JS), you can host it for free on GitHub Pages. Here is the step-by-step guide:

Step 1: Create a GitHub Account & Repository

1. Go to github.com and log in (or create a free account).
2. Click the "+" icon in the top-right corner and select "New repository".
3. Name your repository (e.g., chaos-synth).
4. Keep it Public (required for free GitHub Pages).
5. Leave "Add a README file" unchecked, and click "Create repository".

Step 2: Upload Your Files

On the repository setup page:

1. Click the link that says "uploading an existing file" (near the top).
2. Drag and drop these three files from your computer:
   • index.html
   • style.css
   • app.js
3. Wait for the upload to complete.
4. Scroll down and click the green "Commit changes" button.

Step 3: Enable GitHub Pages

1. In your GitHub repository, click on the "Settings" tab (cog icon at the top menu).
2. In the left sidebar, click on "Pages" (under the "Code and automation" section).
3. Under "Build and deployment" -> "Branch":
   • Change the dropdown from "None" to "main" (or master).
   • Leave the folder dropdown as "/ (root)".
   • Click the "Save" button.
4. Wait 1 to 2 minutes, then refresh the page.
5. You will see a live URL at the top of the section (e.g., https://yourusername.github.io/chaos-synth/).
6. Click the link and try it out on your phone or desktop!

---

💻 How to Run Locally

You can run this project locally on your machine using a simple development server.

Option A: Using Python (Built-in on most OS)

Open your terminal inside the project folder and run:

python3 -m http.server 8000

Then visit http://localhost:8000 in your web browser.

Option B: Using Node.js (npm)

If you have Node.js installed, run:

npx http-server

Then open the address shown in the terminal.

---

🛠 Features

• Interactive Canvas Visualizer:
  • Neural Particles Mode: Dynamic physics-based particles that attract/repel and connect with glowing mesh lines.
  • Audio Waveform Mode: Draws the live frequency wave generated by the synthesizers.
  • Quantum Bursts: Spawns glowing particle trails when drums or synths are triggered.
• Web Audio Engine:
  • No external audio files to download. Everything is synthesized in real-time.
  • Controls to adjust synth waveform types (Sine, Triangle, Sawtooth, Square).
  • FX Soundboard: Custom effects including laser sweeps, low sub drops, cyber zaps, white noise bursts, warp scales, and echoing alien synths.
  • Generative sequencer: Drum loops and bass melodies with an adjustable BPM slider.
  • Ambient drone: Low-frequency detuned oscillator drone for a spooky, futuristic background.
• Physical Device Feedback:
  • Integration with the HTML5 Vibration API (navigator.vibrate) for pulsing tactile feedback on mobile devices.
  • Simulated Screen Shake for desktop displays so you can feel the chaos visually.
• The "CHAOS" Overload button:
  • Accelerates the sound sequencer, spawns rapid random synth tones, forces continuous high-intensity vibrations, flashes neon background colors, and multiplies screen-shake levels.