Merge branch 'main' into patterns-tab
This commit is contained in:
Felix Roos
commit
80601451b6
51 changed files with 2824 additions and 1253 deletions
|
|
@ -56,7 +56,7 @@ All commands are run from the root of the project, from a terminal:
|
|||
| Command | Action |
|
||||
| :--------------------- | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ export default defineConfig({
|
|||
mdx(options),
|
||||
tailwind(),
|
||||
AstroPWA({
|
||||
experimental: { directoryAndTrailingSlashHandler: true },
|
||||
registerType: 'autoUpdate',
|
||||
injectRegister: 'auto',
|
||||
workbox: {
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@algolia/client-search": "^4.17.0",
|
||||
"@astrojs/mdx": "^0.19.0",
|
||||
"@astrojs/react": "^2.1.1",
|
||||
"@astrojs/tailwind": "^3.1.1",
|
||||
"@astrojs/mdx": "^1.1.3",
|
||||
"@astrojs/react": "^3.0.4",
|
||||
"@astrojs/tailwind": "^5.0.2",
|
||||
"@docsearch/css": "^3.3.4",
|
||||
"@docsearch/react": "^3.3.4",
|
||||
"@headlessui/react": "^1.7.14",
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
"@types/react": "^18.2.0",
|
||||
"@types/react-dom": "^18.2.1",
|
||||
"@uiw/codemirror-themes-all": "^4.19.16",
|
||||
"astro": "^2.3.2",
|
||||
"astro": "^3.4.2",
|
||||
"canvas": "^2.11.2",
|
||||
"claviature": "^0.1.0",
|
||||
"fraction.js": "^4.2.0",
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
"tailwindcss": "^3.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vite-pwa/astro": "file:vite-pwa-astro-0.1.3.tgz",
|
||||
"@vite-pwa/astro": "^0.1.4",
|
||||
"html-escaper": "^3.0.3",
|
||||
"vite-plugin-pwa": "^0.16.5",
|
||||
"workbox-window": "^7.0.0"
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
.cm-activeLine,
|
||||
.cm-activeLineGutter {
|
||||
.mini-repl .cm-activeLine,
|
||||
.mini-repl .cm-activeLineGutter {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.cm-theme {
|
||||
.mini-repl .cm-theme {
|
||||
background-color: var(--background);
|
||||
border: 1px solid var(--lineHighlight);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.cm-scroller {
|
||||
.mini-repl .cm-scroller {
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
.cm-gutters {
|
||||
.mini-repl .cm-gutters {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.cm-cursorLayer {
|
||||
.mini-repl .cm-cursorLayer {
|
||||
animation-name: inherit !important;
|
||||
}
|
||||
|
||||
.cm-cursor {
|
||||
.mini-repl .cm-cursor {
|
||||
border-left: 2px solid currentcolor !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export function MiniRepl({
|
|||
claviatureLabels,
|
||||
}) {
|
||||
const [Repl, setRepl] = useState();
|
||||
const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed } = useSettings();
|
||||
const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed, isActiveLineHighlighted } = useSettings();
|
||||
const [activeNotes, setActiveNotes] = useState([]);
|
||||
useEffect(() => {
|
||||
// we have to load this package on the client
|
||||
|
|
@ -51,7 +51,7 @@ export function MiniRepl({
|
|||
.catch((err) => console.error(err));
|
||||
}, []);
|
||||
return Repl ? (
|
||||
<div className="mb-4">
|
||||
<div className="mb-4 mini-repl">
|
||||
<Repl
|
||||
tune={tune}
|
||||
hideOutsideView={true}
|
||||
|
|
@ -66,6 +66,7 @@ export function MiniRepl({
|
|||
fontFamily={fontFamily}
|
||||
fontSize={fontSize}
|
||||
isLineNumbersDisplayed={isLineNumbersDisplayed}
|
||||
isActiveLineHighlighted={isActiveLineHighlighted}
|
||||
onPaint={
|
||||
claviature
|
||||
? (ctx, time, haps, drawTime) => {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import Box from '@components/Box.astro';
|
|||
|
||||
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 🚪
|
||||
- Ändere `lpf` in 200. Hörst du, wie der Bass dumpfer klingt? Es klingt so, als würde die Musik hinter einer geschlossenen Tür spielen 🚪
|
||||
- Lass uns nun die Tür öffnen: Ändere `lpf` in 5000. Der Klang wird dadurch viel heller und schärfer ✨🪩
|
||||
|
||||
</Box>
|
||||
|
|
@ -42,9 +42,9 @@ lpf = **l**ow **p**ass **f**ilter
|
|||
<Box>
|
||||
|
||||
- Füg noch mehr `lpf` Werte hinzu
|
||||
- Das pattern in `lpf` ändert nicht den Rhythmus der Bassline
|
||||
- Das Pattern in `lpf` ändert nicht den Rhythmus der Basslinie
|
||||
|
||||
Später sehen wir wie man mit Wellenformen Dinge automatisieren kann.
|
||||
Später sehen wir, wie man mit Wellenformen Dinge automatisieren kann.
|
||||
|
||||
</Box>
|
||||
|
||||
|
|
@ -73,7 +73,7 @@ Später sehen wir wie man mit Wellenformen Dinge automatisieren kann.
|
|||
|
||||
Bei Rhythmen ist die Dynamik (= Veränderungen der Lautstärke) sehr wichtig.
|
||||
|
||||
- Entferne `.gain(...)` und achte darauf wie es viel flacher klingt.
|
||||
- Entferne `.gain(...)` und achte darauf, wie es viel flacher klingt.
|
||||
- Mach es rückgängig (strg+z dann strg+enter)
|
||||
|
||||
</Box>
|
||||
|
|
@ -99,13 +99,13 @@ Lass uns die obigen Beispiele kombinieren:
|
|||
|
||||
<Box>
|
||||
|
||||
Versuche die einzelnen Teile innerhalb `stack` zu erkennen, schau dir an wie die Kommas gesetzt sind.
|
||||
Versuche die einzelnen Teile innerhalb von `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
|
||||
Die 3 Teile (Drums, Bass, Akkorde) sind genau wie vorher, nur in einem `stack`, getrennt durch Kommas.
|
||||
|
||||
</Box>
|
||||
|
||||
**Den Sound formen mit ADSR Hüllkurve**
|
||||
**Den Sound formen mit ADSR-Hüllkurve**
|
||||
|
||||
<MiniRepl
|
||||
hideHeader
|
||||
|
|
@ -120,14 +120,14 @@ Die 3 Teile (Drums, Bass, Akkorde) sind genau wie vorher, nur in einem `stack`,
|
|||
|
||||
<Box>
|
||||
|
||||
Versuche herauszufinden was die Zahlen machen. Probier folgendes:
|
||||
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?
|
||||
Kannst du erraten, was die einzelnen Werte machen?
|
||||
|
||||
</Box>
|
||||
|
||||
|
|
@ -142,7 +142,7 @@ Kannst du erraten was die einzelnen Werte machen?
|
|||
|
||||
</QA>
|
||||
|
||||
**adsr Kurznotation**
|
||||
**adsr-Kurznotation**
|
||||
|
||||
<MiniRepl
|
||||
hideHeader
|
||||
|
|
@ -169,9 +169,9 @@ Kannst du erraten was die einzelnen Werte machen?
|
|||
|
||||
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:.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?
|
||||
Was passiert, wenn du `.delay(".8:.06:.8")` schreibst? Kannst du erraten, was die dritte Zahl macht?
|
||||
|
||||
</Box>
|
||||
|
||||
|
|
@ -181,7 +181,7 @@ Was passiert wenn du `.delay(".8:.06:.8")` schreibst? Kannst du erraten was die
|
|||
|
||||
- a: Lautstärke des Delays
|
||||
- b: Verzögerungszeit
|
||||
- c: Feedback (je kleiner desto schneller verschwindet das Delay)
|
||||
- c: Feedback (je kleiner, desto schneller verschwindet das Delay)
|
||||
|
||||
</QA>
|
||||
|
||||
|
|
@ -203,7 +203,7 @@ Füg auch ein Delay hinzu!
|
|||
|
||||
</Box>
|
||||
|
||||
**kleiner dub tune**
|
||||
**kleiner Dub-Tune**
|
||||
|
||||
<MiniRepl
|
||||
hideHeader
|
||||
|
|
@ -238,7 +238,7 @@ Für echten Dub fehlt noch der Bass:
|
|||
|
||||
<Box>
|
||||
|
||||
Füg `.hush()` ans ende eines Patterns im stack...
|
||||
Füg `.hush()` ans Ende eines Patterns im stack...
|
||||
|
||||
</Box>
|
||||
|
||||
|
|
@ -258,25 +258,25 @@ Füg `.hush()` ans ende eines Patterns im stack...
|
|||
|
||||
**fast and slow = schnell und langsam**
|
||||
|
||||
Mit `fast` und `slow` kann man das tempo eines patterns außerhalb der Mini-Notation ändern:
|
||||
Mit `fast` und `slow` kann man das Tempo eines Patterns außerhalb der Mini-Notation ändern:
|
||||
|
||||
<MiniRepl hideHeader client:visible tune={`sound("bd*2,~ rim").slow(2)`} />
|
||||
|
||||
<Box>
|
||||
|
||||
Ändere den `slow` Wert. Tausche `slow` durch `fast`.
|
||||
Ändere den `slow`-Wert. Ersetze `slow` durch `fast`.
|
||||
|
||||
Was passiert wenn du den Wert automatisierst? z.b. `.fast("<1 [2 4]>")` ?
|
||||
Was passiert, wenn du den Wert automatisierst? z.b. `.fast("<1 [2 4]>")` ?
|
||||
|
||||
</Box>
|
||||
|
||||
Übrigens, innerhalb der Mini-Notation, `fast` ist `*` und `slow` ist `/`.
|
||||
Übrigens, innerhalb der Mini-Notation: `fast` ist `*` und `slow` ist `/`.
|
||||
|
||||
<MiniRepl hideHeader client:visible tune={`sound("[bd*2,~ rim]*<1 [2 4]>")`} />
|
||||
|
||||
## Automation mit Signalen
|
||||
|
||||
Anstatt Werte schrittweise zu automatisieren können wir auch sogenannte Signale benutzen:
|
||||
Anstatt Werte schrittweise zu automatisieren, können wir auch sogenannte Signale benutzen:
|
||||
|
||||
<MiniRepl hideHeader client:visible tune={`sound("hh*16").gain(sine)`} punchcard punchcardLabels={false} />
|
||||
|
||||
|
|
@ -296,7 +296,7 @@ Signale bewegen sich standardmäßig zwischen 0 und 1. Wir können das mit `rang
|
|||
|
||||
<MiniRepl hideHeader client:visible tune={`sound("hh*8").lpf(saw.range(500, 2000))`} />
|
||||
|
||||
`range` ist nützlich wenn wir Funktionen mit einem anderen Wertebereich als 0 und 1 automatisieren wollen (z.b. lpf)
|
||||
`range` ist nützlich wenn wir Funktionen mit einem anderen Wertebereich als 0 und 1 automatisieren wollen (z.b. `lpf`)
|
||||
|
||||
<Box>
|
||||
|
||||
|
|
@ -322,7 +322,7 @@ Die ganze Automation braucht nun 8 cycle bis sie sich wiederholt.
|
|||
|
||||
## Rückblick
|
||||
|
||||
| name | example |
|
||||
| Name | Beispiel |
|
||||
| ----- | -------------------------------------------------------------------------------------------------- |
|
||||
| lpf | <MiniRepl hideHeader client:visible tune={`note("c2 c3").s("sawtooth").lpf("<400 2000>")`} /> |
|
||||
| vowel | <MiniRepl hideHeader client:visible tune={`note("c3 eb3 g3").s("sawtooth").vowel("<a e i o>")`} /> |
|
||||
|
|
@ -333,4 +333,4 @@ Die ganze Automation braucht nun 8 cycle bis sie sich wiederholt.
|
|||
| speed | <MiniRepl hideHeader client:visible tune={`s("bd rim").speed("<1 2 -1 -2>")`} /> |
|
||||
| range | <MiniRepl hideHeader client:visible tune={`s("hh*16").lpf(saw.range(200,4000))`} /> |
|
||||
|
||||
Lass uns nun die für Tidal typischen [Pattern Effekte anschauen](/de/workshop/pattern-effects).
|
||||
Lass uns nun die für Tidal typischen [Pattern-Effekte anschauen](/de/workshop/pattern-effects).
|
||||
|
|
|
|||
|
|
@ -277,7 +277,7 @@ Das haben wir bisher gelernt:
|
|||
| Schneller | \* | <MiniRepl hideHeader client:visible tune={`sound("bd sd*2 cp*3")`} /> |
|
||||
| Parallel | , | <MiniRepl hideHeader client:visible tune={`sound("bd*2, hh*2 [hh oh]")`} /> |
|
||||
|
||||
Die mit Apostrophen umgebene Mini-Notation benutzt man normalerweise in eine sogenannten Funktion.
|
||||
Die mit Apostrophen umgebene Mini-Notation benutzt man normalerweise in einer sogenannten Funktion.
|
||||
Die folgenden Funktionen haben wir bereits gesehen:
|
||||
|
||||
| Name | Description | Example |
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Pattern Effekte
|
||||
title: Pattern-Effekte
|
||||
layout: ../../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
|
|
@ -7,11 +7,11 @@ import { MiniRepl } from '@src/docs/MiniRepl';
|
|||
import Box from '@components/Box.astro';
|
||||
import QA from '@components/QA';
|
||||
|
||||
# Pattern Effekte
|
||||
# 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.
|
||||
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.
|
||||
In diesem Kapitel beschäftigen wir uns mit Funktionen die weniger herkömmlich oder auch einzigartig sind.
|
||||
|
||||
**rev = rückwärts abspielen**
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ In diesem Kapitel beschäftigen wir uns mit Funktionen die weniger herkömmlich
|
|||
|
||||
<MiniRepl hideHeader client:visible tune={`n("0 1 [4 3] 2").sound("jazz").jux(rev)`} />
|
||||
|
||||
So würde man das ohne jux schreiben:
|
||||
So würde man das ohne `jux` schreiben:
|
||||
|
||||
<MiniRepl
|
||||
hideHeader
|
||||
|
|
@ -32,7 +32,7 @@ So würde man das ohne jux schreiben:
|
|||
)`}
|
||||
/>
|
||||
|
||||
Lass uns visualisieren was hier passiert:
|
||||
Lass uns visualisieren, was hier passiert:
|
||||
|
||||
<MiniRepl
|
||||
hideHeader
|
||||
|
|
@ -54,7 +54,7 @@ Schreibe `//` vor eine der beiden Zeilen im `stack`!
|
|||
|
||||
<MiniRepl hideHeader client:visible tune={`note("c2, eb3 g3 [bb3 c4]").sound("piano").slow("1,2,3")`} />
|
||||
|
||||
Das hat den gleichen Effekt wie:
|
||||
Das hat den gleichen Effekt, wie:
|
||||
|
||||
<MiniRepl
|
||||
hideHeader
|
||||
|
|
@ -161,11 +161,11 @@ Probier `ply` mit einem pattern zu automatisieren, z.b. `"<1 2 1 3>"`
|
|||
|
||||
<Box>
|
||||
|
||||
In der notation `x=>x.`, das `x` ist das Pattern das wir bearbeiten.
|
||||
In der Notation `x=>x.`, ist `x` das Pattern, das wir bearbeiten.
|
||||
|
||||
</Box>
|
||||
|
||||
`off` ist auch nützlich für sounds:
|
||||
`off` ist auch nützlich für Sounds:
|
||||
|
||||
<MiniRepl
|
||||
hideHeader
|
||||
|
|
@ -174,10 +174,10 @@ In der notation `x=>x.`, das `x` ist das Pattern das wir bearbeiten.
|
|||
.off(1/8, x=>x.speed(1.5).gain(.25))`}
|
||||
/>
|
||||
|
||||
| name | description | example |
|
||||
| Name | Beschreibung | Beispiel |
|
||||
| ---- | --------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| rev | rückwärts | <MiniRepl hideHeader client:visible tune={`n("0 2 4 6").scale("C:minor").rev()`} /> |
|
||||
| jux | ein stereo-kanal modifizieren | <MiniRepl hideHeader client:visible tune={`n("0 2 4 6").scale("C:minor").jux(rev)`} /> |
|
||||
| add | addiert zahlen oder noten | <MiniRepl hideHeader client:visible tune={`n("0 2 4 6".add("<0 1 2 1>")).scale("C:minor")`} /> |
|
||||
| ply | multipliziert jedes element x mal | <MiniRepl hideHeader client:visible tune={`s("bd sd").ply("<1 2 3>")`} /> |
|
||||
| off | verzögert eine modifizierte kopie | <MiniRepl hideHeader client:visible tune={`s("bd sd, hh*4").off(1/8, x=>x.speed(2))`} /> |
|
||||
| jux | einen Stereo-Kanal modifizieren | <MiniRepl hideHeader client:visible tune={`n("0 2 4 6").scale("C:minor").jux(rev)`} /> |
|
||||
| add | addiert Zahlen oder Noten | <MiniRepl hideHeader client:visible tune={`n("0 2 4 6".add("<0 1 2 1>")).scale("C:minor")`} /> |
|
||||
| ply | multipliziert jedes Element x mal | <MiniRepl hideHeader client:visible tune={`s("bd sd").ply("<1 2 3>")`} /> |
|
||||
| off | verzögert eine modifizierte Kopie | <MiniRepl hideHeader client:visible tune={`s("bd sd, hh*4").off(1/8, x=>x.speed(2))`} /> |
|
||||
|
|
|
|||
|
|
@ -7,19 +7,19 @@ import { MiniRepl } from '../../../docs/MiniRepl';
|
|||
|
||||
# Workshop Rückblick
|
||||
|
||||
Diese Seite ist eine Auflistung aller im Workshop enthaltenen Funktionen.
|
||||
Diese Seite ist eine Auflistung aller im Workshop vorgestellten Funktionen.
|
||||
|
||||
## Mini Notation
|
||||
|
||||
| Concept | Syntax | Example |
|
||||
| Konzept | Syntax | Beispiel |
|
||||
| --------------------- | -------- | -------------------------------------------------------------------------------- |
|
||||
| Sequence | space | <MiniRepl hideHeader client:visible tune={`sound("bd bd sn hh")`} /> |
|
||||
| Sample Nummer | :x | <MiniRepl hideHeader client:visible tune={`sound("hh:0 hh:1 hh:2 hh:3")`} /> |
|
||||
| Sequenz | space | <MiniRepl hideHeader client:visible tune={`sound("bd bd sn hh")`} /> |
|
||||
| Sample-Nummer | :x | <MiniRepl hideHeader client:visible tune={`sound("hh:0 hh:1 hh:2 hh:3")`} /> |
|
||||
| Pausen | ~ | <MiniRepl hideHeader client:visible tune={`sound("metal ~ jazz jazz:1")`} /> |
|
||||
| Unter-Sequences | \[\] | <MiniRepl hideHeader client:visible tune={`sound("bd wind [metal jazz] hh")`} /> |
|
||||
| Unter-Unter-Sequences | \[\[\]\] | <MiniRepl hideHeader client:visible tune={`sound("bd [metal [jazz sn]]")`} /> |
|
||||
| Unter-Sequenzen | \[\] | <MiniRepl hideHeader client:visible tune={`sound("bd wind [metal jazz] hh")`} /> |
|
||||
| Unter-Unter-Sequenzen | \[\[\]\] | <MiniRepl hideHeader client:visible tune={`sound("bd [metal [jazz sn]]")`} /> |
|
||||
| Schneller | \* | <MiniRepl hideHeader client:visible tune={`sound("bd sn*2 cp*3")`} /> |
|
||||
| Slow down | \/ | <MiniRepl hideHeader client:visible tune={`note("[c a f e]/2")`} /> |
|
||||
| Verlangsamen | \/ | <MiniRepl hideHeader client:visible tune={`note("[c a f e]/2")`} /> |
|
||||
| Parallel | , | <MiniRepl hideHeader client:visible tune={`sound("bd*2, hh*2 [hh oh]")`} /> |
|
||||
| Alternieren | \<\> | <MiniRepl hideHeader client:visible tune={`note("c <e g>")`} /> |
|
||||
| Verlängern | @ | <MiniRepl hideHeader client:visible tune={`note("c@3 e")`} /> |
|
||||
|
|
@ -27,23 +27,23 @@ Diese Seite ist eine Auflistung aller im Workshop enthaltenen Funktionen.
|
|||
|
||||
## Sounds
|
||||
|
||||
| Name | Description | Example |
|
||||
| Name | Beschreibung | Beispiel |
|
||||
| ----- | -------------------------- | ---------------------------------------------------------------------------------- |
|
||||
| sound | spielt den sound mit namen | <MiniRepl hideHeader client:visible tune={`sound("bd sd")`} /> |
|
||||
| bank | wählt die soundbank | <MiniRepl hideHeader client:visible tune={`sound("bd sd").bank("RolandTR909")`} /> |
|
||||
| n | wählt sample mit nummer | <MiniRepl hideHeader client:visible tune={`n("0 1 4 2").sound("jazz")`} /> |
|
||||
| sound | spielt den Sound mit Namen | <MiniRepl hideHeader client:visible tune={`sound("bd sd")`} /> |
|
||||
| bank | wählt die Soundbank | <MiniRepl hideHeader client:visible tune={`sound("bd sd").bank("RolandTR909")`} /> |
|
||||
| n | wählt Sample mit Nummer | <MiniRepl hideHeader client:visible tune={`n("0 1 4 2").sound("jazz")`} /> |
|
||||
|
||||
## Notes
|
||||
## Noten
|
||||
|
||||
| Name | Description | Example |
|
||||
| Name | Beschreibung | Beispiel |
|
||||
| --------- | ---------------------------------- | -------------------------------------------------------------------------------------------- |
|
||||
| note | wählt note per zahl oder buchstabe | <MiniRepl hideHeader client:visible tune={`note("b g e c").sound("piano")`} /> |
|
||||
| n + scale | wählt note n in skala | <MiniRepl hideHeader client:visible tune={`n("6 4 2 0").scale("C:minor").sound("piano")`} /> |
|
||||
| stack | spielt mehrere patterns parallel | <MiniRepl hideHeader client:visible tune={`stack(s("bd sd"),note("c eb g"))`} /> |
|
||||
| note | wählt Note per Zahl oder Buchstabe | <MiniRepl hideHeader client:visible tune={`note("b g e c").sound("piano")`} /> |
|
||||
| n + scale | wählt Note n in Skala | <MiniRepl hideHeader client:visible tune={`n("6 4 2 0").scale("C:minor").sound("piano")`} /> |
|
||||
| stack | spielt mehrere Patterns parallel | <MiniRepl hideHeader client:visible tune={`stack(s("bd sd"),note("c eb g"))`} /> |
|
||||
|
||||
## Audio Effekte
|
||||
## Audio-Effekte
|
||||
|
||||
| name | example |
|
||||
| Name | Beispiele |
|
||||
| ----- | -------------------------------------------------------------------------------------------------- |
|
||||
| lpf | <MiniRepl hideHeader client:visible tune={`note("c2 c3").s("sawtooth").lpf("<400 2000>")`} /> |
|
||||
| vowel | <MiniRepl hideHeader client:visible tune={`note("c3 eb3 g3").s("sawtooth").vowel("<a e i o>")`} /> |
|
||||
|
|
@ -54,15 +54,15 @@ Diese Seite ist eine Auflistung aller im Workshop enthaltenen Funktionen.
|
|||
| speed | <MiniRepl hideHeader client:visible tune={`s("bd rim").speed("<1 2 -1 -2>")`} /> |
|
||||
| range | <MiniRepl hideHeader client:visible tune={`s("hh*16").lpf(saw.range(200,4000))`} /> |
|
||||
|
||||
## Pattern Effects
|
||||
## Pattern-Effekte
|
||||
|
||||
| name | description | example |
|
||||
| Name | Beschreibung | Beispiel |
|
||||
| ---- | --------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| cpm | tempo in cycles pro minute | <MiniRepl hideHeader client:visible tune={`sound("bd sd").cpm(90)`} /> |
|
||||
| cpm | Tempo in Cycles pro Minute | <MiniRepl hideHeader client:visible tune={`sound("bd sd").cpm(90)`} /> |
|
||||
| fast | schneller | <MiniRepl hideHeader client:visible tune={`sound("bd sd").fast(2)`} /> |
|
||||
| slow | langsamer | <MiniRepl hideHeader client:visible tune={`sound("bd sd").slow(2)`} /> |
|
||||
| rev | rückwärts | <MiniRepl hideHeader client:visible tune={`n("0 2 4 6").scale("C:minor").rev()`} /> |
|
||||
| jux | ein stereo-kanal modifizieren | <MiniRepl hideHeader client:visible tune={`n("0 2 4 6").scale("C:minor").jux(rev)`} /> |
|
||||
| add | addiert zahlen oder noten | <MiniRepl hideHeader client:visible tune={`n("0 2 4 6".add("<0 1 2 1>")).scale("C:minor")`} /> |
|
||||
| ply | jedes element schneller machen | <MiniRepl hideHeader client:visible tune={`s("bd sd").ply("<1 2 3>")`} /> |
|
||||
| off | verzögert eine modifizierte kopie | <MiniRepl hideHeader client:visible tune={`s("bd sd, hh*4").off(1/8, x=>x.speed(2))`} /> |
|
||||
| jux | einen Stereo-Kanal modifizieren | <MiniRepl hideHeader client:visible tune={`n("0 2 4 6").scale("C:minor").jux(rev)`} /> |
|
||||
| add | addiert Zahlen oder Noten | <MiniRepl hideHeader client:visible tune={`n("0 2 4 6".add("<0 1 2 1>")).scale("C:minor")`} /> |
|
||||
| ply | jedes Element schneller machen | <MiniRepl hideHeader client:visible tune={`s("bd sd").ply("<1 2 3>")`} /> |
|
||||
| off | verzögert eine modifizierte Kopie | <MiniRepl hideHeader client:visible tune={`s("bd sd, hh*4").off(1/8, x=>x.speed(2))`} /> |
|
||||
|
|
|
|||
|
|
@ -60,4 +60,12 @@ import { JsDoc } from '../../docs/JsDoc';
|
|||
|
||||
<JsDoc client:idle name="invert" h={0} />
|
||||
|
||||
## pick
|
||||
|
||||
<JsDoc client:idle name="pick" h={0} />
|
||||
|
||||
## squeeze
|
||||
|
||||
<JsDoc client:idle name="squeeze" h={0} />
|
||||
|
||||
After Conditional Modifiers, let's see what [Accumulation Modifiers](/learn/accumulation) have to offer.
|
||||
|
|
|
|||
|
|
@ -82,6 +82,10 @@ Strudel uses ADSR envelopes, which are probably the most common way to describe
|
|||
|
||||
<JsDoc client:idle name="release" h={0} />
|
||||
|
||||
## adsr
|
||||
|
||||
<JsDoc client:idle name="adsr" h={0} />
|
||||
|
||||
# Filter Envelope
|
||||
|
||||
Each filter can receive an additional filter envelope controlling the cutoff value dynamically. It uses an ADSR envelope similar to the one used for amplitude. There is an additional parameter to control the depth of the filter modulation: `lpenv`|`hpenv`|`bpenv`. This allows you to play subtle or huge filter modulations just the same by only increasing or decreasing the depth.
|
||||
|
|
@ -152,6 +156,10 @@ There is one filter envelope for each filter type and thus one set of envelope f
|
|||
|
||||
<JsDoc client:idle name="postgain" h={0} />
|
||||
|
||||
## xfade
|
||||
|
||||
<JsDoc client:idle name="xfade" h={0} />
|
||||
|
||||
# Panning
|
||||
|
||||
## jux
|
||||
|
|
@ -232,3 +240,21 @@ global effects use the same chain for all events of the same orbit:
|
|||
<JsDoc client:idle name="iresponse" h={0} />
|
||||
|
||||
Next, we'll look at strudel's support for [Csound](/learn/csound).
|
||||
|
||||
## Phaser
|
||||
|
||||
### phaser
|
||||
|
||||
<JsDoc client:idle name="phaser" h={0} />
|
||||
|
||||
### phaserdepth
|
||||
|
||||
<JsDoc client:idle name="phaserdepth" h={0} />
|
||||
|
||||
### phasercenter
|
||||
|
||||
<JsDoc client:idle name="phasercenter" h={0} />
|
||||
|
||||
### phasersweep
|
||||
|
||||
<JsDoc client:idle name="phasersweep" h={0} />
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ Just like [Tidal Cycles](https://tidalcycles.org/), Strudel uses a so called "Mi
|
|||
## 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).
|
||||
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](/workshop/first-sounds).
|
||||
After that, you can come back here if you want to understand every little detail.
|
||||
|
||||
## Example
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ 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.
|
||||
Strudel's sampler supports [a subset](/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
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ The docs page is built ontop of astro's [docs site](https://github.com/withastro
|
|||
|
||||
## Adding a new Docs Page
|
||||
|
||||
1. add a `.mdx` file in a path under `website/src/pages/`, e.g. [website/src/pages/learn/code.mdx](https://raw.githubusercontent.com/tidalcycles/strudel/main/website/src/pages/learn/code.mdx) will be available under https://strudel.cc/learn/code (or locally under `http://localhost:3000/learn/code`)
|
||||
1. add a `.mdx` file in a path under `website/src/pages/`, e.g. [website/src/pages/learn/code.mdx](https://raw.githubusercontent.com/tidalcycles/strudel/main/website/src/pages/learn/code.mdx) will be available under https://strudel.cc/learn/code (or locally under `http://localhost:4321/learn/code`)
|
||||
2. make sure to copy the top part of another existing docs page. Adjust the title accordingly
|
||||
3. To add a link to the sidebar, add a new entry to `SIDEBAR` to [`config.ts`](https://github.com/tidalcycles/strudel/blob/main/website/src/config.ts)
|
||||
|
||||
|
|
|
|||
|
|
@ -57,3 +57,7 @@
|
|||
#code .cm-foldGutter {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#code .cm-focused {
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import { settingPatterns } from '../settings.mjs';
|
|||
import { code2hash, hash2code } from './helpers.mjs';
|
||||
import { isTauri } from '../tauri.mjs';
|
||||
import { useWidgets } from '@strudel.cycles/react/src/hooks/useWidgets.mjs';
|
||||
import { writeText } from '@tauri-apps/api/clipboard';
|
||||
|
||||
const { latestCode } = settingsMap.get();
|
||||
|
||||
|
|
@ -124,7 +125,9 @@ export function Repl({ embedded = false }) {
|
|||
fontSize,
|
||||
fontFamily,
|
||||
isLineNumbersDisplayed,
|
||||
isActiveLineHighlighted,
|
||||
isAutoCompletionEnabled,
|
||||
isTooltipEnabled,
|
||||
isLineWrappingEnabled,
|
||||
panelPosition,
|
||||
isZen,
|
||||
|
|
@ -272,7 +275,11 @@ export function Repl({ embedded = false }) {
|
|||
if (!error) {
|
||||
setLastShared(activeCode || code);
|
||||
// copy shareUrl to clipboard
|
||||
await navigator.clipboard.writeText(shareUrl);
|
||||
if (isTauri()) {
|
||||
await writeText(shareUrl);
|
||||
} else {
|
||||
await navigator.clipboard.writeText(shareUrl);
|
||||
}
|
||||
const message = `Link copied to clipboard: ${shareUrl}`;
|
||||
alert(message);
|
||||
// alert(message);
|
||||
|
|
@ -331,7 +338,9 @@ export function Repl({ embedded = false }) {
|
|||
value={code}
|
||||
keybindings={keybindings}
|
||||
isLineNumbersDisplayed={isLineNumbersDisplayed}
|
||||
isActiveLineHighlighted={isActiveLineHighlighted}
|
||||
isAutoCompletionEnabled={isAutoCompletionEnabled}
|
||||
isTooltipEnabled={isTooltipEnabled}
|
||||
isLineWrappingEnabled={isLineWrappingEnabled}
|
||||
fontSize={fontSize}
|
||||
fontFamily={fontFamily}
|
||||
|
|
|
|||
|
|
@ -3,17 +3,31 @@ const visibleFunctions = jsdocJson.docs
|
|||
.filter(({ name, description }) => name && !name.startsWith('_') && !!description)
|
||||
.sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) + */ a.name.localeCompare(b.name));
|
||||
|
||||
const getInnerText = (html) => {
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = html;
|
||||
return div.textContent || div.innerText || '';
|
||||
};
|
||||
|
||||
export function Reference() {
|
||||
return (
|
||||
<div className="flex h-full w-full pt-2 text-foreground overflow-hidden">
|
||||
<div className="w-42 flex-none h-full overflow-y-auto overflow-x-hidden pr-4">
|
||||
{visibleFunctions.map((entry, i) => (
|
||||
<a key={i} className="cursor-pointer block hover:bg-lineHighlight py-1 px-4" href={`#doc-${i}`}>
|
||||
<a
|
||||
key={i}
|
||||
className="cursor-pointer block hover:bg-lineHighlight py-1 px-4"
|
||||
onClick={() => {
|
||||
const el = document.getElementById(`doc-${i}`);
|
||||
const container = document.getElementById('reference-container');
|
||||
container.scrollTo(0, el.offsetTop);
|
||||
}}
|
||||
>
|
||||
{entry.name} {/* <span className="text-gray-600">{entry.meta.filename}</span> */}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="break-normal w-full h-full overflow-auto pl-4 flex relative">
|
||||
<div className="break-normal w-full h-full overflow-auto pl-4 flex relative" id="reference-container">
|
||||
<div className="prose dark:prose-invert max-w-full pr-4">
|
||||
<h2>API Reference</h2>
|
||||
<p>
|
||||
|
|
@ -24,8 +38,14 @@ export function Reference() {
|
|||
<section key={i}>
|
||||
<h3 id={`doc-${i}`}>{entry.name}</h3>
|
||||
{/* <small>{entry.meta.filename}</small> */}
|
||||
|
||||
<p dangerouslySetInnerHTML={{ __html: entry.description }}></p>
|
||||
<ul>
|
||||
{entry.params?.map(({ name, type, description }, i) => (
|
||||
<li key={i}>
|
||||
{name} : {type.names?.join(' | ')} {description ? <> - {getInnerText(description)}</> : ''}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{entry.examples?.map((example, j) => (
|
||||
<pre key={j}>{example}</pre>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -78,7 +78,9 @@ export function SettingsTab() {
|
|||
theme,
|
||||
keybindings,
|
||||
isLineNumbersDisplayed,
|
||||
isActiveLineHighlighted,
|
||||
isAutoCompletionEnabled,
|
||||
isTooltipEnabled,
|
||||
isLineWrappingEnabled,
|
||||
fontSize,
|
||||
fontFamily,
|
||||
|
|
@ -130,7 +132,7 @@ export function SettingsTab() {
|
|||
<ButtonGroup
|
||||
value={keybindings}
|
||||
onChange={(keybindings) => settingsMap.setKey('keybindings', keybindings)}
|
||||
items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }}
|
||||
items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs', vscode: 'VSCode' }}
|
||||
></ButtonGroup>
|
||||
</FormItem>
|
||||
<FormItem label="Panel Position">
|
||||
|
|
@ -146,11 +148,26 @@ export function SettingsTab() {
|
|||
onChange={(cbEvent) => settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)}
|
||||
value={isLineNumbersDisplayed}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Highlight active line"
|
||||
onChange={(cbEvent) => settingsMap.setKey('isActiveLineHighlighted', cbEvent.target.checked)}
|
||||
value={isActiveLineHighlighted}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Highlight active line"
|
||||
onChange={(cbEvent) => settingsMap.setKey('isActiveLineHighlighted', cbEvent.target.checked)}
|
||||
value={isActiveLineHighlighted}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Enable auto-completion"
|
||||
onChange={(cbEvent) => settingsMap.setKey('isAutoCompletionEnabled', cbEvent.target.checked)}
|
||||
value={isAutoCompletionEnabled}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Enable tooltips on Ctrl and hover"
|
||||
onChange={(cbEvent) => settingsMap.setKey('isTooltipEnabled', cbEvent.target.checked)}
|
||||
value={isTooltipEnabled}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Enable line wrapping"
|
||||
onChange={(cbEvent) => settingsMap.setKey('isLineWrappingEnabled', cbEvent.target.checked)}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@ export const defaultSettings = {
|
|||
activeFooter: 'intro',
|
||||
keybindings: 'codemirror',
|
||||
isLineNumbersDisplayed: true,
|
||||
isActiveLineHighlighted: true,
|
||||
isAutoCompletionEnabled: false,
|
||||
isTooltipEnabled: false,
|
||||
isLineWrappingEnabled: false,
|
||||
theme: 'strudelTheme',
|
||||
fontFamily: 'monospace',
|
||||
|
|
@ -28,7 +30,9 @@ export function useSettings() {
|
|||
...state,
|
||||
isZen: [true, 'true'].includes(state.isZen) ? true : false,
|
||||
isLineNumbersDisplayed: [true, 'true'].includes(state.isLineNumbersDisplayed) ? true : false,
|
||||
isActiveLineHighlighted: [true, 'true'].includes(state.isActiveLineHighlighted) ? true : false,
|
||||
isAutoCompletionEnabled: [true, 'true'].includes(state.isAutoCompletionEnabled) ? true : false,
|
||||
isTooltipEnabled: [true, 'true'].includes(state.isTooltipEnabled) ? true : false,
|
||||
isLineWrappingEnabled: [true, 'true'].includes(state.isLineWrappingEnabled) ? true : false,
|
||||
fontSize: Number(state.fontSize),
|
||||
panelPosition: state.activeFooter !== '' ? state.panelPosition : 'bottom',
|
||||
|
|
|
|||
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue