NeonFlux - Interactive WebGL Particle System

繁體中文 (Traditional Chinese)

NeonFlux is a futuristic, interactive WebGL experience that lets you control thousands of neon particles using hand gestures. Built with Three.js and MediaPipe, it runs entirely in the browser using your webcam.

🔗 Demo: https://neonflux.eugene.tw

✨ Features

• Real-time Hand Tracking: Powered by Google MediaPipe for low-latency gesture recognition.
• Dual Hand Support:
  • Left Hand (1-5 fingers): Displays custom text messages (Text 1-5).
  • Right Hand (1-5 fingers): Displays another set of custom text messages (Text 6-10).
• Ultimate Combo: Open both hands (5 fingers each) to display the theme text in the center.
• Dynamic Text Control: Customize the text displayed for each gesture directly from the UI panel.
• Auto-fit Typography: Text automatically scales to fit the screen, no matter how long the message is.
• Particle Physics: 30,000+ individual particles with fluid, physics-based movement and neon glow effects.

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Edge, Firefox, Safari).
• A webcam.
• Python 3 (for running a local server).

Installation

1. Clone the repository (replace <your-username> with your GitHub username):

   git clone https://github.com/<your-username>/NeonFlux.git
   cd NeonFlux

2. Run a local server:

   # Python 3
   python3 -m http.server 8000

3. Open your browser and visit:

   http://localhost:8000
   

🎮 How to Use

1. Allow Camera Access: When prompted, allow the browser to access your webcam.

2. Hand Gesture Guide:

   Use hand fingers to trigger different language displays. The system supports 11 unique display modes (5 left-hand languages + 5 right-hand languages + 1 theme mode).

   Left Hand - Text Display (1-5 fingers)

   Fingers	Default Text	Display Content
   1 👍	First	Custom text 1
   2 ✌️	Second	Custom text 2
   3 🤟	Third	Custom text 3
   4 🫴	Fourth	Custom text 4
   5 ✋	Bye	Custom text 5

   Right Hand - Text Display (1-5 fingers)

   Fingers	Default Text	Display Content
   1 👍	First	Custom text 6
   2 ✌️	Second	Custom text 7
   3 🤟	Third	Custom text 8
   4 🫴	Fourth	Custom text 9
   5 ✋	Bye	Custom text 10

   Both Hands Open (5 + 5 fingers)

   Gesture	Mode	Effect
   Both hands 5 fingers ✋✋	Ultimate Combo	Displays custom theme text with special 3D particle effects

3. Priority Logic:

   • If Left Hand is active, it takes priority and displays left-hand language.
   • If Left Hand is hidden/idle, Right Hand language is shown.
   • If BOTH hands show 5 fingers → Ultimate Combo Mode activates with theme text!

4. Customize Text:

   • Click the SETTINGS (▼) button in the bottom-left corner.
   • Edit text for each gesture (Left Hand 1-5, Right Hand 1-5, and Theme text).
   • Click UPDATE to apply changes instantly (no page reload needed).

Example Scenarios

• 🎤 Conference/Presentation: Show your slides in different languages by changing hand gestures.
• 🗣️ Language Learning: Display vocabulary in multiple languages side-by-side.
• 🎨 Creative Display: Use the Ultimate Combo mode for branded content or promotional messages.
• 🎭 Stage Performance: Control on-screen text effects with hand movements.

🛠️ Tech Stack

• Three.js: WebGL rendering engine.
• MediaPipe Tasks Vision: Machine learning for hand tracking.
• Vanilla JavaScript (ES6+): Core logic.
• HTML5/CSS3: UI and structure.

🔒 Privacy & Permissions

• All processing runs locally in the browser; webcam frames are not uploaded or stored.
• Camera access requires HTTPS or localhost.

🌐 External Resources

• Three.js: Loaded from https://unpkg.com/.
• MediaPipe Tasks Vision: Loaded from https://cdn.jsdelivr.net/, model hosted on https://storage.googleapis.com/.
• Google Fonts (Orbitron): Loaded from https://fonts.googleapis.com/.

🤝 Contributing & Conduct

• Contribution guidelines: CONTRIBUTING.md.
• Code of conduct: CODE_OF_CONDUCT.md.
• Security reporting: SECURITY.md.

📄 License

This project is open source and available under the MIT License.

---

Created by Eugene Wang