Merge branch 'main' into show

website/src/pages/learn/samples.mdx

@@ -63,7 +63,7 @@ You can also create custom aliases for existing sounds using the `soundAlias` fu
 
 <MiniRepl
   client:idle
-  tune={`soundAlias("RolandTR808_bd", "kick")
+  tune={`soundAlias('RolandTR808_bd', 'kick')
 s("kick")`}
 />
 

website/src/pages/learn/synths.mdx

@@ -48,28 +48,94 @@ You can also use the `crackle` type to play some subtle noise crackles. You can
 
 ### Additive Synthesis
 
-To tame the harsh sound of the basic waveforms, we can set the `n` control to limit the overtones of the waveform:
+Periodic waveforms are composed of several [harmonics](https://en.wikipedia.org/wiki/Harmonic) above a fundamental frequency, lying at integer multiples. These overtones combine to give a sound its unique timbral quality.
+
+For the basic waveforms, we offer you control over these harmonics with the `partials` and `phases` functions.
+
+#### Partials
+
+`partials` refers to the magnitude of each harmonic relative to the fundamental frequency. They can thus be used to spectrally filter these waveforms and tame some of their harshness:
 
 <MiniRepl
   client:idle
   tune={`note("c2 <eb2 <g2 g1>>".fast(2))
 .sound("sawtooth")
-.n("<32 16 8 4>")
+.partials([1, 1, "<1 0>", "<1 0>", "<1 0>", "<1 0>", "<1 0>"])
 ._scope()`}
 />
 
-When the `n` control is used on a basic waveform, it defines the number of harmonic partials the sound is getting.
-You can also set `n` directly in mini notation with `sound`:
+`partials` can also be used to construct _new_ waveforms not present in our basic set with the 'user' sound source:
 
 <MiniRepl
   client:idle
   tune={`note("c2 <eb2 <g2 g1>>".fast(2))
-.sound("sawtooth:<32 16 8 4>")
+.sound("user")
+.partials([1, 0, 0.3, 0, 0.1, 0, 0, 0.3])
 ._scope()`}
 />
 
-Note for tidal users: `n` in tidal is synonymous to `note` for synths only.
-In strudel, this is not the case, where `n` will always change timbre, be it though different samples or different waveforms.
+We may algorithmically construct lists of magnitudes with Javascript code like:
+
+<MiniRepl
+  client:idle
+  tune={`const numHarmonics = 22;
+note("c2 <eb2 <g2 g1>>".fast(2))
+.sound("saw")
+.partials(new Array(numHarmonics).fill(1))
+._scope()`}
+/>
+
+which acts as a spectral filter. Or:
+
+<MiniRepl
+  client:idle
+  tune={`note("c2 <eb2 <g2 g1>>").fast(2)
+.sound("user")
+.partials(new Array(50).fill(0)
+  .map((_, idx) => ((-1) ** (idx + 1)) / (idx + 1))
+)
+._scope()`}
+/>
+
+which recovers a familiar waveform.
+
+`partials` is also compatible with pattern functions designed to produce lists, like `randL` or `binaryL`:
+
+<MiniRepl
+  client:idle
+  tune={`note("c2 <eb2 <g2 g1>>").fast(2)
+.sound("user")
+.partials(randL(10))
+._scope()`}
+/>
+
+and with lists _of_ patterns:
+
+<MiniRepl
+  client:idle
+  tune={`note("c2 <eb2 <g2 g1>>".fast(4))
+.sound("user")
+.partials([1, 0, "0 1", "0 1 0.3", rand])
+._scope()`}
+/>
+
+Note that the first value in the `partials` array controls the magnitude of the fundamental harmonic rather than the DC offset, which is fixed at 0.
+
+#### Phases
+
+Earlier, we mentioned that periodic waveforms can be broken into a set of harmonics above a fundamental frequency. Each harmonic has two defining properties: its magnitude (how loud it is) and its phase, which determines where in its cycle that sine wave starts when the waveform is built.
+
+These phases too can be declared in Strudel and can give your sounds interesting depth.
+
+<MiniRepl
+  client:idle
+  tune={`s("saw").seg(16).n(irand(12)).scale("F1:minor")
+  .penv(48).panchor(0).pdec(0.05)
+  .delay(0.25).room(0.25)
+  .compressor(-20).vib(0.3)
+  .partials(randL(200))
+  .phases(randL(200))`}
+/>
 
 ## Vibrato
 
@@ -157,7 +223,7 @@ It has 20 parameters in total, here is a snippet that uses all:
   .pitchJump(0) // +/- pitch change after pitchJumpTime
   .pitchJumpTime(0) // >0 time after pitchJump is applied
   .lfo(0) // >0 resets slide + pitchJump + sets tremolo speed
-  .tremolo(0) // 0-1 lfo volume modulation amount
+  .tremolo(0.5) // 0-1 lfo volume modulation amount
   //.duration(.2) // overwrite strudel event duration
   //.gain(1) // change volume
   ._scope() // vizualise waveform (not zzfx related)

website/src/pages/technical-manual/project-start.mdx

@@ -32,7 +32,7 @@ There are 3 quick ways to embed strudel in your website:
 
 ### Inside an iframe
 
-Using an iframe is the most easy way to embed a studel tune.
+Using an iframe is the most easy way to embed a strudel tune.
 You can embed any pattern of your choice via an iframe and the URL of the pattern of your choice:
 
 ```html
@@ -133,7 +133,7 @@ If you'd rather use your own UI, you can use the `@strudel/web` package:
 </script>
 ```
 
-For more info on this package, see the [@strudel/web README]https://codeberg.org/uzu/strudel/src/branch/main/packages/web#strudel-web).
+For more info on this package, see the [@strudel/web README](https://codeberg.org/uzu/strudel/src/branch/main/packages/web#strudel-web).
 
 ## Via npm
 

website/src/pages/technical-manual/repl.mdx

@@ -117,6 +117,10 @@ Here's an example AST for `c3 [e3 g3]`
 
 which translates to `seq(c3, seq(e3, g3))`
 
+## Vim Keybindings
+
+See the separate page on Vim shortcuts for a quick reference: [/technical-manual/vim](/technical-manual/vim)
+
 ## Scheduling Events
 
 After an instance of `Pattern` is obtained from the user code,

website/src/pages/technical-manual/vim.mdx

@@ -0,0 +1,37 @@
+---
+title: Vim Shortcuts
+layout: ../../layouts/MainLayout.astro
+---
+
+# Vim Shortcuts in the REPL
+
+When the REPL editor (CodeMirror) is configured to use Vim keybindings, the following commands are available:
+
+- :w — Evaluate the current code
+
+  - Triggers the same evaluation as Ctrl+Enter / Alt+Enter
+  - You'll see messages in the Console panel such as:
+    - [vim] :w — evaluating code
+    - [repl] evaluate via event
+    - [eval] code updated
+
+- :q — Stop/pause playback
+
+  - Triggers the same stop action as Alt+.
+  - Useful to quickly stop scheduling without leaving Vim mode
+
+- gc — Toggle line comments for the current selection(s)
+
+  - Works in normal and visual mode
+  - If there's a selection, all selected lines are toggled
+
+Notes
+
+- Behavior respects the current language mode in the editor for comment syntax.
+- If multiple REPL editors are open, commands target the active editor. The implementation dispatches custom events handled by the editor.
+- If you don't see the Console panel, open the right panel in the REPL UI.
+
+Troubleshooting
+
+- If :w logs but evaluation doesn't apply, ensure Vim keybindings are active and try again. You can also use Ctrl+Enter as a fallback.
+- For :q / gc, ensure focus is inside the editor. If an error occurs, reload the page to reset editor state and try again.

website/src/repl/components/panel/PatternsTab.jsx

@@ -79,13 +79,12 @@ const updateCodeWindow = (context, patternData, reset = false) => {
   context.handleUpdate(patternData, reset);
 };
 
-const autoResetPatternOnChange = false
 
 function UserPatterns({ context }) {
   const activePattern = useActivePattern();
   const viewingPatternStore = useViewingPatternData();
   const viewingPatternData = parseJSON(viewingPatternStore);
-  const { userPatterns, patternFilter } = useSettings();
+  const { userPatterns, patternFilter, patternAutoStart } = useSettings();
   const viewingPatternID = viewingPatternData?.id;
   return (
     <div className="flex flex-col gap-2 flex-grow overflow-hidden h-full pb-2 ">
@@ -135,13 +134,13 @@ function UserPatterns({ context }) {
       <div className="overflow-auto h-full bg-background p-2 rounded-md">
         {/* {patternFilter === patternFilterName.user && ( */}
         <PatternButtons
-          onClick={(id) =>
-            updateCodeWindow(
-              context,
-              { ...userPatterns[id], collection: userPattern.collection },
-              autoResetPatternOnChange,
-            )
-          }
+          onClick={(id) => {
+            updateCodeWindow(context, { ...userPatterns[id], collection: userPattern.collection }, patternAutoStart);
+
+            if (context.started && activePattern === id) {
+              context.handleEvaluate();
+            }
+          }}
           patterns={userPatterns}
           started={context.started}
           activePattern={activePattern}
@@ -188,17 +187,14 @@ function FeaturedPatterns({ context }) {
   const examplePatterns = useExamplePatterns();
   const collections = examplePatterns.collections;
   const patterns = collections.get(patternFilterName.featured);
+  const { patternAutoStart } = useSettings();
   return (
     <PatternPageWithPagination
       patterns={patterns}
       context={context}
       initialPage={featuredPageNum}
       patternOnClick={(id) => {
-        updateCodeWindow(
-          context,
-          { ...patterns[id], collection: patternFilterName.featured },
-          autoResetPatternOnChange,
-        );
+        updateCodeWindow(context, { ...patterns[id], collection: patternFilterName.featured }, patternAutoStart);
       }}
       paginationOnChange={async (pageNum) => {
         await loadAndSetFeaturedPatterns(pageNum - 1);
@@ -213,13 +209,14 @@ function LatestPatterns({ context }) {
   const examplePatterns = useExamplePatterns();
   const collections = examplePatterns.collections;
   const patterns = collections.get(patternFilterName.public);
+  const { patternAutoStart } = useSettings();
   return (
     <PatternPageWithPagination
       patterns={patterns}
       context={context}
       initialPage={latestPageNum}
       patternOnClick={(id) => {
-        updateCodeWindow(context, { ...patterns[id], collection: patternFilterName.public }, autoResetPatternOnChange);
+        updateCodeWindow(context, { ...patterns[id], collection: patternFilterName.public }, patternAutoStart);
       }}
       paginationOnChange={async (pageNum) => {
         await loadAndSetPublicPatterns(pageNum - 1);

website/src/repl/components/panel/SettingsTab.jsx

@@ -112,6 +112,7 @@ export function SettingsTab({ started }) {
     multiChannelOrbits,
     isTabIndentationEnabled,
     isMultiCursorEnabled,
+    patternAutoStart,
   } = useSettings();
   const shouldAlwaysSync = isUdels();
   const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
@@ -304,6 +305,11 @@ export function SettingsTab({ started }) {
           onChange={(cbEvent) => settingsMap.setKey('isCSSAnimationDisabled', cbEvent.target.checked)}
           value={isCSSAnimationDisabled}
         />
+        <Checkbox
+          label="Auto-start pattern on pattern change"
+          onChange={(cbEvent) => settingsMap.setKey('patternAutoStart', cbEvent.target.checked)}
+          value={patternAutoStart}
+        />
       </FormItem>
       <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
       <FormItem label="Reset Settings">

website/src/repl/components/panel/SoundsTab.jsx

@@ -62,11 +62,9 @@ export function SoundsTab() {
 
   // stop current sound on mouseup
   useEvent('mouseup', () => {
-    const t = trigRef.current;
+    const ref = trigRef.current;
     trigRef.current = undefined;
-    t?.then((ref) => {
-      ref?.stop(getAudioContext().currentTime + 0.01);
-    });
+    ref?.stop?.(getAudioContext().currentTime + 0.01);
   });
   return (
     <div id="sounds-tab" className="px-4 flex gap-2 flex-col w-full h-full text-foreground">
@@ -124,12 +122,19 @@ export function SoundsTab() {
                   duration: 0.5,
                 };
                 soundPreviewIdx++;
-                const time = ctx.currentTime + 0.05;
                 const onended = () => trigRef.current?.node?.disconnect();
-                trigRef.current = Promise.resolve(onTrigger(time, params, onended));
-                trigRef.current.then((ref) => {
-                  connectToDestination(ref?.node);
-                });
+                try {
+                  // Pre-load the sample by calling onTrigger with a future time
+                  // This triggers the loading but schedules playback for later
+                  const time = ctx.currentTime + 0.05;
+                  const ref = await onTrigger(time, params, onended);
+                  trigRef.current = ref;
+                  if (ref?.node) {
+                    connectToDestination(ref.node);
+                  }
+                } catch (err) {
+                  console.warn('Failed to trigger sound:', err);
+                }
               }}
             >
               {' '}

website/src/repl/idbutils.mjs

@@ -92,11 +92,7 @@ export function registerSamplesFromDB(config = userSamplesDBConfig, onComplete =
 
 async function blobToDataUrl(blob) {
   return new Promise((resolve) => {
-    var reader = new FileReader();
-    reader.onload = function (event) {
-      resolve(event.target.result);
-    };
-    reader.readAsDataURL(blob);
+    resolve(URL.createObjectURL(blob));
   });
 }
 

website/src/repl/prebake.mjs

@@ -6,6 +6,7 @@ import './files.mjs';
 
 const { BASE_URL } = import.meta.env;
 const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
+const baseCDN = 'https://strudel.b-cdn.net';
 
 export async function prebake() {
   // https://archive.org/details/SalamanderGrandPianoV3
@@ -19,23 +20,23 @@ export async function prebake() {
     // => getting "window is not defined", as soon as "@strudel/soundfonts" is imported statically
     // seems to be a problem with soundfont2
     import('@strudel/soundfonts').then(({ registerSoundfonts }) => registerSoundfonts()),
-    samples(`${baseNoTrailing}/piano.json`, undefined, { prebake: true }),
+    samples(`${baseCDN}/piano.json`, `${baseCDN}/piano/`, { prebake: true }),
     // https://github.com/sgossner/VCSL/
     // https://api.github.com/repositories/126427031/contents/
     // LICENSE: CC0 general-purpose
-    samples(`${baseNoTrailing}/vcsl.json`, 'github:sgossner/VCSL/master/', { prebake: true }),
-    samples(`${baseNoTrailing}/tidal-drum-machines.json`, 'github:ritchse/tidal-drum-machines/main/machines/', {
+    samples(`${baseCDN}/vcsl.json`, `${baseCDN}/VCSL/`, { prebake: true }),
+    samples(`${baseCDN}/tidal-drum-machines.json`, `${baseCDN}/tidal-drum-machines/machines/`, {
       prebake: true,
       tag: 'drum-machines',
     }),
-    samples(`${baseNoTrailing}/uzu-drumkit.json`, undefined, {
+    samples(`${baseCDN}/uzu-drumkit.json`, `${baseCDN}/uzu-drumkit/`, {
       prebake: true,
       tag: 'drum-machines',
     }),
-    samples(`${baseNoTrailing}/uzu-wavetables.json`, undefined, {
+    samples(`${baseCDN}/uzu-wavetables.json`, `${baseCDN}/uzu-wavetables/`, {
       prebake: true,
     }),
-    samples(`${baseNoTrailing}/mridangam.json`, undefined, { prebake: true, tag: 'drum-machines' }),
+    samples(`${baseCDN}/mridangam.json`, `${baseCDN}/mrid/`, { prebake: true, tag: 'drum-machines' }),
     samples(
       {
         casio: ['casio/high.wav', 'casio/low.wav', 'casio/noise.wav'],
@@ -145,14 +146,14 @@ export async function prebake() {
           'num/20.wav',
         ],
       },
-      'github:tidalcycles/dirt-samples',
+      `${baseCDN}/Dirt-Samples/`,
       {
         prebake: true,
       },
     ),
   ]);
 
-  aliasBank(`${baseNoTrailing}/tidal-drum-machines-alias.json`);
+  aliasBank(`${baseCDN}/tidal-drum-machines-alias.json`);
 }
 
 const maxPan = noteToMidi('C8');

website/src/settings.mjs

@@ -96,6 +96,11 @@ export function useSettings() {
     isPanelOpen: parseBoolean(state.isPanelOpen),
     userPatterns: userPatterns,
     multiChannelOrbits: parseBoolean(state.multiChannelOrbits),
+    patternAutoStart: isUdels()
+      ? false
+      : state.patternAutoStart === undefined
+        ? true
+        : parseBoolean(state.patternAutoStart),
   };
 }