mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-11 05:38:35 +00:00
replace tutorial with workshop
+ move parts of tutorial to more + move more before Pattern Functions
This commit is contained in:
Felix Roos
parent
02d793e9e0
commit
105193a452
BIN
website/public/icons/strudel_icon.png
Normal file
BIN
website/public/icons/strudel_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -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' },
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -1,154 +0,0 @@
|
||||
<Box>
|
||||
|
||||
1. press play button to start
|
||||
2. change `house` to `casio`
|
||||
3. press refresh button to update
|
||||
4. press stop button to stop
|
||||
|
||||
</Box>
|
||||
|
||||
**Change tempo**
|
||||
|
||||
<MiniRepl
|
||||
client:load
|
||||
tune={`setcps(.5)
|
||||
sound("bd bd hh bd sn bd hh bd")`}
|
||||
punchcard
|
||||
/>
|
||||
|
||||
adding your own samples
|
||||
|
||||
<MiniRepl
|
||||
client:visible
|
||||
tune={`sound(\`
|
||||
[~ ~ oh ~ ] [~ ~ ~ ~ ] [~ ~ ~ ~ ] [~ ~ ~ ~ ],
|
||||
[hh hh ~ ~ ] [hh ~ hh ~ ] [hh ~ hh ~ ] [hh ~ hh ~ ],
|
||||
[~ ~ ~ ~ ] [cp ~ ~ ~ ] [~ ~ ~ ~ ] [cp ~ ~ ~ ],
|
||||
[bd ~ ~ ~ ] [~ ~ ~ bd] [~ ~ bd ~ ] [~ ~ ~ bd ]
|
||||
\`).slow(3)`}
|
||||
punchcard
|
||||
/>
|
||||
|
||||
<MiniRepl
|
||||
client:visible
|
||||
tune={`sound(\`
|
||||
[~ ~ ~ ~ ] [~ ~ ~ ~ ] [~ ~ ~ ~ ] [~ ~ oh:1 ~ ],
|
||||
[hh hh hh hh] [hh hh hh hh] [hh hh hh hh] [hh hh ~ ~ ],
|
||||
[~ ~ ~ ~ ] [cp ~ ~ ~ ] [~ ~ ~ ~ ] [~ cp ~ ~ ],
|
||||
[bd bd ~ ~ ] [~ ~ bd ~ ] [bd bd ~ bd ] [~ ~ ~ ~ ]
|
||||
\`).bank("<RolandTR808 AkaiMPC60>").slow(3)`}
|
||||
punchcard
|
||||
/>
|
||||
|
||||
n(run(8)).sound("east")
|
||||
|
||||
Shorter variant:
|
||||
|
||||
<MiniRepl
|
||||
hideHeader
|
||||
client:visible
|
||||
tune={`sound(\`
|
||||
[~ ~ oh ~ ] ~ ~ ~,
|
||||
[hh*2 ~] hh*2 hh*2 hh*2,
|
||||
[~ cp]*2,
|
||||
bd [~ ~ ~ bd] [~ bd] [~ ~ ~ bd]
|
||||
\`).cpm(90/4)`}
|
||||
/>
|
||||
|
||||
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 \{ \}**
|
||||
|
||||
<MiniRepl
|
||||
hideHeader
|
||||
client:visible
|
||||
tune={`note(\`{
|
||||
[~ 60] 63 [60 63] [~ 63]
|
||||
[~ 60] 62 [60 62] [~ 62]
|
||||
[~ 60] 65 [60 65] [~ 65]
|
||||
[~ 60] 63 [60 63] [~ 63]
|
||||
}%2\`).sound("gm_xylophone")`}
|
||||
punchcard
|
||||
/>
|
||||
|
||||
<Box>
|
||||
|
||||
Try different numbers after `%`
|
||||
|
||||
`{ ... }%1` is the same as `< ... >`
|
||||
|
||||
</Box>
|
||||
|
||||
## Bracket Recap
|
||||
|
||||
- `[]` squeezes contents to 1 cycle
|
||||
- `<>` plays one item per cycle
|
||||
- `{}%x` plays x items per cycle
|
||||
|
||||
<MiniRepl
|
||||
hideHeader
|
||||
client:visible
|
||||
tune={`note("[0 12]*2".add("<36 34 41 39>/2"))
|
||||
.sound("gm_synth_bass_1")`}
|
||||
/>
|
||||
|
||||
vertical
|
||||
|
||||
<MiniRepl
|
||||
hideHeader
|
||||
client:visible
|
||||
tune={`n(\`<
|
||||
<[0,7] [-1,6] [-1,6] [-1,6]>
|
||||
< 4 4 4 3>
|
||||
<[2,7] [2,6] [1,6] [1,6]>
|
||||
< 4 4 4 3>
|
||||
>*2\`)
|
||||
.scale("<E:minor>/4")
|
||||
.sound("piano")`}
|
||||
/>
|
||||
|
||||
horizontal
|
||||
|
||||
<MiniRepl
|
||||
hideHeader
|
||||
client:visible
|
||||
tune={`
|
||||
n(\`<
|
||||
[0,7] 4 [2,7] 4
|
||||
[-1,6] 4 [2,6] 4
|
||||
[-1,6] 4 [1,6] 4
|
||||
[-1,6] 3 [1,6] 3
|
||||
>*2\`)
|
||||
.scale("<E:minor>/4")
|
||||
.sound("piano")`}
|
||||
/>
|
||||
@ -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:
|
||||
|
||||
<MiniRepl client:idle tune={`freq("220 275 330 440").s("sine")`} />
|
||||
<MiniRepl client:idle tune={`note("c a f e").s("piano")`} />
|
||||
|
||||
- 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?
|
||||
|
||||
<MiniRepl client:idle tune={`freq(220 275 330 440).s(sine)`} />
|
||||
<MiniRepl client:idle tune={`note(c a f e).s(piano)`} />
|
||||
|
||||
<MiniRepl client:idle tune={`freq("220 275 330 440")s("sine")`} />
|
||||
<MiniRepl client:idle tune={`note("c a f e")s("piano")`} />
|
||||
|
||||
<MiniRepl client:idle tune={`freq["220 275 330 440"].s{"sine"}`} />
|
||||
<MiniRepl client:idle tune={`note["c a f e"].s{"piano"}`} />
|
||||
|
||||
Ok, none of these seem to work...
|
||||
|
||||
<MiniRepl client:idle tune={`s("sine").freq("220 275 330 440")`} />
|
||||
<MiniRepl client:idle tune={`s("piano").note("c a f e")`} />
|
||||
|
||||
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_](<https://en.wikipedia.org/wiki/String_(computer_science)>).
|
||||
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!
|
||||
|
||||
<br />
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
|
||||
@ -9,6 +9,8 @@ import QA from '@components/QA';
|
||||
|
||||
# First Sounds
|
||||
|
||||
This is the first chapter of the Strudel Workshop, nice to have you on board!
|
||||
|
||||
## Make a Sound
|
||||
|
||||
Let's start by making some noise:
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Introduction
|
||||
title: Getting Started
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
@ -7,17 +7,21 @@ import { MiniRepl } from '../../docs/MiniRepl';
|
||||
|
||||
# Welcome
|
||||
|
||||
<img src="/icons/strudel_icon.png" className="w-32 animate-pulse md:float-right ml-8" />
|
||||
|
||||
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.<br/>
|
||||
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.<br/>
|
||||
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.<br/>
|
||||
The best place to actually make music with Strudel is the [Strudel REPL](https://strudel.tidalcycles.org/)
|
||||
|
||||
<div className="clear-both" />
|
||||
|
||||
## 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)
|
||||
@ -152,3 +152,39 @@ n(\`<
|
||||
.scale("<E:minor>/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:
|
||||
|
||||
<MiniRepl client:idle tune={`freq("220 275 330 440")`} />
|
||||
|
||||
## 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?
|
||||
|
||||
<MiniRepl client:idle tune={`freq("220 221 223 224")`} />
|
||||
|
||||
How about these?
|
||||
|
||||
<MiniRepl client:idle tune={`freq("2020 2021 2023 2024")`} />
|
||||
|
||||
The higher we go up...
|
||||
|
||||
<MiniRepl client:idle tune={`freq("5020 5021 5023 5024")`} />
|
||||
|
||||
The less distance we can hear between the frequencies!
|
||||
|
||||
<MiniRepl client:idle tune={`freq("10020 10021 10023 10024")`} />
|
||||
|
||||
Why is this? [Human hearing operates logarithmically](https://www.audiocheck.net/soundtests_nonlinear.php).
|
||||
|
||||
## coding syntax
|
||||
|
||||
## getting-started
|
||||
|
||||
## sounds
|
||||
Loading…
x
Reference in New Issue
Block a user