https://github.com/collidingscopes/iron-interface

An interactive 3D particle visualization controlled through hand gestures and voice. Built with threejs, mediapipe computer vision, web speech API
https://github.com/collidingscopes/iron-interface

3d animation computer-vision gesture hand-tracking javascript mediapipe open-source particle particle-animation threejs voice-control web-speech-api

Last synced: 4 months ago
JSON representation

An interactive 3D particle visualization controlled through hand gestures and voice. Built with threejs, mediapipe computer vision, web speech API

• Host: GitHub
• URL: https://github.com/collidingscopes/iron-interface
• Owner: collidingScopes
• Created: 2025-05-15T15:25:09.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2025-05-15T19:15:53.000Z (5 months ago)
• Last Synced: 2025-06-17T08:07:34.517Z (4 months ago)
• Topics: 3d, animation, computer-vision, gesture, hand-tracking, javascript, mediapipe, open-source, particle, particle-animation, threejs, voice-control, web-speech-api
• Language: JavaScript
• Homepage: https://collidingscopes.github.io/iron-interface/
• Size: 4.93 MB
• Stars: 28
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Iron Interface

An interactive 3D particle visualization controlled through hand gestures and voice.

[Live Demo](https://collidingscopes.github.io/iron-interface/) | [Video Example](https://www.instagram.com/reel/DH9oY0sR4sJ/)



## Features

- Control the camera with your hands

- Right hand: pinch to zoom in/out

- Left hand: rotate to orbit the camera

- Speak to change to a new pattern ("Jarvis, change to a sphere")

## Technology

Built with Three.js, MediaPipe Hand Tracking, and Web Speech API.

## Related Projects

You might also like some of my other open source projects:

- [Threejs shape creator](https://collidingScopes.github.io/shape-creator-tutorial) - create / control 3D shapes with threejs and MediaPipe computer vision

- [Threejs hand tracking tutorial](https://collidingScopes.github.io/threejs-handtracking-101) - Basic hand tracking setup with threejs and MediaPipe computer vision

- [Particular Drift](https://collidingScopes.github.io/particular-drift) - Turn photos into flowing particle animations

- [Liquid Logo](https://collidingScopes.github.io/liquid-logo) - Transform logos and icons into liquid metal animations

- [Video-to-ASCII](https://collidingScopes.github.io/ascii) - Convert videos into ASCII pixel art

## Contact

- Instagram: [@stereo.drift](https://www.instagram.com/stereo.drift/)

- Twitter/X: [@measure_plan](https://x.com/measure_plan)

- Email: [stereodriftvisuals@gmail.com](mailto:stereodriftvisuals@gmail.com)

- GitHub: [collidingScopes](https://github.com/collidingScopes)

## Donations

If you found this tool useful, feel free to buy me a coffee. 

My name is Alan, and I enjoy building open source software for computer vision, games, and more. This would be much appreciated during late-night coding sessions!

[![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png)](https://www.buymeacoffee.com/stereoDrift)