import React, { useState, useRef, useEffect } from "react"; let engine = null; function strudel() { engine ||= import("https://esm.sh/@strudel/web@1.3.0").then(async (web) => { await web.initStrudel({ prebake: () => web.samples( "https://cdn.jsdelivr.net/gh/tidalcycles/Dirt-Samples@master/strudel.json" ), }); return web; }); return engine; } const ROWS = [ ["bd", "kick"], ["sd", "snare"], ["hh", "hat"], ]; const START = { bd: [1, 0, 0, 0, 1, 0, 0, 0], sd: [0, 0, 1, 0, 0, 0, 1, 0], hh: [1, 1, 1, 1, 1, 1, 1, 1], }; const STEPS = 8; const CYCLE_SEC = 60 / (110 / 8); // one trip around the 8 steps function toCode(grid) { const lines = ROWS.map(([sound]) => ` s("${grid[sound].map((on) => (on ? sound : "~")).join(" ")}")` ); return `stack(\n${lines.join(",\n")}\n).cpm(110/8)`; } export default function App() { const [grid, setGrid] = useState(START); const [state, setState] = useState("idle"); const [step, setStep] = useState(-1); const playingRef = useRef(false); const startRef = useRef(0); const rafRef = useRef(0); const clockRef = useRef(null); // () => seconds, from the engine's audio clock const evaluate = async (g) => { const web = await strudel(); await web.evaluate(toCode(g)); return web; }; const toggleCell = async (sound, i) => { const next = { ...grid, [sound]: grid[sound].map((v, j) => (j === i ? (v ? 0 : 1) : v)) }; setGrid(next); if (playingRef.current) evaluate(next); }; useEffect(() => { const tick = () => { if (playingRef.current && clockRef.current) { const elapsed = clockRef.current() - startRef.current; setStep(Math.floor(((elapsed / CYCLE_SEC) % 1) * STEPS)); } rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, []); const togglePlay = async () => { if (playingRef.current) { (await strudel()).hush(); playingRef.current = false; setStep(-1); setState("idle"); } else { setState("loading"); const web = await evaluate(grid); const getCtx = web.getAudioContext || globalThis.getAudioContext; if (getCtx) { const ctx = getCtx(); clockRef.current = () => ctx.currentTime; } else { clockRef.current = () => performance.now() / 1000; } startRef.current = clockRef.current(); playingRef.current = true; setState("playing"); } }; return (

{ROWS.map(([sound, label]) => (

{label} {grid[sound].map((on, i) => { const now = i === step; const cls = on ? now ? "bg-white border-white shadow-[0_0_16px_#7CFC00]" : "bg-[#7CFC00] border-[#7CFC00]" : `bg-transparent ${ now ? "border-[#7CFC00]" : i % 4 === 0 ? "border-[#666]" : "border-[#333]" }`; return (

))}

toggle steps while it plays — sound by{" "} Strudel {" "} (AGPL), loaded at runtime

); }