Merge pull request #356 from tidalcycles/docs

docs: tidal comparison + add global fx + add missing sampler fx
2026-01-11 21:58:37 +00:00 · 2023-01-06 22:02:31 +01:00 · 2023-01-06 22:02:31 +01:00 · c71e893e8e
commit c71e893e8e
parent 68c9008019 3992356517
8 changed files with 366 additions and 92 deletions
--- a/packages/core/controls.mjs
+++ b/packages/core/controls.mjs
@ -155,22 +155,26 @@ const generic_params = [
   *
   * @name bandf
   * @param {number | Pattern} frequency center frequency
+   * @synonyms bpf
   * @example
   * s("bd sd,hh*3").bandf("<1000 2000 4000 8000>")
   *
   */
  ['f', 'bandf', 'A pattern of numbers from 0 to 1. Sets the center frequency of the band-pass filter.'],
+  ['f', 'bpf', ''],
  // TODO: in tidal, it seems to be normalized
  /**
   * Sets the q-factor of the band-pass filter
   *
   * @name bandq
   * @param {number | Pattern} q q factor
+   * @synonyms bpq
   * @example
   * s("bd sd").bandf(500).bandq("<0 1 2 3>")
   *
   */
  ['f', 'bandq', 'a pattern of anumbers from 0 to 1. Sets the q-factor of the band-pass filter.'],
+  ['f', 'bpq', ''],
  /**
   * a pattern of numbers from 0 to 1. Skips the beginning of each sample, e.g. `0.25` to cut off the first quarter from each sample.
   *
@ -269,7 +273,7 @@ const generic_params = [
   * @name cut
   * @param {number | Pattern} group cut group number
   * @example
-   * s("bd sax").cut(1).osc()
+   * s("rd*4").cut(1)
   *
   */
  [
@ -282,53 +286,50 @@ const generic_params = [
   *
   * @name cutoff
   * @param {number | Pattern} frequency audible between 0 and 20000
+   * @synonyms lpf
   * @example
   * s("bd sd,hh*3").cutoff("<4000 2000 1000 500 200 100>")
   *
   */
-  // TODO: add lpf synonym
  ['f', 'cutoff', 'a pattern of numbers from 0 to 1. Applies the cutoff frequency of the low-pass filter.'],
+  ['f', 'lpf'],
  /**
   * Applies the cutoff frequency of the high-pass filter.
   *
   * @name hcutoff
   * @param {number | Pattern} frequency audible between 0 and 20000
+   * @synonyms hpf
   * @example
   * s("bd sd,hh*4").hcutoff("<4000 2000 1000 500 200 100>")
   *
   */
-  // TODO: add hpf synonym
-  [
-    'f',
-    'hcutoff',
-    'a pattern of numbers from 0 to 1. Applies the cutoff frequency of the high-pass filter. Also has alias @hpf@',
-  ],
+  ['f', 'hcutoff', ''],
+  ['f', 'hpf', ''],
  /**
   * Applies the resonance of the high-pass filter.
   *
   * @name hresonance
   * @param {number | Pattern} q resonance factor between 0 and 50
+   * @synonyms hpq
   * @example
   * s("bd sd,hh*4").hcutoff(2000).hresonance("<0 10 20 30>")
   *
   */
-  [
-    'f',
-    'hresonance',
-    'a pattern of numbers from 0 to 1. Applies the resonance of the high-pass filter. Has alias @hpq@',
-  ],
+  ['f', 'hpq', ''],
+  ['f', 'hresonance', ''],
  // TODO: add hpq synonym
  /**
   * Applies the cutoff frequency of the low-pass filter.
   *
   * @name resonance
   * @param {number | Pattern} q resonance factor between 0 and 50
+   * @synonyms lpq
   * @example
   * s("bd sd,hh*4").cutoff(2000).resonance("<0 10 20 30>")
   *
   */
-  ['f', 'resonance', 'a pattern of numbers from 0 to 1. Specifies the resonance of the low-pass filter.'],
-  // TODO: add lpq synonym?
+  ['f', 'lpq'],
+  ['f', 'resonance', ''],
  /**
   * DJ filter, below 0.5 is low pass filter, above is high pass filter.
   *
@ -341,17 +342,36 @@ const generic_params = [
  ['f', 'djf', 'DJ filter, below 0.5 is low pass filter, above is high pass filter.'],
  // ['f', 'cutoffegint', ''],
  // TODO: does not seem to work
-  /*
+  /**
   * Sets the level of the delay signal.
   *
   * @name delay
   * @param {number | Pattern} level between 0 and 1
   * @example
-   * s("bd").delay("<0 .5 .75 1>").osc()
+   * s("bd").delay("<0 .25 .5 1>")
   *
   */
  ['f', 'delay', 'a pattern of numbers from 0 to 1. Sets the level of the delay signal.'],
+  /**
+   * Sets the level of the signal that is fed back into the delay.
+   * Caution: Values >= 1 will result in a signal that gets louder and louder! Don't do it
+   *
+   * @name delayfeedback
+   * @param {number | Pattern} feedback between 0 and 1
+   * @example
+   * s("bd").delay(.25).delayfeedback("<.25 .5 .75 1>").slow(2)
+   *
+   */
  ['f', 'delayfeedback', 'a pattern of numbers from 0 to 1. Sets the amount of delay feedback.'],
+  /**
+   * Sets the time of the delay effect.
+   *
+   * @name delaytime
+   * @param {number | Pattern} seconds between 0 and Infinity
+   * @example
+   * s("bd").delay(.25).delaytime("<.125 .25 .5 1>").slow(2)
+   *
+   */
  ['f', 'delaytime', 'a pattern of numbers from 0 to 1. Sets the length of the delay.'],
  /* // TODO: test
   * Specifies whether delaytime is calculated relative to cps.
@ -504,11 +524,15 @@ const generic_params = [
  // ['f', 'ophatdecay', ''],
  // TODO: example
  /**
-   * a pattern of numbers. An `orbit` is a global parameter context for patterns. Patterns with the same orbit will share hardware output bus offset and global effects, e.g. reverb and delay. The maximum number of orbits is specified in the superdirt startup, numbers higher than maximum will wrap around.
+   * An `orbit` is a global parameter context for patterns. Patterns with the same orbit will share the same global effects.
   *
   * @name orbit
   * @param {number | Pattern} number
-   *
+   * @example
+   * stack(
+   *   s("hh*3").delay(.5).delaytime(.25).orbit(1),
+   *   s("~ sd").delay(.5).delaytime(.125).orbit(2)
+   * )
   */
  [
    'i',
@ -590,7 +614,7 @@ const generic_params = [
   * @name room
   * @param {number | Pattern} level between 0 and 1
   * @example
-   * s("bd sd").room("<0 .2 .4 .6 .8 1>").osc()
+   * s("bd sd").room("<0 .2 .4 .6 .8 1>")
   *
   */
  ['f', 'room', 'a pattern of numbers from 0 to 1. Sets the level of reverb.'],
@ -598,9 +622,9 @@ const generic_params = [
   * Sets the room size of the reverb, see {@link room}.
   *
   * @name size
-   * @param {number | Pattern} size between 0 and 1
+   * @param {number | Pattern} size between 0 and 10
   * @example
-   * s("bd sd").room(.8).size("<0 .2 .4 .6 .8 1>").osc()
+   * s("bd sd").room(.8).size("<0 1 2 4 8>")
   *
   */
  // TODO: find out why :
@ -640,9 +664,9 @@ const generic_params = [
   * @name speed
   * @param {number | Pattern} speed -inf to inf, negative numbers play the sample backwards.
   * @example
-   * s("bd").speed("<1 2 4 1 -2 -4>").osc()
+   * s("bd").speed("<1 2 4 1 -2 -4>")
   * @example
-   * speed("1 1.5*2 [2 1.1]").s("sax").cut(1).osc()
+   * speed("1 1.5*2 [2 1.1]").s("piano").clip(1)
   *
   */
  [
--- a/packages/webaudio/webaudio.mjs
+++ b/packages/webaudio/webaudio.mjs
@ -211,12 +211,22 @@ export const webaudioOutput = async (hap, deadline, hapDuration) => {
    n = 0,
    note,
    gain = 0.8,
-    cutoff,
-    resonance = 1,
-    hcutoff,
-    hresonance = 1,
-    bandf,
-    bandq = 1,
+    // low pass
+    lpf,
+    cutoff = lpf,
+    lpq = 1,
+    resonance = lpq,
+    // high pass
+    hpf,
+    hcutoff = hpf,
+    hpq = 1,
+    hresonance = hpq,
+    // band pass
+    bpf,
+    bandf = bpf,
+    bpq = 1,
+    bandq = bpq,
+    //
    coarse,
    crush,
    shape,
--- a/test/snapshots/examples.test.mjs.snap
+++ b/test/snapshots/examples.test.mjs.snap
@ -1150,14 +1150,22 @@ exports[`runs examples > example "crush" example index 0 1`] = `

 exports[`runs examples > example "cut" example index 0 1`] = `
 [
-  "[ 0/1 → 1/2 | s:bd cut:1 ]",
-  "[ 1/2 → 1/1 | s:sax cut:1 ]",
-  "[ 1/1 → 3/2 | s:bd cut:1 ]",
-  "[ 3/2 → 2/1 | s:sax cut:1 ]",
-  "[ 2/1 → 5/2 | s:bd cut:1 ]",
-  "[ 5/2 → 3/1 | s:sax cut:1 ]",
-  "[ 3/1 → 7/2 | s:bd cut:1 ]",
-  "[ 7/2 → 4/1 | s:sax cut:1 ]",
+  "[ 0/1 → 1/4 | s:rd cut:1 ]",
+  "[ 1/4 → 1/2 | s:rd cut:1 ]",
+  "[ 1/2 → 3/4 | s:rd cut:1 ]",
+  "[ 3/4 → 1/1 | s:rd cut:1 ]",
+  "[ 1/1 → 5/4 | s:rd cut:1 ]",
+  "[ 5/4 → 3/2 | s:rd cut:1 ]",
+  "[ 3/2 → 7/4 | s:rd cut:1 ]",
+  "[ 7/4 → 2/1 | s:rd cut:1 ]",
+  "[ 2/1 → 9/4 | s:rd cut:1 ]",
+  "[ 9/4 → 5/2 | s:rd cut:1 ]",
+  "[ 5/2 → 11/4 | s:rd cut:1 ]",
+  "[ 11/4 → 3/1 | s:rd cut:1 ]",
+  "[ 3/1 → 13/4 | s:rd cut:1 ]",
+  "[ 13/4 → 7/2 | s:rd cut:1 ]",
+  "[ 7/2 → 15/4 | s:rd cut:1 ]",
+  "[ 15/4 → 4/1 | s:rd cut:1 ]",
 ]
 `;

@ -1301,6 +1309,33 @@ exports[`runs examples > example "degradeBy" example index 1 1`] = `
 ]
 `;

+exports[`runs examples > example "delay" example index 0 1`] = `
+[
+  "[ 0/1 → 1/1 | s:bd delay:0 ]",
+  "[ 1/1 → 2/1 | s:bd delay:0.25 ]",
+  "[ 2/1 → 3/1 | s:bd delay:0.5 ]",
+  "[ 3/1 → 4/1 | s:bd delay:1 ]",
+]
+`;
+
+exports[`runs examples > example "delayfeedback" example index 0 1`] = `
+[
+  "[ (0/1 → 1/1) ⇝ 2/1 | s:bd delay:0.25 delayfeedback:0.25 ]",
+  "[ 0/1 ⇜ (1/1 → 2/1) | s:bd delay:0.25 delayfeedback:0.25 ]",
+  "[ (2/1 → 3/1) ⇝ 4/1 | s:bd delay:0.25 delayfeedback:0.5 ]",
+  "[ 2/1 ⇜ (3/1 → 4/1) | s:bd delay:0.25 delayfeedback:0.5 ]",
+]
+`;
+
+exports[`runs examples > example "delaytime" example index 0 1`] = `
+[
+  "[ (0/1 → 1/1) ⇝ 2/1 | s:bd delay:0.25 delaytime:0.125 ]",
+  "[ 0/1 ⇜ (1/1 → 2/1) | s:bd delay:0.25 delaytime:0.125 ]",
+  "[ (2/1 → 3/1) ⇝ 4/1 | s:bd delay:0.25 delaytime:0.25 ]",
+  "[ 2/1 ⇜ (3/1 → 4/1) | s:bd delay:0.25 delaytime:0.25 ]",
+]
+`;
+
 exports[`runs examples > example "detune" example index 0 1`] = `
 [
  "[ 0/1 → 1/3 | n:0 s:superzow octave:3 detune:0 ]",
@ -2206,6 +2241,27 @@ exports[`runs examples > example "often" example index 0 1`] = `
 ]
 `;

+exports[`runs examples > example "orbit" example index 0 1`] = `
+[
+  "[ 0/1 → 1/3 | s:hh delay:0.5 delaytime:0.25 orbit:1 ]",
+  "[ 1/3 → 2/3 | s:hh delay:0.5 delaytime:0.25 orbit:1 ]",
+  "[ 2/3 → 1/1 | s:hh delay:0.5 delaytime:0.25 orbit:1 ]",
+  "[ 1/1 → 4/3 | s:hh delay:0.5 delaytime:0.25 orbit:1 ]",
+  "[ 4/3 → 5/3 | s:hh delay:0.5 delaytime:0.25 orbit:1 ]",
+  "[ 5/3 → 2/1 | s:hh delay:0.5 delaytime:0.25 orbit:1 ]",
+  "[ 2/1 → 7/3 | s:hh delay:0.5 delaytime:0.25 orbit:1 ]",
+  "[ 7/3 → 8/3 | s:hh delay:0.5 delaytime:0.25 orbit:1 ]",
+  "[ 8/3 → 3/1 | s:hh delay:0.5 delaytime:0.25 orbit:1 ]",
+  "[ 3/1 → 10/3 | s:hh delay:0.5 delaytime:0.25 orbit:1 ]",
+  "[ 10/3 → 11/3 | s:hh delay:0.5 delaytime:0.25 orbit:1 ]",
+  "[ 11/3 → 4/1 | s:hh delay:0.5 delaytime:0.25 orbit:1 ]",
+  "[ 1/2 → 1/1 | s:sd delay:0.5 delaytime:0.125 orbit:2 ]",
+  "[ 3/2 → 2/1 | s:sd delay:0.5 delaytime:0.125 orbit:2 ]",
+  "[ 5/2 → 3/1 | s:sd delay:0.5 delaytime:0.125 orbit:2 ]",
+  "[ 7/2 → 4/1 | s:sd delay:0.5 delaytime:0.125 orbit:2 ]",
+]
+`;
+
 exports[`runs examples > example "pan" example index 0 1`] = `
 [
  "[ 0/1 → 1/4 | s:bd pan:0.5 ]",
@ -2718,12 +2774,12 @@ exports[`runs examples > example "size" example index 0 1`] = `
 [
  "[ 0/1 → 1/2 | s:bd room:0.8 size:0 ]",
  "[ 1/2 → 1/1 | s:sd room:0.8 size:0 ]",
-  "[ 1/1 → 3/2 | s:bd room:0.8 size:0.2 ]",
-  "[ 3/2 → 2/1 | s:sd room:0.8 size:0.2 ]",
-  "[ 2/1 → 5/2 | s:bd room:0.8 size:0.4 ]",
-  "[ 5/2 → 3/1 | s:sd room:0.8 size:0.4 ]",
-  "[ 3/1 → 7/2 | s:bd room:0.8 size:0.6 ]",
-  "[ 7/2 → 4/1 | s:sd room:0.8 size:0.6 ]",
+  "[ 1/1 → 3/2 | s:bd room:0.8 size:1 ]",
+  "[ 3/2 → 2/1 | s:sd room:0.8 size:1 ]",
+  "[ 2/1 → 5/2 | s:bd room:0.8 size:2 ]",
+  "[ 5/2 → 3/1 | s:sd room:0.8 size:2 ]",
+  "[ 3/1 → 7/2 | s:bd room:0.8 size:4 ]",
+  "[ 7/2 → 4/1 | s:sd room:0.8 size:4 ]",
 ]
 `;

@ -2829,26 +2885,26 @@ exports[`runs examples > example "speed" example index 0 1`] = `

 exports[`runs examples > example "speed" example index 1 1`] = `
 [
-  "[ 0/1 → 1/3 | speed:1 s:sax cut:1 ]",
-  "[ 1/3 → 1/2 | speed:1.5 s:sax cut:1 ]",
-  "[ 1/2 → 2/3 | speed:1.5 s:sax cut:1 ]",
-  "[ 2/3 → 5/6 | speed:2 s:sax cut:1 ]",
-  "[ 5/6 → 1/1 | speed:1.1 s:sax cut:1 ]",
-  "[ 1/1 → 4/3 | speed:1 s:sax cut:1 ]",
-  "[ 4/3 → 3/2 | speed:1.5 s:sax cut:1 ]",
-  "[ 3/2 → 5/3 | speed:1.5 s:sax cut:1 ]",
-  "[ 5/3 → 11/6 | speed:2 s:sax cut:1 ]",
-  "[ 11/6 → 2/1 | speed:1.1 s:sax cut:1 ]",
-  "[ 2/1 → 7/3 | speed:1 s:sax cut:1 ]",
-  "[ 7/3 → 5/2 | speed:1.5 s:sax cut:1 ]",
-  "[ 5/2 → 8/3 | speed:1.5 s:sax cut:1 ]",
-  "[ 8/3 → 17/6 | speed:2 s:sax cut:1 ]",
-  "[ 17/6 → 3/1 | speed:1.1 s:sax cut:1 ]",
-  "[ 3/1 → 10/3 | speed:1 s:sax cut:1 ]",
-  "[ 10/3 → 7/2 | speed:1.5 s:sax cut:1 ]",
-  "[ 7/2 → 11/3 | speed:1.5 s:sax cut:1 ]",
-  "[ 11/3 → 23/6 | speed:2 s:sax cut:1 ]",
-  "[ 23/6 → 4/1 | speed:1.1 s:sax cut:1 ]",
+  "[ 0/1 → 1/3 | speed:1 s:piano clip:1 ]",
+  "[ 1/3 → 1/2 | speed:1.5 s:piano clip:1 ]",
+  "[ 1/2 → 2/3 | speed:1.5 s:piano clip:1 ]",
+  "[ 2/3 → 5/6 | speed:2 s:piano clip:1 ]",
+  "[ 5/6 → 1/1 | speed:1.1 s:piano clip:1 ]",
+  "[ 1/1 → 4/3 | speed:1 s:piano clip:1 ]",
+  "[ 4/3 → 3/2 | speed:1.5 s:piano clip:1 ]",
+  "[ 3/2 → 5/3 | speed:1.5 s:piano clip:1 ]",
+  "[ 5/3 → 11/6 | speed:2 s:piano clip:1 ]",
+  "[ 11/6 → 2/1 | speed:1.1 s:piano clip:1 ]",
+  "[ 2/1 → 7/3 | speed:1 s:piano clip:1 ]",
+  "[ 7/3 → 5/2 | speed:1.5 s:piano clip:1 ]",
+  "[ 5/2 → 8/3 | speed:1.5 s:piano clip:1 ]",
+  "[ 8/3 → 17/6 | speed:2 s:piano clip:1 ]",
+  "[ 17/6 → 3/1 | speed:1.1 s:piano clip:1 ]",
+  "[ 3/1 → 10/3 | speed:1 s:piano clip:1 ]",
+  "[ 10/3 → 7/2 | speed:1.5 s:piano clip:1 ]",
+  "[ 7/2 → 11/3 | speed:1.5 s:piano clip:1 ]",
+  "[ 11/3 → 23/6 | speed:2 s:piano clip:1 ]",
+  "[ 23/6 → 4/1 | speed:1.1 s:piano clip:1 ]",
 ]
 `;

--- a/website/src/config.ts
+++ b/website/src/config.ts
@ -48,14 +48,15 @@ export const SIDEBAR: Sidebar = {
      { text: 'Notes', link: 'learn/notes' },
      { text: 'Sounds', link: 'learn/sounds' },
      { text: 'Coding syntax', link: 'learn/code' },
-      { text: 'Mini-notation', link: 'learn/mini-notation' },
+      { text: 'Mini-Notation', link: 'learn/mini-notation' },
      { text: 'Samples', link: 'learn/samples' },
      { text: 'Synths', link: 'learn/synths' },
-      { text: 'Audio effects', link: 'learn/effects' },
+      { text: 'Audio Effects', link: 'learn/effects' },
      { text: 'Functions', link: 'learn/functions' },
      { text: 'Signals', link: 'learn/signals' },
      { text: 'Tonal', link: 'learn/tonal' },
      { text: 'MIDI & OSC', link: 'learn/input-output' },
+      { text: 'Strudel vs Tidal', link: 'learn/strudel-vs-tidal' },
    ],
    'Technical Manual': [
      { text: 'Patterns', link: 'technical-manual/patterns' },
--- a/website/src/docs/docs.css
+++ b/website/src/docs/docs.css
@ -1,9 +1,9 @@
-h1::before,
-h2::before,
-h3::before,
-h4::before,
-h5::before,
-h6::before {
+.prose h1::before,
+.prose h2::before,
+.prose h3::before,
+.prose h4::before,
+.prose h5::before,
+.prose h6::before {
  display: block;
  content: ' ';
  margin-top: -70px;
@ -13,12 +13,12 @@ h6::before {
  position: relative;
 }

-h1:hover .icon-link,
-h2:hover .icon-link,
-h3:hover .icon-link,
-h4:hover .icon-link,
-h5:hover .icon-link,
-h6:hover .icon-link,
+.prose h1:hover .icon-link,
+.prose h2:hover .icon-link,
+.prose h3:hover .icon-link,
+.prose h4:hover .icon-link,
+.prose h5:hover .icon-link,
+.prose h6:hover .icon-link,
 .icon.icon-link:hover {
  visibility: visible;
 }
--- a/website/src/pages/learn/effects.mdx
+++ b/website/src/pages/learn/effects.mdx
@ -12,54 +12,85 @@ import { JsDoc } from '../../docs/JsDoc';
 Wether you're using a synth or a sample, you can apply any of the following built-in audio effects.
 As you might suspect, the effects can be chained together, and they accept a pattern string as their argument.

-# bandf
+## bandf

 <JsDoc client:idle name="bandf" h={0} />

-# bandq
+## bandq

 <JsDoc client:idle name="bandq" h={0} />

-# coarse
+## coarse

 <JsDoc client:idle name="coarse" h={0} />

-# crush
+## crush

 <JsDoc client:idle name="crush" h={0} />

-# cutoff
+## cutoff

 <JsDoc client:idle name="cutoff" h={0} />

-# gain
+## gain

 <JsDoc client:idle name="gain" h={0} />

-# hcutoff
+## hcutoff

 <JsDoc client:idle name="hcutoff" h={0} />

-# hresonance
+## hresonance

 <JsDoc client:idle name="hresonance" h={0} />

-# pan
+## pan

 <JsDoc client:idle name="pan" h={0} />

-# resonance
+## resonance

 <JsDoc client:idle name="resonance" h={0} />

-# shape
+## shape

 <JsDoc client:idle name="shape" h={0} />

-# velocity
+## velocity

 <JsDoc client:idle name="velocity" h={0} />

-# vowel
+## vowel

 <JsDoc client:idle name="vowel" h={0} />
+
+# Global Effects
+
+## Local vs Global Effects
+
+While the above listed "local" effects will always create a separate effects chain for each event,
+global effects use the same chain for all events of the same orbit:
+
+## orbit
+
+<JsDoc client:idle name="orbit" h={0} />
+
+## delay
+
+<JsDoc client:idle name="delay" h={0} />
+
+## delaytime
+
+<JsDoc client:idle name="delaytime" h={0} />
+
+## delayfeedback
+
+<JsDoc client:idle name="delayfeedback" h={0} />
+
+## room
+
+<JsDoc client:idle name="room" h={0} />
+
+## size / roomsize
+
+<JsDoc client:idle name="size" h={0} />
--- a/website/src/pages/learn/samples.mdx
+++ b/website/src/pages/learn/samples.mdx
@ -217,6 +217,10 @@ Almost everything in Tidal can be patterned using strings!

 <JsDoc client:idle name="Pattern.end" h={0} />

+### `cut`
+
+<JsDoc client:idle name="cut" h={0} />
+
 ### `loopAt`

 <JsDoc client:idle name="Pattern.loopAt" h={0} />
@ -225,4 +229,6 @@ Almost everything in Tidal can be patterned using strings!

 <JsDoc client:idle name="Pattern.chop" h={0} />

-<br />
+### `speed`
+
+<JsDoc client:idle name="speed" h={0} />
--- a/website/src/pages/learn/strudel-vs-tidal.mdx
+++ b/website/src/pages/learn/strudel-vs-tidal.mdx
@ -0,0 +1,146 @@
+---
+title: Strudel vs Tidal
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+import { JsDoc } from '../../docs/JsDoc';
+
+# Comparing Strudel and Tidal
+
+This page is dedicated to exisiting tidal users, giving an overview of all the differences between Strudel and Tidal.
+
+## Language
+
+Strudel is written in JavaScript, while Tidal is written in Haskell.
+
+### Example
+
+This difference is most obvious when looking at the syntax:
+
+```hs
+iter 4 $ every 3 (||+ n "10 20") $ (n "0 1 3") # s "triangle" # crush 4
+```
+
+One _could_ express that pattern to Strudel like so:
+
+```txt
+iter(4, every(3, add.squeeze("10 20"), n("0 1 3").s("triangle").crush(4)))
+```
+
+- The `$` operator does not exist, so the `iter` function has to wrap everything in parens.
+- Custom operators like `||+` are explicit function calls, `add.squeeze` in this case
+- The `#` operator is replaced with a chained function call `# crush 4` => `.crush(4)`
+
+Unlike Haskell, JavaScript lacks the ability to define custom infix
+operators, or change the meaning of existing ones.
+
+Before you discard Strudel as an unwieldy paren monster, look at this alternative way to write the above:
+
+```txt
+n("0 1 3").every(3, add.squeeze("10 20")).iter(4).s("triangle").crush(4)
+```
+
+By reordering calls, the parens are much less nested.
+As a general rule by thumb, you could say that everything Tidal does with `$` is reversed in Strudel:
+
+`iter 4 $ every 3 (||+ n "10 20") $ (n "0 1 3")`
+
+becomes
+
+`n("0 1 3").every(3, add.squeeze("10 20")).iter(4)`
+
+Simply put, `foo x $ bar x` becomes `bar(x).foo(x)`.
+
+### Operators
+
+The [custom operators of tidal](https://tidalcycles.org/docs/reference/pattern_structure/#all-the-operators) are normal functions in strudel:
+
+| function    | tidal  | strudel |
+| ----------- | ------ | ------- |
+| add         | \|+ n  | .add(n) |
+| subtract    | \|- n  | .sub(n) |
+| multiply    | \|\* n | .mul(n) |
+| divide      | \|\/ n | .div(n) |
+| modulo      | \|\% n | .mod(n) |
+| left values | \|\< n | .set(n) |
+
+The above list only displays the operators taking the structure comes from the `left`.
+For each of those, a `right` and `both` variant also exists.
+As this directional thinking only works with code, strudel calls these `in` / `out` / `mix`:
+
+| direction | tidal   | strudel     |
+| --------- | ------- | ----------- |
+| left      | \|+ n   | .add.in(n)  |
+| right     | +\| n   | .add.out(n) |
+| both      | \|+\| n | .add.mix(n) |
+
+Instead of `+` / `add`, you can use any of the available operators of the first list.
+
+## Function Compatibility
+
+[This issue](https://github.com/tidalcycles/strudel/issues/31) tracks which Tidal functions are implemented in Strudel.
+The list might not be 100% up to date and probably also misses some functions completely..
+Feel encouraged to search the source code for a function you're looking for.
+If you find a function that's not on the list, please tell!
+
+## Control Params
+
+As seen in the example, the `#` operator (shorthand for `|>`) is also just a function call in strudel.
+So `note "c5" # s "gtr"` becomes `note("c5").s('gtr')`.
+
+[This file](https://github.com/tidalcycles/strudel/blob/main/packages/core/controls.mjs) lists all available control params.
+Note that not all of those work in the Webaudio Output of Strudel.
+If you find a tidal control that's not on the list, please tell!
+
+## Sound
+
+Tidal is commonly paired with Superdirt / Supercollider for sound generation.
+While Strudel also has a way of [communicating with Superdirt](./learn/input-output),
+it aims to provide a standalone live coding environment that runs entirely in the browser.
+
+### Audio Effects
+
+Many of SuperDirt's effects have been reimplemented in Strudel, using the Web Audio API.
+You can find a [list of available effects here](./learn/effects).
+
+### Sampler
+
+Strudel's sampler supports [a subset](http://127.0.0.1:3000/learn/samples) of Superdirt's sampler.
+Also, samples are always loaded from a URL rather than from the disk, although [that might be possible in the future](https://github.com/tidalcycles/strudel/issues/118).
+
+## Evaluation
+
+The Strudel REPL does not support [block based evaluation](https://github.com/tidalcycles/strudel/issues/34) yet.
+You can use the following "workaround" to create multiple patterns that can be turned on and off:
+
+```txt
+let a = note("c a f e")
+
+let b = s("bd sd")
+
+stack(
+  a,
+  // b
+)
+```
+
+Alternatively, you could write everything as one `stack` and use `.hush()` to silence a pattern:
+
+```txt
+stack(
+  note("c a f e"),
+  s("bd sd").hush()
+)
+```
+
+Note that strudel will always use the last statement in your code as the pattern for querying
+
+## Tempo
+
+Strudels tempo is 1 cycle per second, while tidal defaults to `0.5625`.
+You can get the same tempo as tidal with:
+
+```txt
+note("c a f e").fast(.5625);
+```