Visualize juggling site swap patterns easily. Our free web-based simulator helps you learn, analyze, and animate complex juggling sequences in your browser.
AI Generation Prompt
Juggling Site Swap Pattern Animator & Simulator
This application is a specialized tool for jugglers, researchers, and hobbyists to visualize juggling "siteswap" notation in real-time. By inputting numerical sequences, users generate a smooth, browser-based animation of ball paths, catch points, and hand movements. This tool is built as a single-file, lightweight solution for immediate visual feedback.
Core Features
- Live Siteswap Rendering: Real-time animation of standard siteswap strings (e.g., "3", "441", "531").
- Adjustable Physics: Controls to modify the "dwell time" (time a ball is held) and "flight time" (time a ball is in the air) to match real-world juggling conditions.
- Playback Controls: Play, pause, step-by-step frame scrubbing, and speed adjustment (from 0.25x to 2x).
- Visual Customization: Toggle ball trails, change ball colors, and adjust the canvas perspective.
- Error Feedback: Real-time validation of input strings to ensure the pattern is mathematically valid.
UI Layout
- Header: A clean, minimalist title bar indicating the tool name.
- Input Section: A prominent, wide text input field where users enter their siteswap string, accompanied by an "Animate" button and a "Randomize" button for inspiration.
- Main Animation Area: A centered, high-performance
<canvas>element. The background is a clean white, with light gray lines to indicate the "floor" or "hand-level." - Control Panel: Positioned directly below the canvas. Contains a slider for speed, toggle switches for visual preferences (trails, colors), and playback controls (play/pause).
- Information Panel: A subtle section below the controls explaining the entered pattern's requirements (e.g., "Requires 3 balls").
Color Palette
Designed for clarity and a professional, light-mode aesthetic:
- Primary Background:
#FFFFFF(Pure white) - Secondary Background:
#F8FAFC(Light Slate for panel areas) - Primary Action (Buttons):
#2563EB(Vibrant Blue) - Text/Labels:
#1E293B(Slate Gray) - Accents:
#CBD5E1(Border and Divider lines) - Ball Colors: High-contrast saturated colors (Orange
#F97316, Teal#14B8A6, Purple#8B5CF6) for visibility.
Technical Directives
- Architecture: All HTML, CSS, and JavaScript must be contained in a single index.html file.
- Storage: Absolutely no
localStorage,sessionStorage, orcookies. All data must exist only in memory variables. - Performance: Use
requestAnimationFramefor smooth, 60fps animations. Avoid heavy library dependencies; use Vanilla JS for canvas rendering. - Interactivity: Custom modal dialogs (using
<dialog>or absolute-positioneddivs) must be used instead ofalert()orconfirm(). - Security: Ensure all external references (if any) are from secure, reputable CDNs and properly sandboxed.
- Responsiveness: Use CSS Flexbox/Grid to ensure the canvas scales while maintaining the aspect ratio on smaller screens.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is siteswap notation?
Siteswap is a mathematical notation used by jugglers to describe the timing and relative heights of throws in a juggling pattern. Each number in the sequence represents the duration (in beats) that a ball stays in the air, allowing jugglers to communicate and plan complex tricks efficiently. By using this tool, you can visualize these numbers as physical trajectories. It translates the abstract numerical sequences into a clear, animated representation, making it much easier to understand how specific throws relate to the overall rhythm of the pattern.
How does this animator work?
The animator utilizes a web-based physics engine to render ball trajectories based on the siteswap string you provide. It calculates the necessary arc for each throw based on the beat and height defined by the notation, ensuring a smooth and accurate representation of the pattern in real-time. You can interact with the simulation by adjusting the speed of the animation or pausing the playback to study specific ball hand-offs. The interface provides granular control over the playback, allowing you to slow down complex patterns to better grasp the timing required to perform them.
Is this tool mobile-friendly?
Yes, this tool is designed with a mobile-first approach using responsive layout principles. The animation canvas and control panel automatically adjust to fit any screen size, ensuring that you can access and view your juggling patterns on smartphones, tablets, or desktop computers without any layout issues. The controls are optimized for touch interactions, making it simple to start, pause, or adjust the settings on a mobile device. Whether you are at a practice space or sitting at a desk, the experience remains consistent and professional.
Can I save my custom patterns?
For security and privacy, this application operates entirely in-memory and does not use persistent storage like cookies or local storage. This means that all settings and pattern configurations are reset when the page is refreshed or closed, keeping your browsing environment clean and secure. If you want to keep a specific pattern, we recommend bookmarking the page if you are using URL parameters for configuration, or simply copying the siteswap string into your own notes. This ensures that you can always return to your favorite patterns without relying on browser storage.
