Zen Rhythm Circle 🧘‍♂️🥁

A minimalist, open-source, browser-based tool for visualizing and exploring polyrhythms – perfect for keeping track of "the one" during improvised jams!

Zen Rhythm Circle provides a clean, calming interface to create and visualize multiple rhythmic layers. It's built with pure HTML, CSS, and JavaScript, featuring no third-party dependencies, making it lightweight and easy to run anywhere.

Why Zen Rhythm Circle?

Ever get lost in a jam trying to lock in a tricky polyrhythm? This tool helps you see how different rhythmic subdivisions interact. Set up your layers, hit play, and let the visual cues guide your groove. It's designed to be a simple aid for musicians, educators, and anyone curious about the fascinating world of rhythm.

Features

• Pure Vanilla JS: No frameworks, no libraries, just the web platform.
• Visual Circular Sequencer: See rhythms pulse on concentric circles.
• Polyrhythm Exploration: Easily layer different subdivisions (e.g., 3 against 4, 5 against 2).
• Customizable Layers:
  • Adjust subdivisions per beat.
  • Select from a variety of synthesized percussive sounds (Web Audio API).
  • Set custom colors for visual clarity.
  • Mute/Solo individual layers.
• Tempo & Cycle Control: Set global BPM and beats per cycle.
• Pattern Management: Save, load, and delete your rhythmic patterns directly in your browser (uses localStorage).
• Visual Customization: Adjust dot size and active "pop" animation (settings saved per pattern).
• Offline Capable: Download and run index.html locally.
• Modern, Clean Design: A distraction-free interface for focused rhythmic exploration.

Getting Started

Online:

1. Use it free online here Zen Rhythm Circle

Offline / Locally:

1. Download the project files (index.html, style.css, script.js).
2. Open index.html in any modern web browser.

How to Use

1. Open the Controls Panel: Click the menu icon (☰) in the top-left.
2. Set Global Rhythm: Adjust BPM and Beats per Cycle in the "Rhythm" tab.
3. Add Layers:
   • Click "+ Add Layer."
   • Define Subdivisions per Beat (e.g., 3 for triplets, 4 for 16ths if the main beat is a quarter).
   • Select a Sound and Color.
   • Click the numbered Active Elements buttons to program your rhythm.
4. Visuals Tab: Customize dot appearance.
5. Save/Load: Use the pattern management controls to store and recall your creations.

Keyboard Shortcuts

These shortcuts are active when not focused on an input field (like text boxes, number inputs, or select dropdowns).

• Spacebar: Play / Stop Rhythm
• Arrow Up: Add a new layer. The new layer becomes the "last interacted layer".
• Arrow Down: Remove the "last interacted layer". If no layer has been interacted with yet, it removes the actual last layer in the stack.
• Arrow Left: Decrease subdivisions for the "last interacted layer".
• Arrow Right: Increase subdivisions for the "last interacted layer".
• F: Fill all element steps for the "last interacted layer" (sets all to active).
• C: Clear all element steps for the "last interacted layer" (sets all to inactive).
• R: Randomize element steps for the "last interacted layer".
• Esc: Close the Shortcuts help modal if it's open.

Note on "Last Interacted Layer": This refers to the layer whose controls (subdivisions, color, sound, or element buttons) were most recently modified, or the layer that was most recently added. Operations like changing subdivisions or filling/clearing elements via keyboard shortcuts will apply to this layer. Its panel in the UI might be highlighted (depending on future styling).

Contributing

This is an open-source project! Feel free to fork the repository, make improvements, or suggest features. Pull requests are welcome.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE file for more information (You'll need to create a LICENSE file, typically with the MIT license text).

Acknowledgements

• This project was originally "vibe coded" in less than an hour using Google Gemini 2.5 Pro Preview 05-06, using Google AI Studio. What a fun process! 😀

---

Happy jamming! May your "ones" always be found.