← Back to App

🎼 Rhythm Pattern Explorer

Mathematical Analysis and Exploration of Rhythmic Patterns

Interactive Documentation with Mathematical Equations

🎯 Overview

The Rhythm Pattern Explorer is a sophisticated web application that bridges the gap between mathematical music theory and practical rhythm creation. It implements cutting-edge algorithms from researchers like Andrew Milne, Godfried Toussaint, and Clarence Barlow to provide musicians, composers, researchers, and curious minds with powerful tools for understanding and creating rhythmic patterns.

🔢 Mathematical Foundation

Built on peer-reviewed research in mathematical music theory, providing rigorous analytical tools for rhythm analysis.

🎵 Universal Pattern Support

Parse 20+ different rhythm notation formats including Euclidean rhythms, regular polygons, and custom patterns.

🎛️ Interactive Analysis

Real-time mathematical analysis with perfect balance theory, syncopation measurement, and geometric visualization.

🔄 Intelligent Transformations

Advanced pattern transformations using Barlow indispensability theory and progressive offset systems.

📐 Mathematical Theory

Andrew Milne's Perfect Balance Theory

Andrew Milne's work on perfect balance provides the mathematical foundation for understanding rhythmic equilibrium. A pattern is perfectly balanced when the sum of its onset vectors equals zero in the complex plane.

Perfect Balance Condition
$$\sum_{j=1}^{k} e^{i2\pi k_j/n} = 0$$
Where $k_j$ are the onset positions, $n$ is the total number of steps, and $i$ is the imaginary unit.

Key Insights from Milne's Theory:

  • Perfect balance creates perceptually stable rhythms
  • Can be achieved through polygon combinations and strategic subtraction
  • Relates to symmetry and geometric distribution
  • Provides objective measure of rhythmic "centeredness"

Balance Magnitude Calculation

Balance Magnitude
$$|Balance| = \left|\sum_{j=1}^{k} e^{i2\pi k_j/n}\right|$$
The magnitude indicates how close a pattern is to perfect balance. Perfect balance occurs when this equals zero.

Normalized Balance Score

Normalized Balance Score
$$\text{Normalized Balance} = \frac{\left|\sum_{j=1}^{k} e^{i2\pi k_j/n}\right|}{k}$$
Normalizing by the number of onsets allows comparison between patterns of different densities.

Center of Gravity Analysis

The center of gravity represents the geometric centroid of the rhythm pattern in the complex plane, providing insight into the pattern's spatial distribution.

Center of Gravity
$$CoG = \frac{1}{k}\sum_{j=1}^{k} e^{i2\pi k_j/n}$$
The center of gravity is the normalized sum of onset vectors, indicating the pattern's geometric center.
Angular Position
$$\theta = \arctan2(\text{Im}(CoG), \text{Re}(CoG)) \times \frac{180}{\pi}$$
The angle of the center of gravity indicates the rotational bias of the pattern.

Clarence Barlow's Indispensability Theory

Barlow's indispensability theory quantifies the metric importance of each position in a rhythmic cycle, providing a mathematical foundation for understanding syncopation and metric hierarchy.

Indispensability Calculation

For a position $p$ in a meter of $n$ steps:

  • If $p = 0$ (downbeat): $\text{indispensability} = 1.0$
  • If $p = n-1$ (pickup beat): $\text{indispensability} = 0.75$
  • Otherwise: $\text{indispensability} = \frac{1}{\prod \text{prime factors of } \frac{n}{\gcd(p, n)}}$
Barlow Indispensability
$$I(p, n) = \begin{cases} 1.0 & \text{if } p = 0 \\ 0.75 & \text{if } p = n-1 \\ \frac{1}{\prod_{q \text{ prime}} q^{v_q(n/\gcd(p,n))}} & \text{otherwise} \end{cases}$$
Where $v_q(m)$ is the $q$-adic valuation (the exponent of prime $q$ in the factorization of $m$).

⚙️ Core Algorithms

Euclidean Rhythm Algorithm (Bjorklund's Algorithm)

Based on Godfried Toussaint's research, the Euclidean algorithm distributes onsets as evenly as possible across a given number of steps.

Euclidean Distribution Algorithm

To distribute $k$ onsets across $n$ steps:

  1. Start with $k$ groups of "1" (onset) and $(n-k)$ groups of "0" (rest)
  2. Repeatedly pair groups from opposite ends until no more pairs can be formed
  3. Continue until only one or two distinct group types remain
  4. Concatenate the final groups to form the rhythm pattern
Euclidean Rhythm Generation
$$E(k, n) = \text{Bjorklund}(k, n-k)$$
The Euclidean rhythm $E(k,n)$ is equivalent to applying Bjorklund's algorithm to distribute $k$ events across $n$ time slots.

Mathematical Properties

Euclidean Complement
$$\overline{E(k, n)} = E(n-k, n)$$
The complement of a Euclidean rhythm is also Euclidean, with onset and rest positions swapped.

Regular Polygon Generator

Regular polygons provide a geometric approach to rhythm generation, where vertices of polygons inscribed in a circle correspond to onset positions.

Polygon Vertex Positions
$$P(v, o, n) = \left\{\left\lfloor \frac{(j \cdot n + o \cdot n) \bmod (v \cdot n)}{v} \right\rfloor : j = 0, 1, \ldots, v-1\right\}$$
Where $v$ is the number of vertices, $o$ is the offset, and $n$ is the number of steps in the expanded pattern.

Polygon Combination Mathematics

LCM Expansion for Polygon Combinations
$$P(v_1, o_1) + P(v_2, o_2) = P(v_1, o_1, \text{lcm}(v_1, v_2)) \cup P(v_2, o_2, \text{lcm}(v_1, v_2))$$
When combining polygons, they are expanded to their least common multiple to ensure proper alignment.

Random Pattern Generator with Bell Curve Distribution

Random patterns provide stochastic rhythm generation with musical intelligence through bell curve distribution, avoiding musically uninteresting extremes.

Bell Curve Distribution Algorithm

For R(r,n) patterns, onset counts are generated using normal distribution:

  1. Apply Box-Muller transformation to generate normal distribution
  2. Map to range [1, n-1] to avoid empty or full patterns
  3. Center distribution around n/2 for optimal musical density
  4. Use 3-sigma rule: 99.7% of values within musical range
Box-Muller Transformation
$$Z_0 = \sqrt{-2\ln(U_1)} \cos(2\pi U_2)$$
Where $U_1, U_2$ are uniform random variables, generating normally distributed $Z_0$.
Musical Range Mapping
$$\text{OnsetCount} = \text{round}\left(\frac{n}{2} + Z_0 \cdot \frac{n-2}{6}\right)$$
Maps standard normal distribution to range [1, n-1] with mean at n/2, avoiding musical extremes.

Musical Benefits

  • Avoids Empty Patterns: Rarely generates 0 onsets (musically uninteresting)
  • Avoids Full Patterns: Rarely generates all onsets (rhythmically static)
  • Favors Musical Densities: Most likely to generate moderate onset counts
  • Maintains Unpredictability: Still provides sufficient randomness for variation

🔄 Pattern Transformers

Barlow Transformer

The Barlow Transformer uses indispensability theory to intelligently add or remove onsets while preserving rhythmic coherence.

Dilution Process (Onset Removal)

  1. Calculate indispensability for all current onset positions
  2. Sort onsets by indispensability (ascending for dilution)
  3. Remove onsets with lowest indispensability values first
  4. Continue until target onset count is reached

Concentration Process (Onset Addition)

  1. Calculate indispensability for all positions without onsets
  2. Sort empty positions by indispensability (descending for concentration)
  3. Add onsets to positions with highest indispensability values
  4. Continue until target onset count is reached
Wolrab Mode (Reverse Logic)
$$\text{Wolrab Dilution: Remove } \max(I(p, n)) \text{ positions first}$$ $$\text{Wolrab Concentration: Add to } \min(I(p, n)) \text{ positions first}$$
Wolrab mode inverts the indispensability logic, creating anti-metrical patterns that deliberately conflict with metric expectations.

Progressive Offsets

Progressive offsets provide systematic pattern rotation with customizable step increments.

Pattern Rotation
$$\text{Rotate}(P, r) = \{(p + r) \bmod n : p \in P\}$$
Where $P$ is the original pattern, $r$ is the rotation amount, and $n$ is the pattern length.
Progressive Stepping
$$\text{Step}_i = \text{Rotate}(P_0, i \cdot s)$$
Where $P_0$ is the original pattern, $i$ is the step number, and $s$ is the step increment.

Progressive Pattern Lengthening

Progressive lengthening extends patterns by appending random steps with intelligent bell curve onset distribution.

Progressive Extension Process

  1. User specifies number of steps to add per extension
  2. Calculate onset count using bell curve distribution (same as R(r,n))
  3. Generate random onset positions within extension section
  4. Append extension to current pattern
  5. Update pattern length and extension count
Pattern Extension
$$P_{\text{extended}} = P_{\text{current}} \oplus \text{RandomExtension}(n_{\text{add}}, \text{OnsetCount}_{\text{bell}}(n_{\text{add}}))$$
Where $\oplus$ represents concatenation, $n_{\text{add}}$ is steps to add, and $\text{OnsetCount}_{\text{bell}}$ uses bell curve distribution.
Cumulative Extension Length
$$L_i = L_0 + i \cdot n_{\text{add}}$$
Where $L_0$ is the original length, $i$ is the extension number, and $n_{\text{add}}$ is steps per extension.

Musical Intelligence Features

  • Bell Curve Distribution: Uses same logic as R(r,n) to avoid musical extremes
  • Progressive Building: Each Enter press adds another extension for live composition
  • Universal Compatibility: Works with any pattern type or length
  • Intelligent Randomness: Favors musically interesting onset densities

🎨 Pattern Creation

The Pattern Creation module provides an intuitive interface for generating rhythmic patterns using five different algorithmic approaches. This streamlined tool allows musicians and researchers to quickly create and explore various rhythmic structures.

Interface Overview

Mode Selection (Radio Buttons)

  • Euclidean: Even distribution using Euclidean algorithm
  • Dilcue: Anti-Euclidean patterns for syncopated effects
  • Barlow: Indispensability theory for intelligent placement
  • Wolrab: Anti-Barlow for groove-oriented patterns
  • Random: Distribution-based randomness with musical intelligence
  • Polygon: Geometric patterns using regular polygons with combination support

Parameters (Inline Controls)

  • Onsets: Number of active beats in the pattern
  • Steps: Total length of the pattern
  • Offset: Rotation offset for pattern start position
  • Target: Optional target onset count for progressive mode

Progressive Mode

When a target value is specified, the system automatically enables progressive mode, allowing you to step through transformations from the current onset count to the target count using the Enter key.

Keyboard Interface

  • Enter: Generate pattern or step to next in progressive sequence
  • Cmd/Ctrl+Enter: Add current pattern to database
  • Parameter Changes: Automatically reset progressive state

Design Philosophy

This module focuses on pattern generation rather than transformation. Unlike the Pattern Transformers that modify existing patterns, Pattern Creation generates new rhythmic structures from algorithmic foundations. The streamlined interface prioritizes quick experimentation and iterative creation.

Random Mode Distributions

Distribution Types

  • Uniform: Equal probability for all positions - pure randomness
  • Bell Curve: Favors middle positions for balanced, musical patterns
  • Syncopated: Emphasizes off-beat positions for rhythmic tension
  • Balanced: Even spacing with controlled randomness variation
  • Clustered: Groups onsets together with varying cluster density

Intensity Control

The intensity slider (0-100%) controls how strongly the distribution pattern is applied:

  • Low Intensity (0-30%): Subtle distribution effects, more uniform
  • Medium Intensity (40-60%): Balanced distribution characteristics
  • High Intensity (70-100%): Strong distribution effects, more pronounced patterns

Random Mode Behavior

  • Each Generation: Produces a completely different pattern
  • Parameters: Only Onsets and Steps (offset not applicable)
  • Random Onsets: Enter 'r' for random onset count using bell curve distribution
  • Progressive Mode: Not available for random generation
  • Enter Key: Generates new random variation each time

Polygon Mode Interface

Polygon Builder

The Polygon mode provides a visual interface for combining up to 3 regular polygons with addition and subtraction operations:

  • Vertices: 2-32 vertices (bipoint to 32-gon)
  • Offset: Optional rotation offset for each polygon
  • Multiplier: Optional expansion factor (1-8x)
  • Operations: + (addition) or - (subtraction) between polygons
  • Visual Icons: Dynamic polygon symbols update based on vertex count

Polygon Combination Mathematics

When combining multiple polygons, the system:

  • LCM Expansion: Automatically expands all polygons to their least common multiple
  • Addition: Combines patterns using logical OR (union of onsets)
  • Subtraction: Removes onsets where both patterns have beats
  • Perfect Balance: Strategic subtraction can achieve perfect balance patterns

Polygon Mode Features

  • Add/Remove Terms: + Add Polygon button and × remove buttons
  • Formula Display: Shows combined formula like P(3,1)+P(5,0)-P(2,0)
  • Progressive Mode: Not available (polygons define their own structure)
  • Bipoint Support: 2-vertex patterns create alternating rhythms
  • Geometric Names: Visual icons show triangle, pentagon, etc.
🎯 Key Difference: Pattern Creation generates new patterns, while Pattern Transformers modify existing ones.

🎹 MIDI Output System

The Rhythm Pattern Explorer includes comprehensive real-time MIDI output capabilities, enabling direct integration with DAWs, hardware synthesizers, and MIDI-enabled applications. The system provides cross-browser compatibility and professional-grade timing accuracy.

Supported Browsers & Methods

🚀 Brave/Chrome/Edge - WebMIDI

Status: ✅ Recommended

Direct MIDI output using native WebMIDI API. No additional software required.

Setup: Click MIDI toggle → Grant permission → Done!

🖥️ Safari (Mac) - WebSocket Bridge

Status: ✅ Working (Local HTTP only)

WebSocket bridge converts messages to MIDI output via Python script.

Setup: Run Python bridge → Serve app locally → Enable MIDI

Note: HTTPS hosted version blocked by browser security

📱 Safari (iOS/iPad)

Status: ❌ Limited

Browser security restrictions prevent direct MIDI output.

Alternative: Use native iOS MIDI apps

🦊 Firefox

Status: 🟡 Experimental

OSC bridge support for MIDI output via external tools.

Setup: Requires OSC-to-MIDI bridge software

Quick Start Guide

Brave Browser (Easiest Method)

  1. Open Brave Browser
  2. Click the MIDI toggle (🎹 icon) in the app interface
  3. Grant MIDI permission when prompted by browser
  4. Play patterns → MIDI outputs to your default MIDI device

Requirements: None - works immediately with any MIDI-capable device or software

Safari (Mac) with Python Bridge

⚠️ Important: Safari MIDI requires local HTTP version. The HTTPS hosted version cannot access localhost due to browser security restrictions.
  1. Download bridge script: minimal-midi-bridge.py
  2. Install dependencies: pip install websockets mido python-rtmidi
  3. Run bridge: python3 minimal-midi-bridge.py
  4. Serve app locally: python3 serve-app.py --port 3000
  5. Open Safari: http://localhost:3000/app/ (not HTTPS version)
  6. Enable MIDI in app → connects to bridge automatically

MIDI Configuration

Default MIDI Settings
Channel: 1 # MIDI channel (1-16) Base Note: 36 # C2 - kick drum position Velocity: 100 # Note velocity (1-127) Note Duration: 100ms # Note off timing
MIDI output uses standard MIDI protocol with configurable parameters for musical flexibility.

Common MIDI Note Assignments

  • 36 (C2): Kick drum (default)
  • 38 (D2): Snare drum
  • 42 (F#2): Hi-hat
  • 60 (C4): Middle C
  • 69 (A4): A440 reference tone

DAW Integration Setup

Mac Setup (IAC Driver)

  1. Open Audio MIDI Setup (/Applications/Utilities/)
  2. Window → Show MIDI Studio
  3. Double-click IAC Driver
  4. Check "Device is online"
  5. Set Ports to at least 1 port
  6. Click Apply

Windows Setup (Virtual MIDI)

  1. Install loopMIDI (free virtual MIDI port software)
  2. Create virtual port for DAW communication
  3. Configure your DAW to receive from virtual port

Popular DAW Configuration

GarageBand

  • Create Software Instrument track
  • Set Input: IAC Driver Bus 1
  • Choose drum kit or instrument
  • Record-enable track

Logic Pro

  • Create Software Instrument track
  • Set MIDI Input: IAC Driver Bus 1
  • Load desired instrument
  • Record-enable and test

Ableton Live

  • Preferences → MIDI
  • Control Surface: IAC Driver Bus 1
  • Create MIDI track
  • Set input to IAC Driver

Hardware Synths

  • Connect MIDI interface
  • Set synth MIDI channel
  • Route through interface in DAW
  • Direct hardware output

Technical Implementation

MIDI Message Format
Note On: [0x90 + channel, note, velocity] Note Off: [0x80 + channel, note, 0] Example: Channel 1, Note 36, Velocity 100 Note On: [0x90, 36, 100] Note Off: [0x80, 36, 0]
Standard MIDI protocol ensures compatibility with all MIDI-capable devices and software.

Timing Accuracy

  • WebMIDI: Sub-millisecond accuracy, direct hardware access
  • WebSocket Bridge: ~5-10ms latency, excellent for most applications
  • Audio Sync: Perfect synchronization with visual sequencer
  • Scheduling: Lookahead buffering prevents timing jitter

Troubleshooting

No MIDI Permission (Brave/Chrome)

  • Ensure you click the MIDI toggle button
  • Try starting pattern playback first (audio context requirement)
  • Check Site Settings → MIDI → Allow
  • Restart browser if permission issues persist

Safari Bridge Not Connecting

  • HTTPS Security Block: Hosted version (enkerli.github.io) cannot access localhost HTTP services
  • Solution: Use local HTTP version: python3 serve-app.py --port 3000
  • Verify Python bridge shows "server listening" message
  • Check localhost access: try http://localhost:3000/app/
  • Ensure ports 8080 (bridge) and 3000 (app) are available
  • Restart bridge: Ctrl+C and run python3 minimal-midi-bridge.py

No MIDI in DAW

  • Check IAC Driver enabled (Mac) or virtual MIDI port (Windows)
  • Verify DAW input settings: Set to IAC Driver Bus 1
  • Record-enable track in DAW
  • Test with MIDI monitoring software to verify output

Advanced Features

Multiple MIDI Outputs

  • Mac: Create multiple IAC Driver buses for routing
  • DAW Routing: Use internal MIDI routing to multiple instruments
  • Hardware: Connect multiple devices via USB MIDI hub

Custom MIDI Mapping

// Modify settings in midi-output.js baseNote: 60, // Change to C4 for melodic instruments channel: 10, // Channel 10 for drums (General MIDI standard) velocity: 127, // Maximum velocity for accent patterns
🎹 Professional Integration: The MIDI system provides studio-quality timing and connectivity for serious music production workflows.

🚀 Getting Started

Quick Start Guide

  1. Open the Application: Load the Rhythm Pattern Explorer in a modern web browser
  2. Parse Your First Pattern: Enter E(3,8) in the Universal Pattern Input
  3. Explore Analysis: View the mathematical breakdown and circular visualization
  4. Try Transformations: Use the Barlow Transformer to dilute/concentrate onsets
  5. Generate Variations: Create mutated patterns with the Rhythm Mutator
  6. Save to Database: Add interesting patterns for later exploration
💡 Pro Tip: Click the 🧮 buttons next to analysis sections to view the mathematical formulas behind the calculations!

📝 Universal Pattern Input (UPI) System

The UPI system provides a comprehensive notation for rhythm patterns, supporting everything from simple binary patterns to complex progressive transformations with accent layers.

Basic Pattern Generation

Algorithmic Patterns

E(3,8) # Euclidean: Even distribution (10010010) B(3,8) # Barlow: Indispensability-based (10001010) W(3,8) # Wolrab: Anti-Barlow (01100100) D(3,8) # Dilcue: Anti-Euclidean (01101001) P(5,12,0) # Pentagon: 5 vertices, 12 steps, 0 offset R(4,8,42) # Random: 4 onsets, 8 steps, seed 42

Binary and Numeric Patterns

101010 # Binary: Direct bit pattern 0x2A:8 # Hexadecimal: 42 in hex (00101010) 0o52:8 # Octal: 42 in octal (00101010) 42:8 # Decimal: 42 as binary (00101010) [0,2,4,6]:8 # Onset array: Positions 0,2,4,6 in 8 steps

Progressive Transformations

Manual Control (Plugin ">" Syntax)

E(1,8)E>8 # Progressive Euclidean: 1→8 onsets (manual trigger) E(8,8)B>1 # Progressive Barlow dilution: 8→1 onsets B(3,13)W>11 # Progressive Barlow to Wolrab: 3→11 onsets E(1,8)@3 # Progressive offset: rotation by 3 steps
🎛️ Plugin Usage: In the audio plugin, progressive transformations with ">" syntax require manual triggers via the button or MIDI input. This gives you full control over when patterns advance.

Automatic Advancement (WebApp "@#" Syntax)

E(1,8)@#5 # Auto-advancing offset: +5 rotation per beat E(1,8)E@#8 # Auto-advancing progression: toward 8 onsets
🌐 WebApp Usage: The "@#" syntax provides automatic advancement for live performance and generative applications in the web version.

Accent Pattern System (v0.03c+)

Curly Bracket Notation

{100}E(3,8) # Accent first onset of tresillo {10010}E(5,8) # Accent 1st and 4th onsets of quintillo {10}E(4,8) # Alternating accents (polyrhythmic) {E(2,5)}E(3,8) # Euclidean accent pattern over rhythm {P(3,0)}B(5,13) # All-accent pattern cycling over Barlow

Accent Pattern Features

  • Polyrhythmic Cycling: Accents cycle when different length from rhythm
  • MIDI Enhancement: Accented notes have pitch offset and higher velocity
  • Visual Indication: Red for accented onsets, green for regular
  • Universal Support: Works with all pattern types (E, B, W, D, P, R)
  • Position Flexible: {accent}pattern or pattern{accent}

Scene Cycling

Pipe Separator (|)

E(3,8)|P(5,12) # Cycle between tresillo and pentagon 100|110|101 # Cycle between binary patterns {100}E(3,8)|{010}B(5,13) # Different accent patterns per scene
🎭 Scene Usage: Scenes allow you to create sequences of different patterns. Each trigger advances to the next scene in the sequence.

Pattern Combinations

Addition and Subtraction

E(3,8)+P(5,12) # Union: Combine onsets E(3,8)-P(5,12) # Subtraction: Remove overlaps P(3,0)+P(5,0)-P(2,0) # Complex: Perfect balance via subtraction

Combination Mathematics

  • LCM Expansion: Patterns expanded to least common multiple
  • Addition (+): Logical OR - union of all onsets
  • Subtraction (-): Remove onsets where both patterns have beats
  • Perfect Balance: Strategic subtraction can achieve perfect balance

Quick Reference

Pattern Types

  • E(n,s): Euclidean
  • B(n,s): Barlow
  • W(n,s): Wolrab
  • D(n,s): Dilcue
  • P(v,s,o): Polygon
  • R(n,s,seed): Random

Operators

  • +: Combine patterns
  • -: Subtract patterns
  • |: Scene cycling
  • @: Offset rotation
  • >: Progressive (manual)
  • @#: Progressive (auto)

Accent Notation

  • {101}pattern: Binary accents
  • {E(2,5)}pattern: Euclidean accents
  • {P(3,0)}pattern: Polygon accents
  • pattern{101}: Postfix notation

Number Systems

  • 101010: Binary
  • 0x2A:8: Hexadecimal
  • 0o52:8: Octal
  • 42:8: Decimal
  • [0,2,4]:8: Onset array

💡 Usage Examples

Perfect Balance Discovery

P(3,1)+P(5,0)-P(2,0) # Results in perfect balance # Mathematical verification: Σe^(i2πkⱼ/n) = 0

Cultural Rhythm Analysis

E(3,8) # Cuban Tresillo E(5,8) # Cuban Cinquillo E(7,12) # West African Gahu E(2,5) # Korean traditional rhythm

Progressive Transformation Workflow

1. Start: E(5,16) 2. Barlow Analysis: Calculate indispensability profile 3. Progressive Dilution: Reduce to 3 onsets 4. Enable Wolrab Mode: Reverse indispensability logic 5. Progressive Concentration: Increase to 7 onsets 6. Result: Anti-metrical groove pattern

🏗️ Technical Architecture

Modular Design

app/ ├── index.html # Main application entry point ├── documentation.html # Interactive documentation (this file) ├── platform-utils.js # Cross-platform compatibility ├── math-renderer.js # Mathematical equation rendering ├── math-core.js # Core mathematical utilities ├── pattern-analysis.js # Balance and syncopation analysis ├── pattern-generators.js # Euclidean and polygon generators ├── pattern-processing.js # Universal parser and converters ├── midi-output.js # Cross-browser MIDI output system ├── sequencer-controller.js # Playback control with MIDI integration ├── sequencer-audio.js # Web Audio API synthesis ├── sequencer-visual.js # Circular visualization ├── app-controller-browser.js # Main application orchestrator └── app-styles.css # Complete styling system

Mathematical Rendering System

  • MathJax Integration: Professional mathematical notation rendering
  • LaTeX Support: Full LaTeX equation syntax for complex expressions
  • Dynamic Rendering: Real-time equation rendering for interactive content
  • Cross-Platform Compatibility: Consistent display across all browsers
  • Responsive Design: Adaptive sizing for mobile and desktop

Audio & MIDI Systems

  • Web Audio API: Precise timing with lookahead scheduling
  • WebMIDI Integration: Direct MIDI output for Chrome, Edge, Opera, Brave
  • WebSocket Bridge: Safari MIDI support via Python bridge
  • Cross-Browser Compatibility: Automatic method detection and fallback
  • Professional Timing: Sub-millisecond accuracy for studio use

Performance Optimizations

  • Efficient Parsing: Single-pass pattern recognition
  • Caching Systems: Store analysis results to avoid recalculation
  • Lazy Loading: Defer non-critical calculations
  • Equation Rendering: On-demand MathJax rendering
  • MIDI Buffering: Optimized scheduling prevents timing jitter