Skip to content
<open-source>
Oeiuwq Faith Blog OpenSource Porfolio

collidingScopes/arpeggiator

Hand-controlled arpeggiator, drum machine, and audio reactive visualizer. Built with mediapipe computer vision, threejs, tonejs
Source code at GitHub https://collidingscopes.github.io/arpeggiator/
collidingScopes/arpeggiator.json
{
  "createdAt": "2025-06-16T13:37:01Z",
  "defaultBranch": "main",
  "description": "Hand-controlled arpeggiator, drum machine, and audio reactive visualizer. Built with mediapipe computer vision, threejs, tonejs",
  "fullName": "collidingScopes/arpeggiator",
  "homepage": "https://collidingscopes.github.io/arpeggiator/",
  "language": "JavaScript",
  "name": "arpeggiator",
  "pushedAt": "2025-06-22T20:06:32Z",
  "stargazersCount": 134,
  "topics": [
    "arpeggio",
    "audio-reactive",
    "augmented-reality",
    "computer-vision",
    "drum-machine",
    "fun-with-computer-vision",
    "hand-gesture-recognition",
    "hand-tracking",
    "mediapipe",
    "music",
    "spatial-computing",
    "synthesizer",
    "threejs",
    "tonejs",
    "visualizer"
  ],
  "updatedAt": "2025-11-23T17:50:34Z",
  "url": "https://github.com/collidingScopes/arpeggiator"
}

Hand Gesture Arpeggiator

Section titled “Hand Gesture Arpeggiator”

Hand-controlled arpeggiator, drum machine, and audio reactive visualizer. Raise your hands to raise the roof!

An interactive web app built with threejs, mediapipe computer vision, rosebud AI, and tone.js.

  • Hand #1 controls the arpeggios (raise hand to raise pitch, pinch to change volume)
  • Hand #2 controls the drums (raise different fingers to change the pattern)

Video | Live Demo | More Code & Tutorials

Requirements

Section titled “Requirements”
  • Modern web browser with WebGL support
  • Camera access enabled for hand tracking

Technologies

Section titled “Technologies”
  • MediaPipe for hand tracking and gesture recognition
  • Three.js for audio reactive visual rendering
  • Tone.js for synthesizer sounds
  • HTML5 Canvas for visual feedback
  • JavaScript for real-time interaction

Setup for Development

Section titled “Setup for Development”
Terminal window
# Clone this repository
git clone https://github.com/collidingScopes/arpeggiator


# Navigate to the project directory
cd arpeggiator


# Serve with your preferred method (example using Python)
python -m http.server

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

License

Section titled “License”

MIT License

Credits

Section titled “Credits”
Section titled “Related Projects”

I’ve released several computer vision projects (with code + tutorials) here: Fun With Computer Vision

You can purchase lifetime access and receive the full project files and tutorials. I’m adding more content regularly 🪬

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

Contact

Section titled “Contact”

Donations

Section titled “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