Polyrhythmic Beat Maker
Visual music creation tool for composing complex polyrhythmic patterns in the browser
Interactive Demo
Each polygon rotates at the same speed, but because they have different numbers of sides, their beats land at different intervals — creating complex polyrhythmic patterns. Toggle shapes on and off to explore how different rhythms interact.
Loading visualizer...
How It Works
A polyrhythm is created when two or more rhythms with different numbers of beats are played simultaneously over the same time period. For example, a triangle (3 beats) and a square (4 beats) completing one cycle together creates a 3-against-4 polyrhythm.
Core Mechanics
- 1.All polygons share a single rotation cycle of fixed duration
- 2.A ball travels along each polygon's edges during the cycle
- 3.Each vertex hit triggers a tone at a unique frequency
- 4.More sides = more beats per cycle = faster rhythmic subdivision
The visualization uses P5.js for rendering and the Web Audio API for low-latency sound synthesis. Each polygon is assigned a frequency from a pentatonic-like scale, and oscillators are created on-the-fly for each beat hit.
Tech Stack
Rendering
P5.js handles the canvas rendering — polygon geometry, edge traversal interpolation, and the animated ball positions are recalculated each frame based on a global clock.
Audio
The Web Audio API creates short oscillator bursts on each vertex hit. Sine and triangle waves are used for a soft, bell-like timbre. Gain envelopes provide a quick attack and natural decay.