diff --git a/website/public/icons/strudel_icon.png b/website/public/icons/strudel_icon.png new file mode 100644 index 00000000..ec9ad8e1 Binary files /dev/null and b/website/public/icons/strudel_icon.png differ diff --git a/website/src/config.ts b/website/src/config.ts index e824f35b..79463911 100644 --- a/website/src/config.ts +++ b/website/src/config.ts @@ -54,29 +54,31 @@ export const SIDEBAR: Sidebar = { }, en: { Workshop: [ - { text: 'Intro', link: 'workshop/intro' }, + { text: 'Getting Started', link: 'workshop/getting-started' }, { text: 'First Sounds', link: 'workshop/first-sounds' }, { text: 'First Notes', link: 'workshop/first-notes' }, { text: 'First Effects', link: 'workshop/first-effects' }, { text: 'Pattern Effects', link: 'workshop/pattern-effects' }, { text: 'Recap', link: 'workshop/recap' }, ], - Tutorial: [ - { text: 'Getting Started', link: 'learn/getting-started' }, - { text: 'Notes', link: 'learn/notes' }, - { text: 'Sounds', link: 'learn/sounds' }, - { text: 'Coding syntax', link: 'learn/code' }, - { text: 'Mini-Notation', link: 'learn/mini-notation' }, - ], 'Making Sound': [ { text: 'Samples', link: 'learn/samples' }, { text: 'Synths', link: 'learn/synths' }, { text: 'Audio Effects', link: 'learn/effects' }, + { text: 'MIDI & OSC', link: 'learn/input-output' }, + ], + More: [ + { text: 'Mini-Notation', link: 'learn/mini-notation' }, + { text: 'Coding syntax', link: 'learn/code' }, + { text: 'Offline', link: 'learn/pwa' }, + { text: 'Patterns', link: 'technical-manual/patterns' }, + { text: 'Pattern Alignment', link: 'technical-manual/alignment' }, + { text: 'Strudel vs Tidal', link: 'learn/strudel-vs-tidal' }, { text: 'CSound', link: 'learn/csound' }, ], 'Pattern Functions': [ { text: 'Introduction', link: 'functions/intro' }, - { text: 'Pattern Constructors', link: 'learn/factories' }, + { text: 'Creating Patterns', link: 'learn/factories' }, { text: 'Time Modifiers', link: 'learn/time-modifiers' }, { text: 'Control Parameters', link: 'functions/value-modifiers' }, { text: 'Signals', link: 'learn/signals' }, @@ -84,13 +86,6 @@ export const SIDEBAR: Sidebar = { { text: 'Accumulation', link: 'learn/accumulation' }, { text: 'Tonal Modifiers', link: 'learn/tonal' }, ], - More: [ - { text: 'MIDI & OSC', link: 'learn/input-output' }, - { text: 'Offline', link: 'learn/pwa' }, - { text: 'Patterns', link: 'technical-manual/patterns' }, - { text: 'Pattern Alignment', link: 'technical-manual/alignment' }, - { text: 'Strudel vs Tidal', link: 'learn/strudel-vs-tidal' }, - ], Development: [ { text: 'REPL', link: 'technical-manual/repl' }, { text: 'Sounds', link: 'technical-manual/sounds' }, diff --git a/website/src/pages/de/workshop/first-sounds.mdx b/website/src/pages/de/workshop/first-sounds.mdx index 6c3fb6fd..8207765c 100644 --- a/website/src/pages/de/workshop/first-sounds.mdx +++ b/website/src/pages/de/workshop/first-sounds.mdx @@ -9,7 +9,7 @@ import QA from '@components/QA'; ## Erste Sounds -{/* Let's start by making some noise: */} +Dies ist das erste Kapitel im Strudel Workshop, schön dich an Bord zu haben! Los geht's mit ein paar Sounds: diff --git a/website/src/pages/de/workshop/langebank.mdx b/website/src/pages/de/workshop/langebank.mdx deleted file mode 100644 index 7a1ca697..00000000 --- a/website/src/pages/de/workshop/langebank.mdx +++ /dev/null @@ -1,154 +0,0 @@ - - -1. press play button to start -2. change `house` to `casio` -3. press refresh button to update -4. press stop button to stop - - - -**Change tempo** - - - -adding your own samples - - - -").slow(3)`} - punchcard -/> - -n(run(8)).sound("east") - -Shorter variant: - - - -polyrythms & polymeters - --- This can make for flexible time signatures: - -d1 $ sound "[bd bd sn:5] [bd sn:3]" - --- You can put subsequences inside subsequences: -d1 $ sound "[[bd bd] bd sn:5] [bd sn:3]" - --- Keep going.. -d1 $ sound "[[bd [bd bd bd bd]] bd sn:5] [bd sn:3]" - --- \* Polymetric / polyrhythmic sequences - --- Play two subsequences at once by separating with a comma: - -d1 $ sound "[voodoo voodoo:3, arpy arpy:4 arpy:2]" - --- compare how [,] and {,} work: - -d1 $ sound "[voodoo voodoo:3, arpy arpy:4 arpy:2]" - -d1 $ sound "{voodoo voodoo:3, arpy arpy:4 arpy:2}" - -d1 $ sound "[drum bd hh bd, can can:2 can:3 can:4 can:2]" - -d1 $ sound "{drum bd hh bd, can can:2 can:3 can:4 can:2}" - -d1 $ sound "[bd sn, can:2 can:3 can:1, arpy arpy:1 arpy:2 arpy:3 arpy:5]" - -d1 $ sound "{bd sn, can:2 can:3 can:1, arpy arpy:1 arpy:2 arpy:3 arpy:5}" - -**Play X per cycle with \{ \}** - - - - - -Try different numbers after `%` - -`{ ... }%1` is the same as `< ... >` - - - -## Bracket Recap - -- `[]` squeezes contents to 1 cycle -- `<>` plays one item per cycle -- `{}%x` plays x items per cycle - -/2")) -.sound("gm_synth_bass_1")`} -/> - -vertical - - -< 4 4 4 3> -<[2,7] [2,6] [1,6] [1,6]> -< 4 4 4 3> ->*2\`) -.scale("/4") -.sound("piano")`} -/> - -horizontal - -*2\`) -.scale("/4") -.sound("piano")`} -/> diff --git a/website/src/pages/learn/code.mdx b/website/src/pages/learn/code.mdx index 678d4ccc..6ac1d389 100644 --- a/website/src/pages/learn/code.mdx +++ b/website/src/pages/learn/code.mdx @@ -6,31 +6,31 @@ layout: ../../layouts/MainLayout.astro import { MiniRepl } from '../../docs/MiniRepl'; import { JsDoc } from '../../docs/JsDoc'; -# Strudel Code +# Coding Syntax -Now that we have played some notes using different sounds, let's take a step back and look how we actually achieved this using _code_. +Let's take a step back and understand how the syntax in Strudel works. -Let's look at this simple example again. What do we notice? +Take a look at this simple example: - + -- We have a word `freq` which is followed by some brackets `()` with some words/letters/numbers inside, surrounded by quotes `"220 275 330 440"` (corresponding to the pitches a3, c#4, e4, a4). -- Then we have a dot `.` followed by another similar piece of code `s("sine")`. -- We can also see these texts are _highlighted_ using colours: word `freq` is purple, the brackets `()` are grey, and the content inside the `""` are green. +- We have a word `note` which is followed by some brackets `()` with some words/letters/numbers inside, surrounded by quotes `"c a f e"` +- Then we have a dot `.` followed by another similar piece of code `s("piano")`. +- We can also see these texts are _highlighted_ using colours: word `note` is purple, the brackets `()` are grey, and the content inside the `""` are green. (The colors could be different if you've changed the default theme) What happens if we try to 'break' this pattern in different ways? - + - + - + Ok, none of these seem to work... - + -This one does work, but now we can't hear the four different events and frequencies anymore. +This one does work, but now we only hear the first note... So what is going on here? @@ -69,14 +69,12 @@ You can also use the keyboard shortcut `cmd-/` to toggle comments on and off. # Strings -Ok, so what about the content inside the quotes (e.g. `"a3 c#4 e4 a4"`)? +Ok, so what about the content inside the quotes (e.g. `"c a f e"`)? In JavaScript, as in most programming languages, this content is referred to as being a [_string_](). 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/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: + 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. +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 @@ -59,3 +63,8 @@ Here is an example of how strudel can sound: /> 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/langebank.mdx b/website/src/pages/workshop/langebank.mdx index 7a1ca697..c38888aa 100644 --- a/website/src/pages/workshop/langebank.mdx +++ b/website/src/pages/workshop/langebank.mdx @@ -152,3 +152,39 @@ n(\`< .scale("/4") .sound("piano")`} /> + +# dinge die es im alten tutorial gab, die jetzt noch nicht im workshop sind + +## `freq` + +To get maximum freedom, you can also use `freq` to directly control the frequency: + + + +## Hearing and frequency + +In the above example, we play A3 (220Hz), C#4 natural (275Hz), E4 (330Hz) and A4 (440Hz), mirroring our previous examples. + +But can you hear the difference between these individual frequencies? + + + +How about these? + + + +The higher we go up... + + + +The less distance we can hear between the frequencies! + + + +Why is this? [Human hearing operates logarithmically](https://www.audiocheck.net/soundtests_nonlinear.php). + +## coding syntax + +## getting-started + +## sounds \ No newline at end of file