Eucli Strudel Web

Web version of the Euclidean rhythm sequencer that generates Strudel.cc live-coding notation. Designed as a visual companion for Strudel-based performances and experimentation.

Drag on concentric circles to shape rhythms with the Bjorklund algorithm, hear them instantly through the Web Audio API, and copy the generated code straight into Strudel.

How It Works

The app displays three concentric orbital rings, one per track (Kick, Snare, Hi-hat). Each ring arranges dots around a circle representing sequencer steps. Active pulses are distributed as evenly as possible using the Euclidean/Bjorklund algorithm.

The resulting pattern is converted in real time to valid Strudel.cc notation that you can copy and paste directly into the Strudel REPL.

Interaction

• Drag up/down on a ring to add or remove pulses
• Drag left/right on a ring to rotate the pattern
• Click the code panel to switch between E(k,n) and struct notation formats
• Click copy to copy the Strudel code to clipboard
• Adjust volume per track with the sliders
• Click BPM to cycle through tempo presets (80, 100, 120, 140, 160)

Output Formats

Euclidean notation (default):

stack(
  s("bd(4,16)"),
  s("sd(2,16)"),
  s("hh(8,16)")
)

Struct notation:

stack(
  s("bd").struct("1 0 0 0 1 0 0 0 1 0 0 0 1 0 0 0"),
  s("sd").struct("1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0"),
  s("hh").struct("1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0")
)

Tech Stack

• Vite 7 with React plugin
• React 19
• TypeScript (strict mode)
• apx-ds — shared design system providing color tokens, base types (Track, Pattern, StrudelFormat), utilities (Bjorklund algorithm, Strudel code generation), and a Tailwind preset
• Tailwind CSS v3 (using the apx-ds preset)
• Zustand v5 for state management
• Web Audio API with lookahead scheduling for sample-accurate playback
• Native SVG in JSX for the circular sequencer UI
• Lucide icons

Project Structure

src/
  types/sequencer.ts             # Re-exports apx-ds types, SequencerState & actions interfaces
  store/useSequencerStore.ts     # Zustand store (state + actions, uses apx-ds utils)
  hooks/useAudioEngine.ts        # Web Audio API engine with lookahead scheduling
  components/
    SolarSystem.tsx              # Orbital ring display + pointer event handling
    TrackCircle.tsx              # Single track ring (native SVG)
    PlayControls.tsx             # Play/pause + BPM
    VolumeSliders.tsx            # Per-track volume control
    CodeDisplay.tsx              # Strudel code output + copy
    HelpOverlay.tsx              # Help modal
  App.tsx                        # Root component with responsive layout
  main.tsx                       # Entry point
  index.css                      # Tailwind directives + apx-ds CSS variables
public/sounds/                   # TR-808 samples (kick, snare, hihat)

The core logic (Bjorklund algorithm, Strudel notation, color tokens, base types) lives in the apx-ds design system package. This app extends it with Web Audio playback, pointer-based interaction, and a responsive browser UI.

Getting Started

Prerequisites

• Node.js
• The apx-ds package cloned alongside this project (at ../aPx_ds)

Install and Run

git clone https://github.com/fcador/eucli-strudel-web.git
cd eucli-strudel-web
npm install
npm run dev

Then open http://localhost:5173 in your browser.

Build

npm run build
npm run preview

License

PolyForm Noncommercial License - Copyright (c) Fabien Cador

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to use, copy, modify, and distribute the Software, subject to conditions. See LICENSE for details.