<braid-composer/>

Why this project?

Braid groups are one of the most elegant structures in mathematics — sitting at the intersection of topology, algebra, and geometry. They describe how strands can be woven together, with deep connections to knot theory, quantum computing (anyons), and algebraic geometry (monodromy). Yet they're almost never explored through interactive creative tools. This project bridges that gap: turning abstract algebra into something you can see, touch, and hear.

What is it?

An interactive Artin braid group explorer where you compose braids visually and hear them as multi-voice music. Each strand maps to a musical voice in a chosen scale. When strands cross, harmonic events are triggered — the topology of your braid becomes melody. The braid word (e.g., σ₁σ₂⁻¹σ₁) is displayed as both mathematical notation and a playable score.

How does it work?

• Braid Group Bₙ: Generated by σ₁, ..., σₙ₋₁ where σᵢ crosses strand i over strand i+1. The Artin relations govern simplification: σᵢσⱼ = σⱼσᵢ for |i-j|≥2, and σᵢσᵢ₊₁σᵢ = σᵢ₊₁σᵢσᵢ₊₁.
• Visual rendering: Strands are drawn as smooth cubic Bézier curves through crossing points. Over-strands render thicker at crossings for clear depth perception.
• Audio synthesis: Web Audio API oscillators map each strand to a pitch in the selected scale. Crossings trigger chord events — over-crossings play the base interval, inverse crossings add harmonic tension.
• Simplification: The engine applies Artin relations and cancels adjacent inverses (σᵢσᵢ⁻¹ = 1) to reduce braid words to shorter equivalent forms.

How to use it

• Add crossings: Click between adjacent strands on the canvas, or use the σᵢ / σᵢ⁻¹ generator buttons above.
• Remove crossings: Click an existing crossing to remove it, or click the inverse generator button to undo the last matching crossing.
• Play: Press the Play button (▶) to animate through your braid and hear each crossing as a musical event. The playhead sweeps from top to bottom.
• Simplify: Click Simplify to reduce your braid word using Artin relations — visually see how σ₁σ₂σ₁ becomes σ₂σ₁σ₂.
• Presets: Load pre-made braids like the Full Twist, Artin Relation demonstration, or a random braid.
• Strands: Change the strand count (2–8) to explore larger braid groups. Note: changing strands clears the current braid.
• Scale & Tempo: Choose from Pentatonic, Major, Minor, Dorian, or Chromatic scales. Adjust tempo and volume with sliders.
• Glow toggle: Enable/disable the glow effect on active strands during playback for a more dramatic visual experience.