The Force 🌌

Control a 3D particle animation in real-time using hand gestures. This demo is powered by three.js, WebGL, and MediaPipe. With this project, you can experience the magic of augmented reality and hand tracking right in your browser.

Table of Contents

• Introduction
• Features
• Technologies Used
• Getting Started
  • Prerequisites
  • Installation
  • Running the Demo
• Usage
• Contributing
• License
• Contact

Introduction

The Force is an innovative project that allows users to control a 3D particle animation through hand gestures. By leveraging cutting-edge technologies, this project provides an interactive experience that blends the digital and physical worlds.

Imagine waving your hands in front of your screen and watching particles dance in response. This project not only showcases the capabilities of modern web technologies but also serves as a practical tutorial for developers interested in augmented reality and gesture recognition.

Features

• Real-Time Interaction: Control animations in real-time with hand gestures.
• 3D Visualization: Experience stunning 3D particle effects.
• Cross-Platform Compatibility: Works on most modern browsers.
• Easy to Understand: The code is well-documented and easy to follow.
• Open Source: Feel free to modify and improve the code.

Technologies Used

• Three.js: A JavaScript library that simplifies the creation of 3D graphics in the browser.
• WebGL: A web standard for rendering 3D graphics.
• MediaPipe: A framework for building multimodal applied machine learning pipelines, particularly useful for hand tracking.

Getting Started

Prerequisites

To run this project, you need the following:

• A modern web browser (Chrome, Firefox, Safari, etc.)
• Basic knowledge of HTML, CSS, and JavaScript

Installation

1. Clone the Repository: Open your terminal and run the following command:

   git clone https://github.com/tinchotinn/the-force.git

2. Navigate to the Project Directory:

   cd the-force

3. Install Dependencies: If there are any dependencies, install them using npm or yarn.

   npm install

Running the Demo

To run the demo, open the index.html file in your web browser. You can also use a local server for better performance. If you have Python installed, you can run:

python -m http.server

Then navigate to http://localhost:8000 in your browser.

For the latest release, download it here and execute the necessary files.

Usage

Once the demo is running, you will see a 3D particle animation on your screen. Follow these steps to interact with it:

1. Allow Camera Access: The application requires access to your webcam for hand tracking. Make sure to allow this when prompted.

2. Gesture Recognition: Move your hands in front of the camera. The system will recognize gestures and control the particle animation accordingly.

3. Explore Different Gestures: Experiment with various hand movements to see how they affect the animation.

Contributing

We welcome contributions! If you want to improve the project, please follow these steps:

1. Fork the Repository: Click the "Fork" button on the top right of the page.

2. Create a New Branch: Use the following command to create a new branch:

   git checkout -b feature/YourFeature

3. Make Your Changes: Implement your changes and commit them.

   git commit -m "Add your message here"

4. Push to Your Branch:

   git push origin feature/YourFeature

5. Create a Pull Request: Go to the original repository and click "New Pull Request".

License

This project is licensed under the MIT License. Feel free to use it for personal or commercial purposes, but please give credit to the original authors.

Contact

For questions or feedback, please reach out to the project maintainer:

• Name: Tinchotinn
• Email: tinchotinn@example.com
• GitHub: tinchotinn

Explore the magic of hand-tracking and particle animation with The Force. For the latest updates and releases, check the Releases section.

Happy coding!