<_CodeMirror
@@ -149,6 +162,7 @@ export default function CodeMirror({
onCreateEditor={handleOnCreateEditor}
onUpdate={handleOnUpdate}
extensions={extensions}
+ basicSetup={{ lineNumbers: isLineNumbersDisplayed }}
/>
);
diff --git a/packages/react/src/components/MiniRepl.jsx b/packages/react/src/components/MiniRepl.jsx
index a8de7978..1a6cce94 100644
--- a/packages/react/src/components/MiniRepl.jsx
+++ b/packages/react/src/components/MiniRepl.jsx
@@ -18,16 +18,24 @@ export function MiniRepl({
tune,
hideOutsideView = false,
enableKeyboard,
+ onTrigger,
drawTime,
punchcard,
+ punchcardLabels,
+ onPaint,
canvasHeight = 200,
+ fontSize = 18,
+ fontFamily,
+ hideHeader = false,
theme,
+ keybindings,
+ isLineNumbersDisplayed,
}) {
drawTime = drawTime || (punchcard ? [0, 4] : undefined);
const evalOnMount = !!drawTime;
const drawContext = useCallback(
- !!drawTime ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,
- [drawTime],
+ punchcard ? (canvasId) => document.querySelector('#' + canvasId)?.getContext('2d') : null,
+ [punchcard],
);
const {
code,
@@ -47,7 +55,18 @@ export function MiniRepl({
} = useStrudel({
initialCode: tune,
defaultOutput: webaudioOutput,
- editPattern: (pat) => (punchcard ? pat.punchcard() : pat),
+ editPattern: (pat, id) => {
+ //pat = pat.withContext((ctx) => ({ ...ctx, id }));
+ if (onTrigger) {
+ pat = pat.onTrigger(onTrigger, false);
+ }
+ if (onPaint) {
+ pat = pat.onPaint(onPaint);
+ } else if (punchcard) {
+ pat = pat.punchcard({ labels: punchcardLabels });
+ }
+ return pat;
+ },
getTime,
evalOnMount,
drawContext,
@@ -82,7 +101,7 @@ export function MiniRepl({
e.preventDefault();
flash(view);
await activateCode();
- } else if (e.key === '.') {
+ } else if (e.key === '.' || e.code === 'Period') {
stop();
e.preventDefault();
}
@@ -101,7 +120,7 @@ export function MiniRepl({
// const logId = data?.pattern?.meta?.id;
if (logId === replId) {
setLog((l) => {
- return l.concat([e.detail]).slice(-10);
+ return l.concat([e.detail]).slice(-8);
});
}
}, []),
@@ -109,33 +128,46 @@ export function MiniRepl({
return (
- /2")
+.sound("sawtooth").lpf(800)`}
+/>
+
+
+
+lpf = **l**ow **p**ass **f**ilter
+
+- Ändere `lpf` in 200. Hörst du wie der Bass dumpfer klingt? Es klingt so ähnlich als würde die Musik hinter einer geschlossenen Tür laufen 🚪
+- Lass uns nun die Tür öffnen: Ändere `lpf` in 5000. Der Klang wird dadurch viel heller und schärfer ✨🪩
+
+
+
+**filter automatisieren**
+
+/2")
+.sound("sawtooth").lpf("200 1000")`}
+/>
+
+
+
+- Füg noch mehr `lpf` Werte hinzu
+- Das pattern in `lpf` ändert nicht den Rhythmus der Bassline
+
+Später sehen wir wie man mit Wellenformen Dinge automatisieren kann.
+
+
+
+**vowel = Vokal**
+
+/2")
+.sound("sawtooth").vowel("/2")`}
+/>
+
+**gain = Verstärkung**
+
+
+
+Bei Rhythmen ist die Dynamik (= Veränderungen der Lautstärke) sehr wichtig.
+
+- Entferne `.gain(...)` und achte darauf wie es viel flacher klingt.
+- Mach es rückgängig (strg+z dann strg+enter)
+
+
+
+**stacks in stacks**
+
+Lass uns die obigen Beispiele kombinieren:
+
+/2")
+ .sound("sawtooth").lpf("200 1000"),
+ note("<[c3,g3,e4] [bb2,f3,d4] [a2,f3,c4] [bb2,g3,eb4]>/2")
+ .sound("sawtooth").vowel("/2")
+) `}
+/>
+
+
+
+Versuche die einzelnen Teile innerhalb `stack` zu erkennen, schau dir an wie die Kommas gesetzt sind.
+
+Die 3 Teile (Drums, Bass, Akkorde) sind genau wie vorher, nur in einem `stack`, getrennt durch Kommas
+
+
+
+**Den Sound formen mit ADSR Hüllkurve**
+
+")
+.sound("sawtooth").lpf(600)
+.attack(.1)
+.decay(.1)
+.sustain(.25)
+.release(.2)`}
+/>
+
+
+
+Versuche herauszufinden was die Zahlen machen. Probier folgendes:
+
+- attack: `.5` vs `0`
+- decay: `.5` vs `0`
+- sustain: `1` vs `.25` vs `0`
+- release: `0` vs `.5` vs `1`
+
+Kannst du erraten was die einzelnen Werte machen?
+
+
+
+
+
+- attack (anschlagen): Zeit des Aufbaus
+- decay (zerfallen): Zeit des Abfalls
+- sustain (erhalten): Lautstärke nach Abfall
+- release (loslassen): Zeit des Abfalls nach dem Ende
+
+
+
+
+
+**adsr Kurznotation**
+
+")
+.sound("sawtooth").lpf(600)
+.adsr(".1:.1:.5:.2")
+`}
+/>
+
+**delay = Verzögerung**
+
+ ~]")
+ .sound("gm_electric_guitar_muted"),
+ sound("").bank("RolandTR707")
+).delay(".5")`}
+/>
+
+
+
+Probier verschiedene `delay` Werte zwischen 0 und 1. Übrigens: `.5` ist kurz für `0.5`.
+
+Was passiert wenn du `.delay(".8:.125")` schreibst? Kannst du erraten was die zweite Zahl macht?
+
+Was passiert wenn du `.delay(".8:.06:.8")` schreibst? Kannst du erraten was die dritte Zahl macht?
+
+
+
+
+
+`delay("a:b:c")`:
+
+- a: Lautstärke des Delays
+- b: Verzögerungszeit
+- c: Feedback (je kleiner desto schneller verschwindet das Delay)
+
+
+
+**room aka reverb = Hall**
+
+ ~@16] ~>/2")
+.scale("D4:minor").sound("gm_accordion:2")
+.room(2)`}
+/>
+
+
+
+Spiel mit verschiedenen Werten.
+
+Füg auch ein Delay hinzu!
+
+
+
+**kleiner dub tune**
+
+ ~]")
+ .sound("gm_electric_guitar_muted").delay(.5),
+ sound("").bank("RolandTR707").delay(.5),
+ n("<4 [3@3 4] [<2 0> ~@16] ~>/2")
+ .scale("D4:minor").sound("gm_accordion:2")
+ .room(2).gain(.5)
+)`}
+/>
+
+Für echten Dub fehlt noch der Bass:
+
+ ~]")
+ .sound("gm_electric_guitar_muted").delay(.5),
+ sound("").bank("RolandTR707").delay(.5),
+ n("<4 [3@3 4] [<2 0> ~@16] ~>/2")
+ .scale("D4:minor").sound("gm_accordion:2")
+ .room(2).gain(.4),
+ n("<0 [~ 0] 4 [3 2] [0 ~] [0 ~] <0 2> ~>*2")
+ .scale("D2:minor")
+ .sound("sawtooth,triangle").lpf(800)
+)`}
+/>
+
+
+
+Füg `.hush()` ans ende eines Patterns im stack...
+
+
+
+**pan = Panorama**
+
+").room(.2)`} />
+
+**fast and slow = schnell und langsam**
+
+Mit `fast` und `slow` kann man das tempo eines patterns außerhalb der Mini-Notation ändern:
+
+
+
+Ändere den `slow` Wert. Tausche `slow` durch `fast`.
+
+Was passiert wenn du den Wert automatisierst? z.b. `.fast("<1 [2 4]>")` ?
+
+
+
+Übrigens, innerhalb der Mini-Notation, `fast` ist `*` und `slow` ist `/`.
+
+")`} />
+
+## Automation mit Signalen
+
+Anstatt Werte schrittweise zu automatisieren können wir auch sogenannte Signale benutzen:
+
+
+
+Die grundlegenden Wellenformen sind `sine`, `saw`, `square`, `tri` 🌊
+
+Probiere auch die zufälligen Signale `rand` und `perlin`!
+
+Der `gain`-Wert (Verstärkung) wird in der Visualisierung als Transparenz dargestellt.
+
+
+
+**Bereich ändern mit `range`**
+
+Signale bewegen sich standardmäßig zwischen 0 und 1. Wir können das mit `range` ändern:
+
+
+
+Was passiert wenn du die beiden Werte vertauschst?
+
+
+
+Wir können die Geschwindigkeit der Automation mit slow / fast ändern:
+
+/2")
+.sound("sawtooth")
+.lpf(sine.range(100, 2000).slow(8))`}
+/>
+
+
+
+Die ganze Automation braucht nun 8 cycle bis sie sich wiederholt.
+
+
+
+## Rückblick
+
+| name | example |
+| ----- | -------------------------------------------------------------------------------------------------- |
+| lpf | ")`} /> |
+| vowel | ")`} /> |
+| gain | ")`} /> |
+| range | [midi2note(i + 36), i + 36]),
+ )}
+/>
+
+
+
+Probiere verschiedene Zahlen aus!
+
+Versuch auch mal Kommazahlen, z.B. 55.5 (beachte die englische Schreibweise von Kommazahlen mit "." anstatt ",")
+
+
+
+**Töne mit Buchstaben**
+
+ [n, n.split('')[0]]))}
+/>
+
+
+
+Versuch verschiedene Buchstaben aus (a - g).
+
+Findest du Melodien die auch gleichzeitig ein Wort sind? Tipp: ☕ 🙈 🧚
+
+
+
+**Vorzeichen**
+
+ [n, n.split('').slice(0, 2).join('')]),
+ )}
+/>
+
+ [n, n.split('').slice(0, 2).join('')]),
+ )}
+/>
+
+**Andere Oktaven**
+
+ [n, n]))}
+ claviatureLabels={Object.fromEntries(
+ Array(49)
+ .fill()
+ .map((_, i) => [midi2note(i + 36), midi2note(i + 36)]),
+ )}
+/>
+
+
+
+Probiere verschiedene Oktaven aus (1-8)
+
+
+
+Normalerweise kommen Leute die keine Noten besser mit Zahlen anstatt mit Buchstaben zurecht.
+Daher benutzen die folgenden Beispiele meistens Zahlen.
+Später sehen wir auch noch ein paar Tricks die es uns erleichtern Töne zu spielen die zueinander passen.
+
+## Den Sound verändern
+
+Genau wie bei geräuschhaften Sounds können wir den Klang unserer Töne mit `sound` verändern:
+
+
+
+Probier ein paar sounds aus:
+
+- gm_electric_guitar_muted - E-Gitarre
+- gm_acoustic_bass - Kontrabass
+- gm_voice_oohs - Chords
+- gm_blown_bottle - Flasche
+- sawtooth - Sägezahn-Welle
+- square - Rechteck-Welle
+- triangle - Dreieck-Welle
+- Was ist mit bd, sd oder hh?
+- Entferne `.sound('...')` komplett
+
+
+
+**Zwischen Sounds hin und her wechseln**
+
+
+
+Die patterns in `note` und `sound` werden kombiniert!
+
+Wir schauen uns später noch mehr Möglichkeiten an wie man patterns kombiniert.
+
+
+
+## Längere Sequenzen
+
+**Sequenzen verlangsamen mit `/`**
+
+{/* [c2 bb1 f2 eb2] */}
+
+
+
+Das `/4` spielt die Sequenz 4 mal so langsam, also insgesamt 4 cycles = 4s.
+
+Jede Note ist nun also 1s lang.
+
+Schreib noch mehr Töne in die Klammern und achte darauf dass es schneller wird.
+
+
+
+Wenn eine Sequenz unabhängig von ihrem Inhalt immer gleich schnell bleiben soll, gibt es noch eine andere Art Klammern:
+
+**Eins pro Cycle per \< \>**
+
+").sound("gm_acoustic_bass")`} punchcard />
+
+
+
+Füg noch mehr Töne hinzu und achte darauf wie das Tempo gleich bleibt!
+
+Tatsächlich sind diese Klammern nur eine Abkürzung:
+
+`` = `[a b c]/3`
+
+`` = `[a b c d]/4`
+
+usw..
+
+
+
+**Eine Sequenz pro Cycle**
+
+")
+.sound("gm_acoustic_bass")`}
+ punchcard
+/>
+
+oder auch...
+
+/2")
+.sound("gm_acoustic_bass")`}
+ punchcard
+/>
+
+**Alternativen**
+
+Ähnlich wie Unter-Sequenzen, kann auch `<...>` innerhalb einer Sequenz verwendet werden:
+
+")
+.sound("gm_xylophone")`}
+ punchcard
+/>
+
+Das ist auch praktisch für atonale Sounds:
+
+, [~ hh]*2")
+.bank("RolandTR909")`}
+ punchcard
+/>
+
+## Skalen
+
+Es kann mühsam sein die richtigen Noten zu finden wenn man alle zur Verfügung hat.
+Mit Skalen ist das einfacher:
+
+")
+.scale("C:minor").sound("piano")`}
+ punchcard
+/>
+
+
+
+Probier verschiedene Zahlen aus. Jede klingt gut!
+
+Probier verschiedene Skalen:
+
+- C:major
+- A2:minor
+- D:dorian
+- G:mixolydian
+- A2:minor:pentatonic
+- F:major:pentatonic
+
+
+
+**Automatisierte Skalen**
+
+Wie alle Funktionen können auch Skalen mit einem Pattern automatisiert werden:
+
+, 2 4 <[6,8] [7,9]>")
+.scale("/4")
+.sound("piano")`}
+ punchcard
+/>
+
+
+
+Wenn du keine Ahnung hast was die Skalen bedeuten, keine Sorge.
+Es sind einfach nur Namen für verschiedene Gruppen von Tönen die gut zusammenpassen.
+
+Nimm dir Zeit um herauszufinden welche Skalen du magst.
+
+
+
+## Wiederholen und Verlängern
+
+**Verlängern mit @**
+
+
+
+Ein Element ohne `@` ist gleichbedeutend mit `@1`. Im Beispiel ist `c` drei Einheiten lang, `eb` nur eine.
+
+Spiel mit der Länge!
+
+
+
+**Unter-Sequenzen verlängern**
+
+*2")
+.scale("/4")
+.sound("gm_acoustic_bass")`}
+ punchcard
+/>
+
+
+
+Dieser Groove wird auch `shuffle` genannt.
+Jeder Schlag enthält 2 Töne, wobei der erste doppelt so lang wie der zweite ist.
+Das nennt man auch manchmal `triolen swing`. Es ist ein typischer Rhythmus im Blues und Jazz.
+
+
+
+**Wiederholen**
+
+]").sound("piano")`} punchcard />
+
+
+
+Wechsel zwischen `!`, `*` und `@` hin und her.
+
+Was ist der Unterschied?
+
+
+
+## Rückblick
+
+Das haben wir in diesem Kapitel gelernt:
+
+| Concept | Syntax | Example |
+| ------------ | ------ | ------------------------------------------------------------------- |
+| Verlangsamen | \/ | ")`} /> |
+| Verlängern | @ | /2")
+.sound("gm_synth_bass_1")
+.lpf(800) // <-- we'll learn about this soon`}
+/>
+
+**Melodie**
+
+*2\`).scale("C4:minor")
+.sound("gm_synth_strings_1")`}
+/>
+
+**Drums**
+
+, [~ hh]*2")
+.bank("RolandTR909")`}
+/>
+
+**Wenn es doch nur einen Weg gäbe das alles gleichzeitig zu spielen.......**
+
+
+
+Das geht mit `stack` 😙
+
+
+
+/2")
+ .sound("gm_synth_bass_1").lpf(800),
+ n(\`<
+ [~ 0] 2 [0 2] [~ 2]
+ [~ 0] 1 [0 1] [~ 1]
+ [~ 0] 3 [0 3] [~ 3]
+ [~ 0] 2 [0 2] [~ 2]
+ >*2\`).scale("C4:minor")
+ .sound("gm_synth_strings_1"),
+ sound("bd*2, ~ , [~ hh]*2")
+ .bank("RolandTR909")
+)`}
+/>
+
+Das hört sich doch langsam nach echter Musik an!
+Wir haben Sounds, wir haben Töne.. noch ein Puzzleteil fehlt: [Effekte](/de/workshop/first-effects)
diff --git a/website/src/pages/de/workshop/first-sounds.mdx b/website/src/pages/de/workshop/first-sounds.mdx
new file mode 100644
index 00000000..fea64cbd
--- /dev/null
+++ b/website/src/pages/de/workshop/first-sounds.mdx
@@ -0,0 +1,363 @@
+---
+title: Erste Sounds
+layout: ../../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '@src/docs/MiniRepl';
+import Box from '@components/Box.astro';
+import QA from '@components/QA';
+
+# Erste Sounds
+
+Dies ist das erste Kapitel im Strudel Workshop, schön dich an Bord zu haben!
+
+## Textfelder
+
+Der Workshop ist voller interaktiver Textfelder. Lass uns lernen wie sie funktionieren. Hier ist eins:
+
+
+
+1. ⬆️ Klicke in das obige Textfeld ⬆️
+2. Drücke `Strg`+`Enter` zum Abspielen
+3. Ändere `casio` in `metal`
+4. Drücke `Strg`+`Enter` zum Aktualisieren
+5. Drücke `Strg`+`Punkt` zum Stoppen
+
+Mac: `Strg` = `control` oder auch `option`
+
+
+
+Glückwunsch, du kannst jetzt live coden!
+
+## Sounds
+
+Gerade haben wir schon den ersten sound mit `sound` abgespielt:
+
+
+
+`casio` ist einer von vielen Standard Sounds.
+
+Probier ein paar andere Sounds aus:
+
+```
+insect wind jazz metal east crow casio space numbers
+```
+
+Es kann sein, dass du kurz nichts hörst während ein neuer Sound lädt.
+
+
+
+**Sample Nummer ändern mit :**
+
+Ein Sound kann mehrere Samples (Audio Dateien) enthalten.
+
+Du kannst ein anderes Sample wählen, indem du `:` und eine Zahl an den Sound-Namen anhängst:
+
+
+
+Probiere verschiedene Sound / Zahlen Kombinationen.
+
+Ohne Zahl ist gleichbedeutend mit `:0`
+
+
+
+Jetzt weißt du wie man Sounds abspielt und ihre Sample Nummer einstellt.
+Vorerst bleiben wir bei den voreingestellten Sounds, später erfahren wir noch wie man eigene benutzt.
+
+## Drum Sounds
+
+Strudel kommt von Haus aus mit einer breiten Auswahl an Drum Sounds:
+
+
+
+Diese 2-Buchstaben Kombinationen stehen für verschiedene Teile eines Schlagzeugs:
+
+- `bd` = **b**ass **d**rum - Basstrommel
+- `sd` = **s**nare **d**rum - Schnarrtrommel
+- `rim` = **rim**shot - Rahmenschlag
+- `hh` = **h**i**h**at - Hallo Hut
+- `oh` = **o**pen **h**ihat - Offener Hallo Hut
+
+Probier verschiedene Sounds aus!
+
+
+
+Wir können den Charakter des Drum Sounds verändern, indem wir mit `bank` die Drum Machine auswählen:
+
+
+
+Ändere `RolandTR909` in
+
+- `AkaiLinn`
+- `RhythmAce`
+- `RolandTR808`
+- `RolandTR707`
+- `ViscoSpaceDrum`
+
+Es gibt noch viel mehr, aber das sollte fürs Erste reichen..
+
+🦥 Tipp für faule: Mach Doppel-Klick auf einen Namen um ihn zu markieren.
+Dann kannst du ihn mit `Strg`+`C` kopieren und mit `Strg`+`V` einfügen.
+
+
+
+## Sequenzen / Sequences
+
+Im letzten Beispiel haben wir schon gesehen dass man mehrere Sounds hintereinander abspielen kann wenn man sie durch Leerzeichen trennt:
+
+
+
+Versuch noch mehr Sounds hinzuzfügen!
+
+
+
+**Je länger die Sequence, desto schneller**
+
+
+
+cpm = **c**ycles per **m**inute = Cycles pro Minute
+
+Das Tempo ist standardmäßig auf 60cpm eingestellt, also 1 Cycle pro Sekunde.
+
+`cpm` ist angelehnt an `bpm` (=beats per minute).
+
+
+
+Wir werden später noch mehr Möglichkeiten kennen lernen das Tempo zu verändern.
+
+**Pausen mit '~'**
+
+
+
+Tilde tippen:
+
+- Windows / Linux: `Alt Gr` + `~`
+- Mac: `option` + `N`
+
+
+
+**Unter-Sequenzen mit [Klammern]**
+
+
+
+Der Inhalt der Klammer wird ebenfalls zusammengequetscht!
+
+Füge noch mehr Sounds in die Klammern ein!
+
+
+
+Genau wie bei der ganzen Sequence wird eine Unter-Sequence schneller je mehr drin ist.
+
+**Multiplikation: Dinge schneller machen**
+
+
+
+Tonhöhe = sehr schneller Rhythmus
+
+
+
+**Multiplikation: Ganze Unter-Sequences schneller machen**
+
+
+
+Du kannst so tief verschachteln wie du willst!
+
+
+
+**Parallele Sequenzen mit Komma**
+
+
+
+Ist dir aufgefallen dass sich die letzten beiden Beispiele gleich anhören?
+
+Es kommt öfter vor, dass man die gleiche Idee auf verschiedene Arten ausdrücken kann.
+
+
+
+**Mehrere Zeilen schreiben mit \` (backtick)**
+
+
+
+Ob man " oder \` benutzt ist nur eine Frage der Übersichtlichkeit.
+
+
+
+**Sample Nummer separat auswählen**
+
+Benutzt man nur einen Sound mit unterschiedlichen Sample Nummer sieht das so aus:
+
+
+
+Ist die aufgefallen dass die letzten 2 Patterns extrem ähnlich sind?
+Bestimmte Drum Patterns werden oft genreübergreifend wiederverwendet.
+
+
+
+We Will Rock you
+
+
+
+Willkommen zum Strudel Workshop!
+Du hast den richtigen Ort gefunden wenn du lernen möchtest wie man mit Code Musik macht.
+
+## Was ist Strudel
+
+Mit Strudel kann man dynamische Musikstücke in Echtzeit schreiben.
+Es ist eine in JavaScript entwickelte Version von [Tidal Cycles](https://tidalcycles.org/) und wurde 2022 von Alex McLean und Felix Roos initiiert.
+Tidal Cycles, auch bekannt unter dem Namen Tidal, ist eine Computersprache für algorithmische Muster.
+Obwohl sie meistens für die Erzeugung von Musik eingesetzt wird, kann sie für jede Art von Tätigkeit eingesetzt werden,
+in der Muster eine Rolle spielen.
+
+Du brauchst keine Erfahrung in JavaScript oder Tidal Cycles um mit Strudel Musik zu machen.
+Dieser interaktive Workshop leitet dich spielerisch durch die Grundlagen von Strudel.
+Der beste Ort um mit Strudel Musik zu machen ist das [Strudel REPL](https://strudel.tidalcycles.org/).
+
+## Was kann man mit Strudel machen?
+
+- Musik Live Coding: In Echtzeit mit Code Musik machen
+- Algorithmische Komposition: Schreibe Musik mithilfe Tidals einzigartiger Sprache für Muster
+- Lehren: Strudel eignet sich gut für Lehrende, da keine Installation nötig ist und die Sprache kein theoretisches Vorwissen erfordert.
+- Mit anderen Musik-Anwendungen kombinieren: Per MIDI oder OSC kann Strudel als flexibler Sequencer mit jedem Setup kombiniert werden
+
+## Beispiel
+
+Hier ist ein Beispiel wie Strudel klingen kann:
+
+],hh*8")
+ .speed(perlin.range(.8,.9)), // random sample speed variation
+ // bassline
+ ""
+ .off(1/8,x=>x.add(12).degradeBy(.5)) // random octave jumps
+ .add(perlin.range(0,.5)) // random pitch variation
+ .superimpose(add(.05)) // add second, slightly detuned voice
+ .note() // wrap in "note"
+ .decay(.15).sustain(0) // make each note of equal length
+ .s('sawtooth') // waveform
+ .gain(.4) // turn down
+ .cutoff(sine.slow(7).range(300,5000)), // automate cutoff
+ // chords
+ ">".voicings('lefthand')
+ .superimpose(x=>x.add(.04)) // add second, slightly detuned voice
+ .add(perlin.range(0,.5)) // random pitch variation
+ .note() // wrap in "note"
+ .s('sawtooth') // waveform
+ .gain(.16) // turn down
+ .cutoff(500) // fixed cutoff
+ .attack(1) // slowly fade in
+)
+.slow(3/2)`}
+/>
+
+Mehr Beispiele gibt es [hier](/examples).
+
+Du kannst auch im [Strudel REPL](https://strudel.tidalcycles.org/) auf `shuffle` klicken um ein zufälliges Beispiel zu hören.
+
+## Workshop
+
+Der beste Weg um Strudel zu lernen ist der nun folgende Workshop.
+Wenn du bereit bist, lass uns loslegen mit deinen [ersten Sounds](/de/workshop/first-sounds).
diff --git a/website/src/pages/de/workshop/index.astro b/website/src/pages/de/workshop/index.astro
new file mode 100644
index 00000000..9f79e4c2
--- /dev/null
+++ b/website/src/pages/de/workshop/index.astro
@@ -0,0 +1,3 @@
+
diff --git a/website/src/pages/de/workshop/pattern-effects.mdx b/website/src/pages/de/workshop/pattern-effects.mdx
new file mode 100644
index 00000000..b701958a
--- /dev/null
+++ b/website/src/pages/de/workshop/pattern-effects.mdx
@@ -0,0 +1,183 @@
+---
+title: Pattern Effekte
+layout: ../../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '@src/docs/MiniRepl';
+import Box from '@components/Box.astro';
+import QA from '@components/QA';
+
+# Pattern Effekte
+
+Bis jetzt sind die meisten Funktionen die wir kennengelernt haben ähnlich wie Funktionen in anderen Musik Programmen: Sequencing von Sounds, Noten und Effekten.
+
+In diesem Kapitel beschäftigen wir uns mit Funktionen die weniger herkömmlich oder auch enzigartig sind.
+
+**rev = rückwärts abspielen**
+
+
+
+Schreibe `//` vor eine der beiden Zeilen im `stack`!
+
+
+
+**mehrere tempos**
+
+
+
+Schreibe wieder `//` vor eine oder mehrere Zeilen im `stack`.
+
+
+
+**add = addieren**
+
+>"))
+.color(">").adsr("[.1 0]:.2:[1 0]")
+.sound("gm_acoustic_bass").room(.5)`}
+ punchcard
+/>
+
+
+
+Addiert man eine Zahl zu einer Note, verhält sich diese wie eine Zahl.
+
+z.B. c4 = 60, also ist c4 + 2 = 62
+
+
+
+Man kann auch mehrmals addieren:
+
+>").add("0,7"))
+.color(">").adsr("[.1 0]:.2:[1 0]")
+.sound("gm_acoustic_bass").room(.5)`}
+ punchcard
+/>
+
+**add + scale**
+
+ [~ <4 1>]>*2".add("<0 [0,2,4]>/4"))
+.scale("C5:minor").release(.5)
+.sound("gm_xylophone").room(.5)`}
+ punchcard
+/>
+
+**Alles zusammen**
+
+ [~ <4 1>]>*2".add("<0 [0,2,4]>/4"))
+ .scale("C5:minor")
+ .sound("gm_xylophone")
+ .room(.4).delay(.125),
+ note("c2 [eb3,g3]".add("<0 <1 -1>>"))
+ .adsr("[.1 0]:.2:[1 0]")
+ .sound("gm_acoustic_bass")
+ .room(.5),
+ n("0 1 [2 3] 2").sound("jazz").jux(rev).slow(2)
+)`}
+/>
+
+**ply**
+
+
+
+Probier `ply` mit einem pattern zu automatisieren, z.b. `"<1 2 1 3>"`
+
+
+
+**off**
+
+] <2 3> [~ 1]>"
+ .off(1/8, x=>x.add(4))
+ //.off(1/4, x=>x.add(7))
+).scale("/4")
+.s("triangle").room(.5).ds(".1:0").delay(.5)`}
+ punchcard
+/>
+
+
+
+In der notation `x=>x.`, das `x` ist das Pattern das wir bearbeiten.
+
+
+
+`off` ist auch nützlich für sounds:
+
+x.speed(1.5).gain(.25))`}
+/>
+
+| name | description | example |
+| ---- | --------------------------------- | ---------------------------------------------------------------------------------------------- |
+| rev | rückwärts | ")).scale("C:minor")`} /> |
+| ply | multipliziert jedes element x mal | ")`} /> |
+| off | verzögert eine modifizierte kopie | x.speed(2))`} /> |
diff --git a/website/src/pages/de/workshop/recap.mdx b/website/src/pages/de/workshop/recap.mdx
new file mode 100644
index 00000000..db392b8b
--- /dev/null
+++ b/website/src/pages/de/workshop/recap.mdx
@@ -0,0 +1,68 @@
+---
+title: Recap
+layout: ../../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../../docs/MiniRepl';
+
+# Workshop Rückblick
+
+Diese Seite ist eine Auflistung aller im Workshop enthaltenen Funktionen.
+
+## Mini Notation
+
+| Concept | Syntax | Example |
+| --------------------- | -------- | -------------------------------------------------------------------------------- |
+| Sequence | space | ")`} /> |
+| Verlängern | @ | ")`} /> |
+| vowel | ")`} /> |
+| gain | ")`} /> |
+| range | ")).scale("C:minor")`} /> |
+| ply | jedes element schneller machen | ")`} /> |
+| off | verzögert eine modifizierte kopie | x.speed(2))`} /> |
diff --git a/website/src/pages/examples/index.astro b/website/src/pages/examples/index.astro
index b1ceae11..c973f2eb 100644
--- a/website/src/pages/examples/index.astro
+++ b/website/src/pages/examples/index.astro
@@ -1,6 +1,8 @@
---
import * as tunes from '../../../src/repl/tunes.mjs';
import HeadCommon from '../../components/HeadCommon.astro';
+
+import { getMetadata } from '../metadata_parser';
---
@@ -12,7 +14,7 @@ import HeadCommon from '../../components/HeadCommon.astro';
Object.entries(tunes).map(([name, tune]) => (
diff --git a/website/src/pages/functions/intro.mdx b/website/src/pages/functions/intro.mdx
index d396543c..2e1bb7eb 100644
--- a/website/src/pages/functions/intro.mdx
+++ b/website/src/pages/functions/intro.mdx
@@ -6,23 +6,24 @@ layout: ../../layouts/MainLayout.astro
import { MiniRepl } from '../../docs/MiniRepl';
import { JsDoc } from '../../docs/JsDoc';
-# Functional JavaScript API
+# Pattern Functions
-While the mini notation is powerful on its own, there is much more to discover.
-Internally, the mini notation will expand to use the actual functional JavaScript API.
+Let's learn all about functions to create and modify patterns.
+At the core of Strudel, everything is made of functions.
-For example, this Pattern in Mini Notation:
+For example, everything you can do with the Mini-Notation can also be done with a function.
+This Pattern in Mini Notation:
).
A string is simply a sequence of individual characters.
In TidalCycles, double quoted strings are used to write _patterns_ using the mini-notation, and you may hear the phrase _pattern string_ from time to time.
If you want to create a regular string and not a pattern, you can use single quotes, e.g. `'C minor'` will not be parsed as Mini Notation.
-The good news is, that this covers 99% of the JavaScript syntax needed for Strudel!
-
-Let's now look at the way we can express [Rhythms](/learn/mini-notation)...
+The good news is, that this covers most of the JavaScript syntax needed for Strudel!
diff --git a/website/src/pages/learn/factories.mdx b/website/src/pages/learn/factories.mdx index 46567e34..0d93fb21 100644 --- a/website/src/pages/learn/factories.mdx +++ b/website/src/pages/learn/factories.mdx @@ -1,12 +1,12 @@ --- -title: Pattern Constructors +title: Creating Patterns layout: ../../layouts/MainLayout.astro --- import { MiniRepl } from '../../docs/MiniRepl'; import { JsDoc } from '../../docs/JsDoc'; -# Pattern Constructors +# Creating Patterns The following functions will return a pattern. These are the equivalents used by the Mini Notation: diff --git a/website/src/pages/learn/metadata.mdx b/website/src/pages/learn/metadata.mdx new file mode 100644 index 00000000..27f46921 --- /dev/null +++ b/website/src/pages/learn/metadata.mdx @@ -0,0 +1,94 @@ +--- +title: Music metadata +layout: ../../layouts/MainLayout.astro +--- + +import { MiniRepl } from '../../docs/MiniRepl'; +import { JsDoc } from '../../docs/JsDoc'; + +# Music metadata + +You can optionally add some music metadata in your Strudel code, by using tags in code comments: + +```js +// @title Hey Hoo +// @by Sam Tagada +// @license CC BY-NC-SA +``` + +Like other comments, those are ignored by Strudel, but it can be used by other tools to retrieve some information about the music. + +It is for instance used by the [swatch tool](https://github.com/tidalcycles/strudel/tree/main/my-patterns) to display pattern titles in the [examples page](https://strudel.tidalcycles.org/examples/). + +## Alternative syntax + +You can also use comment blocks: + +```js +/* +@title Hey Hoo +@by Sam Tagada +@license CC BY-NC-SA +*/ +``` + +Or define multiple tags in one line: + +```js +// @title Hey Hoo @by Sam Tagada @license CC BY-NC-SA +``` + +The `title` tag has an alternative syntax using quotes (must be defined at the very begining): + +```js +// "Hey Hoo" @by Sam Tagada +``` + +## Tags list + +Available tags are: + +- `@title`: music title +- `@by`: music author(s), separated by comma, eventually followed with a link in `<>` (ex: `@by John Doe`)
+- `@license`: music license(s)
+- `@details`: some additional information about the music
+- `@url`: web page(s) related to the music (git repo, soundcloud link, etc.)
+- `@genre`: music genre(s) (pop, jazz, etc)
+- `@album`: music album name
+
+## Multiple values
+
+Some of them accepts several values, using the comma or new line separator, or duplicating the tag:
+
+```js
+/*
+@by Sam Tagada
+ Jimmy
+@genre pop, jazz
+@url https://example.com
+@url https://example.org
+*/
+```
+
+You can also add optional prefixes and use tags where you want:
+
+```js
+/*
+song @by Sam Tagada
+samples @by Jimmy
+*/
+...
+note("a3 c#4 e4 a4") // @by Sandy
+```
+
+## Multiline
+
+If a tag doesn't accept a list, it can take multi-line values:
+
+```js
+/*
+@details I wrote this song in February 19th, 2023.
+ It was around midnight and I was lying on
+ the sofa in the living room.
+*/
+```
diff --git a/website/src/pages/learn/mini-notation.mdx b/website/src/pages/learn/mini-notation.mdx
index 79e81fc4..d0844f45 100644
--- a/website/src/pages/learn/mini-notation.mdx
+++ b/website/src/pages/learn/mini-notation.mdx
@@ -8,11 +8,17 @@ import { JsDoc } from '../../docs/JsDoc';
# Mini-notation
-Similar to [Haskell Tidal Cycles](https://tidalcycles.org/docs/), Strudel has an "embedded mini-notation" (also called a [domain-specific language, or DSL](https://en.wikipedia.org/wiki/Domain-specific_language)) that is designed for writing rhythmic patterns using little amounts of text.
-If you've seen any Tidal code before, you may have noticed the mini-notation and wondered what it's all about.
-It's one of the main features of Tidal, and although it might look like a strange way to notate music and other patterns, you will soon see how powerful it can be.
+Just like [Tidal Cycles](https://tidalcycles.org/), Strudel uses a so called "Mini-Notation", which is a custom language that is designed for writing rhythmic patterns using little amounts of text.
-Before diving deeper into the details, here is a flavour of how the mini-notation looks like:
+## Note
+
+This page just explains the entirety of the Mini-Notation syntax.
+If you are just getting started with Strudel, you can learn the basics of the Mini-Notation in a more practical manner in the [workshop](http://localhost:3000/workshop/first-sounds).
+After that, you can come back here if you want to understand every little detail.
+
+## Example
+
+Before diving deeper into the details, here is a flavour of how the Mini-Notation looks like:
(c[1] || c[2] || '').trim());
+ const tags = {};
+
+ const [prefix, title] = (comments[0] || '').split('"');
+ if (prefix.trim() === '' && title !== undefined) {
+ tags['title'] = title;
+ }
+
+ for (const comment of comments) {
+ const tag_matches = comment.split('@').slice(1);
+ for (const tag_match of tag_matches) {
+ let [tag, tag_value] = tag_match.split(/ (.*)/s);
+ tag = tag.trim();
+ tag_value = (tag_value || '').replaceAll(/ +/g, ' ').trim();
+
+ if (ALLOW_MANY.includes(tag)) {
+ const tag_list = tag_value
+ .split(/[,\n]/)
+ .map((t) => t.trim())
+ .filter((t) => t !== '');
+ tags[tag] = tag in tags ? tags[tag].concat(tag_list) : tag_list;
+ } else {
+ tag_value = tag_value.replaceAll(/\s+/g, ' ');
+ tags[tag] = tag in tags ? tags[tag] + ' ' + tag_value : tag_value;
+ }
+ }
+ }
+
+ return tags;
+}
diff --git a/website/src/pages/swatch/list.json.js b/website/src/pages/swatch/list.json.js
index 6d86e384..4bf6bb4a 100644
--- a/website/src/pages/swatch/list.json.js
+++ b/website/src/pages/swatch/list.json.js
@@ -1,9 +1,11 @@
+import { getMetadata } from '../metadata_parser';
+
export function getMyPatterns() {
const my = import.meta.glob('../../../../my-patterns/**', { as: 'raw', eager: true });
return Object.fromEntries(
- Object.entries(my) //
- .filter(([name]) => name.endsWith('.txt')) //
- .map(([name, raw]) => [name.split('/').slice(-1), raw]), //
+ Object.entries(my)
+ .filter(([name]) => name.endsWith('.txt'))
+ .map(([name, raw]) => [getMetadata(raw)['title'] || name.split('/').slice(-1), raw]),
);
}
diff --git a/website/src/pages/workshop/first-effects.mdx b/website/src/pages/workshop/first-effects.mdx
new file mode 100644
index 00000000..e3ce5487
--- /dev/null
+++ b/website/src/pages/workshop/first-effects.mdx
@@ -0,0 +1,335 @@
+---
+title: First Effects
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+import QA from '@components/QA';
+
+# First Effects
+
+import Box from '@components/Box.astro';
+
+We have sounds, we have notes, now let's look at effects!
+
+## Some basic effects
+
+**low-pass filter**
+
+/2")
+.sound("sawtooth").lpf(800)`}
+/>
+
+
+
+lpf = **l**ow **p**ass **f**ilter
+
+- Change lpf to 200. Notice how it gets muffled. Think of it as standing in front of the club with the door closed 🚪.
+- Now let's open the door... change it to 5000. Notice how it gets brighter ✨🪩
+
+
+
+**pattern the filter**
+
+/2")
+.sound("sawtooth").lpf("200 1000")`}
+/>
+
+
+
+- Try adding more values
+- Notice how the pattern in lpf does not change the overall rhythm
+
+We will learn how to automate with waves later...
+
+
+
+**vowel**
+
+/2")
+.sound("sawtooth").vowel("/2")`}
+/>
+
+**gain**
+
+
+
+Rhythm is all about dynamics!
+
+- Remove `.gain(...)` and notice how flat it sounds.
+- Bring it back by undoing (ctrl+z)
+
+
+
+**stacks within stacks**
+
+Let's combine all of the above into a little tune:
+
+/2")
+ .sound("sawtooth").lpf("200 1000"),
+ note("<[c3,g3,e4] [bb2,f3,d4] [a2,f3,c4] [bb2,g3,eb4]>/2")
+ .sound("sawtooth").vowel("/2")
+) `}
+/>
+
+
+
+Try to identify the individual parts of the stacks, pay attention to where the commas are.
+The 3 parts (drums, bassline, chords) are exactly as earlier, just stacked together, separated by comma.
+
+
+
+**shape the sound with an adsr envelope**
+
+")
+.sound("sawtooth").lpf(600)
+.attack(.1)
+.decay(.1)
+.sustain(.25)
+.release(.2)`}
+/>
+
+
+
+Try to find out what the numbers do.. Compare the following
+
+- attack: `.5` vs `0`
+- decay: `.5` vs `0`
+- sustain: `1` vs `.25` vs `0`
+- release: `0` vs `.5` vs `1`
+
+Can you guess what they do?
+
+
+
+
+
+- attack: time it takes to fade in
+- decay: time it takes to fade to sustain
+- sustain: level after decay
+- release: time it takes to fade out after note is finished
+
+
+
+
+
+**adsr short notation**
+
+")
+.sound("sawtooth").lpf(600)
+.adsr(".1:.1:.5:.2")
+`}
+/>
+
+**delay**
+
+ ~]")
+ .sound("gm_electric_guitar_muted"),
+ sound("").bank("RolandTR707")
+).delay(".5")`}
+/>
+
+
+
+Try some `delay` values between 0 and 1. Btw, `.5` is short for `0.5`
+
+What happens if you use `.delay(".8:.125")` ? Can you guess what the second number does?
+
+What happens if you use `.delay(".8:.06:.8")` ? Can you guess what the third number does?
+
+
+
+
+
+`delay("a:b:c")`:
+
+- a: delay volume
+- b: delay time
+- c: feedback (smaller number = quicker fade)
+
+
+
+**room aka reverb**
+
+ ~@16] ~>/2")
+.scale("D4:minor").sound("gm_accordion:2")
+.room(2)`}
+/>
+
+
+
+Try different values!
+
+Add a delay too!
+
+
+
+**little dub tune**
+
+ ~]")
+ .sound("gm_electric_guitar_muted").delay(.5),
+ sound("").bank("RolandTR707").delay(.5),
+ n("<4 [3@3 4] [<2 0> ~@16] ~>/2")
+ .scale("D4:minor").sound("gm_accordion:2")
+ .room(2).gain(.5)
+)`}
+/>
+
+Let's add a bass to make this complete:
+
+ ~]")
+ .sound("gm_electric_guitar_muted").delay(.5),
+ sound("").bank("RolandTR707").delay(.5),
+ n("<4 [3@3 4] [<2 0> ~@16] ~>/2")
+ .scale("D4:minor").sound("gm_accordion:2")
+ .room(2).gain(.4),
+ n("<0 [~ 0] 4 [3 2] [0 ~] [0 ~] <0 2> ~>*2")
+ .scale("D2:minor")
+ .sound("sawtooth,triangle").lpf(800)
+)`}
+/>
+
+
+
+Try adding `.hush()` at the end of one of the patterns in the stack...
+
+
+
+**pan**
+
+").room(.2)`} />
+
+**fast and slow**
+
+We can use `fast` and `slow` to change the tempo of a pattern outside of Mini-Notation:
+
+
+
+Change the `slow` value. Try replacing it with `fast`.
+
+What happens if you use a pattern like `.fast("<1 [2 4]>")`?
+
+
+
+By the way, inside Mini-Notation, `fast` is `*` and `slow` is `/`.
+
+")`} />
+
+## automation with signals
+
+Instead of changing values stepwise, we can also control them with signals:
+
+
+
+The basic waveforms for signals are `sine`, `saw`, `square`, `tri` 🌊
+
+Try also random signals `rand` and `perlin`!
+
+The gain is visualized as transparency in the pianoroll.
+
+
+
+**setting a range**
+
+By default, waves oscillate between 0 to 1. We can change that with `range`:
+
+
+
+What happens if you flip the range values?
+
+
+
+We can change the automation speed with slow / fast:
+
+/2")
+.sound("sawtooth")
+.lpf(sine.range(100, 2000).slow(8))`}
+/>
+
+
+
+The whole automation will now take 8 cycles to repeat.
+
+
+
+## Recap
+
+| name | example |
+| ----- | -------------------------------------------------------------------------------------------------- |
+| lpf | ")`} /> |
+| vowel | ")`} /> |
+| gain | ")`} /> |
+| range | [midi2note(i + 36), i + 36]),
+ )}
+/>
+
+
+
+Try out different numbers!
+
+Try decimal numbers, like 55.5
+
+
+
+**play notes with letters**
+
+ [n, n.split('')[0]]))}
+/>
+
+
+
+Try out different letters (a - g).
+
+Can you find melodies that are actual words? Hint: ☕ 😉 ⚪
+
+
+
+**add flats or sharps to play the black keys**
+
+ [n, n.split('').slice(0, 2).join('')]),
+ )}
+/>
+
+ [n, n.split('').slice(0, 2).join('')]),
+ )}
+/>
+
+**play notes with letters in different octaves**
+
+ [n, n]))}
+ claviatureLabels={Object.fromEntries(
+ Array(49)
+ .fill()
+ .map((_, i) => [midi2note(i + 36), midi2note(i + 36)]),
+ )}
+/>
+
+
+
+Try out different octaves (1-8)
+
+
+
+If you are not comfortable with the note letter system, it should be easier to use numbers instead.
+Most of the examples below will use numbers for that reason.
+We will also look at ways to make it easier to play the right notes later.
+
+## changing the sound
+
+Just like with unpitched sounds, we can change the sound of our notes with `sound`:
+
+
+
+Try out different sounds:
+
+- gm_electric_guitar_muted
+- gm_acoustic_bass
+- gm_voice_oohs
+- gm_blown_bottle
+- sawtooth
+- square
+- triangle
+- how about bd, sd or hh?
+- remove `.sound('...')` completely
+
+
+
+**switch between sounds**
+
+
+
+The `note` and `sound` patterns are combined!
+
+We will see more ways to combine patterns later..
+
+
+
+## Longer Sequences
+
+**Divide sequences with `/` to slow them down**
+
+{/* [c2 bb1 f2 eb2] */}
+
+
+
+The `/4` plays the sequence in brackets over 4 cycles (=4s).
+
+So each of the 4 notes is 1s long.
+
+Try adding more notes inside the brackets and notice how it gets faster.
+
+
+
+Because it is so common to just play one thing per cycle, you can..
+
+**Play one per cycle with \< \>**
+
+").sound("gm_acoustic_bass")`} punchcard />
+
+
+
+Try adding more notes inside the brackets and notice how it does **not** get faster.
+
+
+
+**Play one sequence per cycle**
+
+{/* <[c2 c3]*4 [bb1 bb2]*4 [f2 f3]*4 [eb2 eb3]*4>/2 */}
+
+/2")
+.sound("gm_acoustic_bass")`}
+ punchcard
+/>
+
+**Alternate between multiple things**
+
+")
+.sound("gm_xylophone")`}
+ punchcard
+/>
+
+This is also useful for unpitched sounds:
+
+, [~ hh]*2")
+.bank("RolandTR909")`}
+ punchcard
+/>
+
+## Scales
+
+Finding the right notes can be difficult.. Scales are here to help:
+
+")
+.scale("C:minor").sound("piano")`}
+ punchcard
+/>
+
+
+
+Try out different numbers. Any number should sound good!
+
+Try out different scales:
+
+- C:major
+- A2:minor
+- D:dorian
+- G:mixolydian
+- A2:minor:pentatonic
+- F:major:pentatonic
+
+
+
+**automate scales**
+
+Just like anything, we can automate the scale with a pattern:
+
+, 2 4 <[6,8] [7,9]>")
+.scale("/4")
+.sound("piano")`}
+ punchcard
+/>
+
+
+
+If you have no idea what these scale mean, don't worry.
+These are just labels for different sets of notes that go well together.
+
+Take your time and you'll find scales you like!
+
+
+
+## Repeat & Elongate
+
+**Elongate with @**
+
+
+
+Not using `@` is like using `@1`. In the above example, c is 3 units long and eb is 1 unit long.
+
+Try changing that number!
+
+
+
+**Elongate within sub-sequences**
+
+*2")
+.scale("/4")
+.sound("gm_acoustic_bass")`}
+ punchcard
+/>
+
+
+
+This groove is called a `shuffle`.
+Each beat has two notes, where the first is twice as long as the second.
+This is also sometimes called triplet swing. You'll often find it in blues and jazz.
+
+
+
+**Replicate**
+
+]").sound("piano")`} punchcard />
+
+
+
+Try switching between `!`, `*` and `@`
+
+What's the difference?
+
+
+
+## Recap
+
+Let's recap what we've learned in this chapter:
+
+| Concept | Syntax | Example |
+| --------- | ------ | ------------------------------------------------------------------- |
+| Slow down | \/ | ")`} /> |
+| Elongate | @ | /2")
+.sound("gm_synth_bass_1")
+.lpf(800) // <-- we'll learn about this soon`}
+/>
+
+**Classy Melody**
+
+*2\`).scale("C4:minor")
+.sound("gm_synth_strings_1")`}
+/>
+
+**Classy Drums**
+
+, [~ hh]*2")
+.bank("RolandTR909")`}
+/>
+
+**If there just was a way to play all the above at the same time.......**
+
+
+
+It's called `stack` 😙
+
+
+
+/2")
+ .sound("gm_synth_bass_1").lpf(800),
+ n(\`<
+ [~ 0] 2 [0 2] [~ 2]
+ [~ 0] 1 [0 1] [~ 1]
+ [~ 0] 3 [0 3] [~ 3]
+ [~ 0] 2 [0 2] [~ 2]
+ >*2\`).scale("C4:minor")
+ .sound("gm_synth_strings_1"),
+ sound("bd*2, ~ , [~ hh]*2")
+ .bank("RolandTR909")
+)`}
+/>
+
+This is starting to sound like actual music! We have sounds, we have notes, now the last piece of the puzzle is missing: [effects](/workshop/first-effects)
diff --git a/website/src/pages/workshop/first-sounds.mdx b/website/src/pages/workshop/first-sounds.mdx
new file mode 100644
index 00000000..893a563d
--- /dev/null
+++ b/website/src/pages/workshop/first-sounds.mdx
@@ -0,0 +1,330 @@
+---
+title: First Sounds
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '@src/docs/MiniRepl';
+import Box from '@components/Box.astro';
+import QA from '@components/QA';
+
+# First Sounds
+
+This is the first chapter of the Strudel Workshop, nice to have you on board!
+
+## Code Fields
+
+The workshop is full of interactive code fields. Let's learn how to use those. Here is one:
+
+
+
+1. ⬆️ click into the text field above ⬆️
+2. press `ctrl`+`enter` to play
+3. change `casio` to `metal`
+4. press `ctrl`+`enter` to update
+5. press `ctrl`+`.` to stop
+
+
+
+Congratulations, you are now live coding!
+
+## Sounds
+
+We have just played a sound with `sound` like this:
+
+
+
+`casio` is one of many standard sounds.
+
+Try out a few other sounds:
+
+```
+insect wind jazz metal east crow casio space numbers
+```
+
+You might hear a little pause while the sound is loading
+
+
+
+**Change Sample Number with :**
+
+One Sound can contain multiple samples (audio files).
+
+You can select the sample by appending `:` followed by a number to the name:
+
+
+
+Try different sound / sample number combinations.
+
+Not adding a number is like doing `:0`
+
+
+
+Now you know how to use different sounds.
+For now we'll stick to this little selection of sounds, but we'll find out how to load your own sounds later.
+
+## Drum Sounds
+
+By default, Strudel comes with a wide selection of drum sounds:
+
+
+
+These letter combinations stand for different parts of a drum set:
+
+- `bd` = **b**ass **d**rum
+- `sd` = **s**nare **d**rum
+- `sd` = **sd**are
+- `rim` = **rim**shot
+- `hh` = **h**i**h**at
+- `oh` = **o**pen **h**ihat
+
+Try out different drum sounds!
+
+
+
+To change the sound character of our drums, we can use `bank` to change the drum machine:
+
+
+
+Try changing `RolandTR909` to one of
+
+- `AkaiLinn`
+- `RhythmAce`
+- `RolandTR808`
+- `RolandTR707`
+- `ViscoSpaceDrum`
+
+There are a lot more, but let's keep it simple for now
+
+🦥 Pro-Tip: Mark a name via double click. Then just copy and paste!
+
+
+
+## Sequences
+
+In the last example, we already saw that you can play multiple sounds in a sequence by separating them with a space:
+
+
+
+Try adding more sounds to the sequence!
+
+
+
+**The longer the sequence, the faster it runs**
+
+
+
+cpm = cycles per minute
+
+By default, the tempo is 60 cycles per minute = 1 cycle per second.
+
+
+
+We will look at other ways to change the tempo later!
+
+**Add a rests in a sequence with '~'**
+
+
+
+Try adding more sounds inside a bracket!
+
+
+
+Similar to the whole sequence, the content of a sub-sequence will be squished to the its own length.
+
+**Multiplication: Speed things up**
+
+
+
+Pitch = really fast rhythm
+
+
+
+**Sub-Sub-Sequences with [[brackets]]**
+
+
+
+You can go as deep as you want!
+
+
+
+**Play sequences in parallel with comma**
+
+
+
+Notice how the 2 above are the same?
+
+It is quite common that there are many ways to express the same idea.
+
+
+
+**Multiple Lines with backticks**
+
+
+
+Notice that the two patterns are extremely similar.
+Certain drum patterns are reused across genres.
+
+
+
+We Will Rock you
+
+
+It is an official port of the [Tidal Cycles](https://tidalcycles.org/) pattern language to JavaScript.
+You don't need to know JavaScript or Tidal Cycles to make music with Strudel. +This interactive tutorial will guide you through the basics of Strudel.
+The best place to actually make music with Strudel is the [Strudel REPL](https://strudel.tidalcycles.org/) + + + +## What can you do with Strudel? + +- live code music: make music with code in real time +- algorithmic composition: compose music using tidal's unique approach to pattern manipulation +- teaching: focussing on a low barrier of entry, Strudel is a good fit for teaching music and code at the same time. +- integrate into your existing music setup: either via MIDI or OSC, you can use Strudel as a really flexible sequencer + +## Example + +Here is an example of how strudel can sound: + +],hh*8")
+ .speed(perlin.range(.8,.9)), // random sample speed variation
+ // bassline
+ ""
+ .off(1/8,x=>x.add(12).degradeBy(.5)) // random octave jumps
+ .add(perlin.range(0,.5)) // random pitch variation
+ .superimpose(add(.05)) // add second, slightly detuned voice
+ .note() // wrap in "note"
+ .decay(.15).sustain(0) // make each note of equal length
+ .s('sawtooth') // waveform
+ .gain(.4) // turn down
+ .cutoff(sine.slow(7).range(300,5000)), // automate cutoff
+ // chords
+ ">".voicings('lefthand')
+ .superimpose(x=>x.add(.04)) // add second, slightly detuned voice
+ .add(perlin.range(0,.5)) // random pitch variation
+ .note() // wrap in "note"
+ .s('sawtooth') // waveform
+ .gain(.16) // turn down
+ .cutoff(500) // fixed cutoff
+ .attack(1) // slowly fade in
+)
+.slow(3/2)`}
+/>
+
+To hear more, go to the [Strudel REPL](https://strudel.tidalcycles.org/) and press shuffle to hear a random example pattern.
+
+## Getting Started
+
+The best way to start learning Strudel is the workshop.
+If you're ready to dive in, let's start with your [first sounds](/workshop/first-sounds)
diff --git a/website/src/pages/workshop/index.astro b/website/src/pages/workshop/index.astro
new file mode 100644
index 00000000..9f79e4c2
--- /dev/null
+++ b/website/src/pages/workshop/index.astro
@@ -0,0 +1,3 @@
+
diff --git a/website/src/pages/workshop/pattern-effects.mdx b/website/src/pages/workshop/pattern-effects.mdx
new file mode 100644
index 00000000..23346ccb
--- /dev/null
+++ b/website/src/pages/workshop/pattern-effects.mdx
@@ -0,0 +1,181 @@
+---
+title: Pattern Effects
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '@src/docs/MiniRepl';
+import Box from '@components/Box.astro';
+import QA from '@components/QA';
+
+# Pattern Effects
+
+Up until now, most of the functions we've seen are what other music programs are typically capable of: sequencing sounds, playing notes, controlling effects.
+
+In this chapter, we are going to look at functions that are more unique to tidal.
+
+**reverse patterns with rev**
+
+
+
+Try commenting out one of the two by adding `//` before a line
+
+
+
+**multiple tempos**
+
+
+
+Try commenting out one or more by adding `//` before a line
+
+
+
+**add**
+
+>"))
+.color(">").adsr("[.1 0]:.2:[1 0]")
+.sound("gm_acoustic_bass").room(.5)`}
+ punchcard
+/>
+
+
+
+If you add a number to a note, the note will be treated as if it was a number
+
+
+
+We can add as often as we like:
+
+>").add("0,7"))
+.color(">").adsr("[.1 0]:.2:[1 0]")
+.sound("gm_acoustic_bass").room(.5)`}
+ punchcard
+/>
+
+**add with scale**
+
+ [~ <4 1>]>*2".add("<0 [0,2,4]>/4"))
+.scale("C5:minor").release(.5)
+.sound("gm_xylophone").room(.5)`}
+ punchcard
+/>
+
+**time to stack**
+
+ [~ <4 1>]>*2".add("<0 [0,2,4]>/4"))
+ .scale("C5:minor")
+ .sound("gm_xylophone")
+ .room(.4).delay(.125),
+ note("c2 [eb3,g3]".add("<0 <1 -1>>"))
+ .adsr("[.1 0]:.2:[1 0]")
+ .sound("gm_acoustic_bass")
+ .room(.5),
+ n("0 1 [2 3] 2").sound("jazz").jux(rev).slow(2)
+)`}
+/>
+
+**ply**
+
+
+
+Try patterning the `ply` function, for example using `"<1 2 1 3>"`
+
+
+
+**off**
+
+] <2 3> [~ 1]>"
+ .off(1/8, x=>x.add(4))
+ //.off(1/4, x=>x.add(7))
+).scale("/4")
+.s("triangle").room(.5).ds(".1:0").delay(.5)`}
+ punchcard
+/>
+
+
+
+In the notation `x=>x.`, the `x` is the shifted pattern, which where modifying.
+
+
+
+off is also useful for sounds:
+
+x.speed(1.5).gain(.25))`}
+/>
+
+| name | description | example |
+| ---- | ------------------------------ | ---------------------------------------------------------------------------------------------- |
+| rev | reverse | ")).scale("C:minor")`} /> |
+| ply | speed up each event n times | ")`} /> |
+| off | copy, shift time & modify | x.speed(2))`} /> |
diff --git a/website/src/pages/workshop/recap.mdx b/website/src/pages/workshop/recap.mdx
new file mode 100644
index 00000000..fad14fb4
--- /dev/null
+++ b/website/src/pages/workshop/recap.mdx
@@ -0,0 +1,68 @@
+---
+title: Recap
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../docs/MiniRepl';
+
+# Workshop Recap
+
+This page is just a listing of all functions covered in the workshop!
+
+## Mini Notation
+
+| Concept | Syntax | Example |
+| ----------------- | -------- | -------------------------------------------------------------------------------- |
+| Sequence | space | ")`} /> |
+| Elongate | @ | ")`} /> |
+| vowel | ")`} /> |
+| gain | ")`} /> |
+| range | ")).scale("C:minor")`} /> |
+| ply | speed up each event n times | ")`} /> |
+| off | copy, shift time & modify | x.speed(2))`} /> |
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 4b3399ad..30e2f3a1 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -273,6 +273,15 @@ function SoundsTab() {
);
}
+function Checkbox({ label, value, onChange }) {
+ return (
+
+ );
+}
+
function ButtonGroup({ value, onChange, items }) {
return (
-
) : (
-
-
+ {!hideHeader && (
+
+ )}
+
- {error &&
+
+
+
{error.message}
}
-
- {show &&
- {drawTime && (
+ {punchcard && (
{error.message}
}
{tune}
diff --git a/website/src/pages/de/workshop/first-effects.mdx b/website/src/pages/de/workshop/first-effects.mdx
new file mode 100644
index 00000000..7719249a
--- /dev/null
+++ b/website/src/pages/de/workshop/first-effects.mdx
@@ -0,0 +1,336 @@
+---
+title: Erste Effekte
+layout: ../../../layouts/MainLayout.astro
+---
+
+import { MiniRepl } from '../../../docs/MiniRepl';
+import QA from '@components/QA';
+
+# Erste Effekte
+
+import Box from '@components/Box.astro';
+
+## Ein paar grundlegende Effekte
+
+**low-pass filter**
+
+
+
+Willkommen zum Strudel Workshop!
+Du hast den richtigen Ort gefunden wenn du lernen möchtest wie man mit Code Musik macht.
+
+## Was ist Strudel
+
+Mit Strudel kann man dynamische Musikstücke in Echtzeit schreiben.
+Es ist eine in JavaScript entwickelte Version von [Tidal Cycles](https://tidalcycles.org/) und wurde 2022 von Alex McLean und Felix Roos initiiert.
+Tidal Cycles, auch bekannt unter dem Namen Tidal, ist eine Computersprache für algorithmische Muster.
+Obwohl sie meistens für die Erzeugung von Musik eingesetzt wird, kann sie für jede Art von Tätigkeit eingesetzt werden,
+in der Muster eine Rolle spielen.
+
+Du brauchst keine Erfahrung in JavaScript oder Tidal Cycles um mit Strudel Musik zu machen.
+Dieser interaktive Workshop leitet dich spielerisch durch die Grundlagen von Strudel.
+Der beste Ort um mit Strudel Musik zu machen ist das [Strudel REPL](https://strudel.tidalcycles.org/).
+
+## Was kann man mit Strudel machen?
+
+- Musik Live Coding: In Echtzeit mit Code Musik machen
+- Algorithmische Komposition: Schreibe Musik mithilfe Tidals einzigartiger Sprache für Muster
+- Lehren: Strudel eignet sich gut für Lehrende, da keine Installation nötig ist und die Sprache kein theoretisches Vorwissen erfordert.
+- Mit anderen Musik-Anwendungen kombinieren: Per MIDI oder OSC kann Strudel als flexibler Sequencer mit jedem Setup kombiniert werden
+
+## Beispiel
+
+Hier ist ein Beispiel wie Strudel klingen kann:
+
+
- {name}
+ {getMetadata(tune)['title'] || name}
diff --git a/website/src/pages/functions/intro.mdx b/website/src/pages/functions/intro.mdx
index d396543c..2e1bb7eb 100644
--- a/website/src/pages/functions/intro.mdx
+++ b/website/src/pages/functions/intro.mdx
@@ -6,23 +6,24 @@ layout: ../../layouts/MainLayout.astro
import { MiniRepl } from '../../docs/MiniRepl';
import { JsDoc } from '../../docs/JsDoc';
-# Functional JavaScript API
+# Pattern Functions
-While the mini notation is powerful on its own, there is much more to discover.
-Internally, the mini notation will expand to use the actual functional JavaScript API.
+Let's learn all about functions to create and modify patterns.
+At the core of Strudel, everything is made of functions.
-For example, this Pattern in Mini Notation:
+For example, everything you can do with the Mini-Notation can also be done with a function.
+This Pattern in Mini Notation:
diff --git a/website/src/pages/learn/factories.mdx b/website/src/pages/learn/factories.mdx index 46567e34..0d93fb21 100644 --- a/website/src/pages/learn/factories.mdx +++ b/website/src/pages/learn/factories.mdx @@ -1,12 +1,12 @@ --- -title: Pattern Constructors +title: Creating Patterns layout: ../../layouts/MainLayout.astro --- import { MiniRepl } from '../../docs/MiniRepl'; import { JsDoc } from '../../docs/JsDoc'; -# Pattern Constructors +# Creating Patterns The following functions will return a pattern. These are the equivalents used by the Mini Notation: diff --git a/website/src/pages/learn/metadata.mdx b/website/src/pages/learn/metadata.mdx new file mode 100644 index 00000000..27f46921 --- /dev/null +++ b/website/src/pages/learn/metadata.mdx @@ -0,0 +1,94 @@ +--- +title: Music metadata +layout: ../../layouts/MainLayout.astro +--- + +import { MiniRepl } from '../../docs/MiniRepl'; +import { JsDoc } from '../../docs/JsDoc'; + +# Music metadata + +You can optionally add some music metadata in your Strudel code, by using tags in code comments: + +```js +// @title Hey Hoo +// @by Sam Tagada +// @license CC BY-NC-SA +``` + +Like other comments, those are ignored by Strudel, but it can be used by other tools to retrieve some information about the music. + +It is for instance used by the [swatch tool](https://github.com/tidalcycles/strudel/tree/main/my-patterns) to display pattern titles in the [examples page](https://strudel.tidalcycles.org/examples/). + +## Alternative syntax + +You can also use comment blocks: + +```js +/* +@title Hey Hoo +@by Sam Tagada +@license CC BY-NC-SA +*/ +``` + +Or define multiple tags in one line: + +```js +// @title Hey Hoo @by Sam Tagada @license CC BY-NC-SA +``` + +The `title` tag has an alternative syntax using quotes (must be defined at the very begining): + +```js +// "Hey Hoo" @by Sam Tagada +``` + +## Tags list + +Available tags are: + +- `@title`: music title +- `@by`: music author(s), separated by comma, eventually followed with a link in `<>` (ex: `@by John Doe
+
+Welcome to the Strudel documentation pages!
+You've come to the right place if you want to learn how to make music with code.
+
+## What is Strudel?
+
+With Strudel, you can expressively write dynamic music pieces.+It is an official port of the [Tidal Cycles](https://tidalcycles.org/) pattern language to JavaScript.
+You don't need to know JavaScript or Tidal Cycles to make music with Strudel. +This interactive tutorial will guide you through the basics of Strudel.
+The best place to actually make music with Strudel is the [Strudel REPL](https://strudel.tidalcycles.org/) + + + +## What can you do with Strudel? + +- live code music: make music with code in real time +- algorithmic composition: compose music using tidal's unique approach to pattern manipulation +- teaching: focussing on a low barrier of entry, Strudel is a good fit for teaching music and code at the same time. +- integrate into your existing music setup: either via MIDI or OSC, you can use Strudel as a really flexible sequencer + +## Example + +Here is an example of how strudel can sound: + +
@@ -355,7 +364,8 @@ const fontFamilyOptions = {
};
function SettingsTab({ scheduler }) {
- const { theme, keybindings, fontSize, fontFamily } = useSettings();
+ const { theme, keybindings, isLineNumbersDisplayed, isAutoCompletionEnabled, fontSize, fontFamily } = useSettings();
+
return (
- settingsMap.setKey('keybindings', keybindings)}
- items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
- >
-
+
{/*
@@ -397,13 +407,25 @@ function SettingsTab({ scheduler }) {
/>
-
+
+ settingsMap.setKey('keybindings', keybindings)}
+ items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
+ >
+
+ settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)}
+ value={isLineNumbersDisplayed}
+ />
+ settingsMap.setKey('isAutoCompletionEnabled', cbEvent.target.checked)}
+ value={isAutoCompletionEnabled}
+ />
+