mirror of
https://github.com/eliasstepanik/strudel-docker.git
synced 2026-01-11 13:48:34 +00:00
pull apart functional docs
This commit is contained in:
Felix Roos
parent
5733e00908
commit
62fdba0600
@ -712,7 +712,7 @@ export class Pattern {
|
||||
* @memberof Pattern
|
||||
* @example
|
||||
* s("hh*2").stack(
|
||||
* n("c2(3,8)")
|
||||
* note("c2(3,8)")
|
||||
* )
|
||||
*/
|
||||
stack(...pats) {
|
||||
@ -729,7 +729,7 @@ export class Pattern {
|
||||
* @memberof Pattern
|
||||
* @example
|
||||
* s("hh*2").seq(
|
||||
* n("c2(3,8)")
|
||||
* note("c2(3,8)")
|
||||
* )
|
||||
*/
|
||||
seq(...pats) {
|
||||
@ -742,7 +742,7 @@ export class Pattern {
|
||||
* @memberof Pattern
|
||||
* @example
|
||||
* s("hh*2").cat(
|
||||
* n("c2(3,8)")
|
||||
* note("c2(3,8)")
|
||||
* )
|
||||
*/
|
||||
cat(...pats) {
|
||||
|
||||
@ -49,12 +49,22 @@ export const SIDEBAR: Sidebar = {
|
||||
{ text: 'Sounds', link: 'learn/sounds' },
|
||||
{ text: 'Coding syntax', link: 'learn/code' },
|
||||
{ text: 'Mini-Notation', link: 'learn/mini-notation' },
|
||||
{ text: 'Signals', link: 'learn/signals' },
|
||||
],
|
||||
'Making Sound': [
|
||||
{ text: 'Samples', link: 'learn/samples' },
|
||||
{ text: 'Synths', link: 'learn/synths' },
|
||||
{ text: 'Audio Effects', link: 'learn/effects' },
|
||||
{ text: 'Functions', link: 'learn/functions' },
|
||||
{ text: 'Signals', link: 'learn/signals' },
|
||||
],
|
||||
Functions: [
|
||||
{ text: 'Introduction', link: 'functions/intro' },
|
||||
{ text: 'Value Modifiers', link: 'functions/value-modifiers' },
|
||||
{ text: 'Factories', link: 'learn/factories' },
|
||||
{ text: 'Time Modifiers', link: 'learn/time-modifiers' },
|
||||
{ text: 'Conditional Modifiers', link: 'learn/conditional-modifiers' },
|
||||
{ text: 'Tonal', link: 'learn/tonal' },
|
||||
],
|
||||
More: [
|
||||
{ text: 'MIDI & OSC', link: 'learn/input-output' },
|
||||
{ text: 'Strudel vs Tidal', link: 'learn/strudel-vs-tidal' },
|
||||
],
|
||||
|
||||
40
website/src/pages/functions/intro.mdx
Normal file
40
website/src/pages/functions/intro.mdx
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
title: Introduction
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
import { MiniRepl } from '../../docs/MiniRepl';
|
||||
import { JsDoc } from '../../docs/JsDoc';
|
||||
|
||||
# Functional JavaScript API
|
||||
|
||||
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.
|
||||
|
||||
For example, this Pattern in Mini Notation:
|
||||
|
||||
<MiniRepl client:only="react" tune={`note("c3 eb3 g3")`} />
|
||||
|
||||
is equivalent to this Pattern without Mini Notation:
|
||||
|
||||
<MiniRepl client:only="react" tune={`note(seq(c3, eb3, g3))`} />
|
||||
|
||||
Similarly, there is an equivalent function for every aspect of the mini notation.
|
||||
|
||||
Which representation to use is a matter of context. As a rule of thumb, you can think of the JavaScript API
|
||||
to fit better for the larger context, while mini notation is more practical for individiual rhythms.
|
||||
|
||||
## Limits of Mini Notation
|
||||
|
||||
While the Mini Notation is a powerful way to write rhythms shortly, it also has its limits. Take this example:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`stack(
|
||||
note("c2 eb2(3,8)").s('sawtooth').cutoff(800),
|
||||
s("bd,~ sd,hh*4")
|
||||
)`}
|
||||
/>
|
||||
|
||||
Here, we are using mini notation for the individual rhythms, while using the function `stack` to mix them.
|
||||
While stack is also available as `,` in mini notation, we cannot use it here, because we have different types of sounds.
|
||||
61
website/src/pages/functions/value-modifiers.mdx
Normal file
61
website/src/pages/functions/value-modifiers.mdx
Normal file
@ -0,0 +1,61 @@
|
||||
---
|
||||
title: Value Modifiers
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
import { MiniRepl } from '../../docs/MiniRepl';
|
||||
import { JsDoc } from '../../docs/JsDoc';
|
||||
|
||||
# Value Modifiers
|
||||
|
||||
## Notes
|
||||
|
||||
Notes are automatically available as variables:
|
||||
|
||||
<MiniRepl client:only="react" tune={`note(seq(d4, fs4, a4)) // note("d4 f#4 a4")`} />
|
||||
|
||||
An important difference to the mini notation:
|
||||
For sharp notes, the letter "s" is used instead of "#", because JavaScript does not support "#" in a variable name.
|
||||
|
||||
The above is the same as:
|
||||
|
||||
<MiniRepl client:only="react" tune={`note(seq('d4', 'f#4', 'a4'))`} />
|
||||
|
||||
Using strings, you can also use "#".
|
||||
|
||||
## Alternative Syntax
|
||||
|
||||
In the above example, we are nesting a function inside a function, which makes reading the parens a little more difficult.
|
||||
To avoid getting to many nested parens, there is an alternative syntax to add a type to a pattern:
|
||||
|
||||
<MiniRepl client:only="react" tune={`seq(d4, fs4, a4).note()`} />
|
||||
|
||||
You can use this with any function that declares a type (like `n`, `s`, `note`, `freq` etc), just make sure to leave the parens empty!
|
||||
|
||||
## Pattern.add
|
||||
|
||||
<JsDoc client:idle name="Pattern.add" h={0} />
|
||||
|
||||
## Pattern.sub
|
||||
|
||||
<JsDoc client:idle name="Pattern.sub" h={0} />
|
||||
|
||||
## Pattern.mul
|
||||
|
||||
<JsDoc client:idle name="Pattern.mul" h={0} />
|
||||
|
||||
## Pattern.div
|
||||
|
||||
<JsDoc client:idle name="Pattern.div" h={0} />
|
||||
|
||||
## Pattern.round
|
||||
|
||||
<JsDoc client:idle name="Pattern.round" h={0} />
|
||||
|
||||
## Pattern.apply
|
||||
|
||||
<JsDoc client:idle name="Pattern.apply" h={0} />
|
||||
|
||||
## Pattern.range
|
||||
|
||||
<JsDoc client:idle name="Pattern.range" h={0} />
|
||||
43
website/src/pages/learn/conditional-modifiers.mdx
Normal file
43
website/src/pages/learn/conditional-modifiers.mdx
Normal file
@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Conditional Modifiers
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
import { MiniRepl } from '../../docs/MiniRepl';
|
||||
import { JsDoc } from '../../docs/JsDoc';
|
||||
|
||||
# Conditional Modifiers
|
||||
|
||||
## every
|
||||
|
||||
<JsDoc client:idle name="Pattern.every" h={0} />
|
||||
|
||||
## when
|
||||
|
||||
<JsDoc client:idle name="Pattern.when" h={0} />
|
||||
|
||||
# Accumulation Modifiers
|
||||
|
||||
## stack
|
||||
|
||||
<JsDoc client:idle name="Pattern.stack" h={0} />
|
||||
|
||||
## superimpose
|
||||
|
||||
<JsDoc client:idle name="Pattern.superimpose" h={0} />
|
||||
|
||||
## layer
|
||||
|
||||
<JsDoc client:idle name="Pattern.layer" h={0} />
|
||||
|
||||
## off
|
||||
|
||||
<JsDoc client:idle name="Pattern.off" h={0} />
|
||||
|
||||
## echo
|
||||
|
||||
<JsDoc client:idle name="Pattern.echo" h={0} />
|
||||
|
||||
## echoWith
|
||||
|
||||
<JsDoc client:idle name="Pattern.echoWith" h={0} />
|
||||
91
website/src/pages/learn/factories.mdx
Normal file
91
website/src/pages/learn/factories.mdx
Normal file
@ -0,0 +1,91 @@
|
||||
---
|
||||
title: Pattern Factories
|
||||
description: Strudel Tutorial
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
import { MiniRepl } from '../../docs/MiniRepl';
|
||||
import { JsDoc } from '../../docs/JsDoc';
|
||||
|
||||
# Pattern Factories
|
||||
|
||||
The following functions will return a pattern.
|
||||
Most of these are also used by the Mini Notation:
|
||||
|
||||
| function | mini |
|
||||
| ------------------------------ | --------------- |
|
||||
| `cat(x, y)` | `"<x y>"` |
|
||||
| `seq(x, y)` | `"x y"` |
|
||||
| `stack(x, y)` | `"x,y"` |
|
||||
| `timeCat([3,x],[2,y])` | `"x@2 y@2"` |
|
||||
| `polymeter([a, b, c], [x, y])` | `"{a b c, x y}"` |
|
||||
| `polymeterSteps(2, x, y, z)` | `"{x y z}%2"` |
|
||||
|
||||
## cat
|
||||
|
||||
<JsDoc client:idle name="cat" h={0} />
|
||||
|
||||
You can also use cat as a chained function like this:
|
||||
|
||||
<JsDoc client:idle name="Pattern.cat" h={0} hideDescription />
|
||||
|
||||
## seq
|
||||
|
||||
<JsDoc client:idle name="seq" h={0} />
|
||||
|
||||
Or as a chained function:
|
||||
|
||||
<JsDoc client:idle name="Pattern.seq" h={0} hideDescription />
|
||||
|
||||
## stack
|
||||
|
||||
<JsDoc client:idle name="stack" h={0} />
|
||||
|
||||
As a chained function:
|
||||
|
||||
<JsDoc client:idle name="Pattern.stack" h={0} hideDescription />
|
||||
|
||||
## timeCat
|
||||
|
||||
<JsDoc client:idle name="timeCat" h={0} />
|
||||
|
||||
## polymeter
|
||||
|
||||
<JsDoc client:idle name="polymeter" h={0} />
|
||||
|
||||
## polymeterSteps
|
||||
|
||||
<JsDoc client:idle name="polymeterSteps" h={0} />
|
||||
|
||||
# Combining Patterns
|
||||
|
||||
You can freely mix JS patterns, mini patterns and values! For example, this pattern:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`cat(
|
||||
stack(g3,b3,e4),
|
||||
stack(a3,c3,e4),
|
||||
stack(b3,d3,fs4),
|
||||
stack(b3,e4,g4)
|
||||
).note()`}
|
||||
/>
|
||||
|
||||
...is equivalent to:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`cat(
|
||||
"g3,b3,e4",
|
||||
"a3,c3,e4",
|
||||
"b3,d3,f#4",
|
||||
"b3,e4,g4"
|
||||
).note()`}
|
||||
/>
|
||||
|
||||
... as well as:
|
||||
|
||||
<MiniRepl client:only="react" tune={`note("<[g3,b3,e4] [a3,c3,e4] [b3,d3,f#4] [b3,e4,g4]>")`} />
|
||||
|
||||
While mini notation is almost always shorter, it only has a handful of modifiers: \* / ! @.
|
||||
When using JS patterns, there is a lot more you can do.
|
||||
@ -1,250 +0,0 @@
|
||||
---
|
||||
title: What is Strudel?
|
||||
description: Strudel Tutorial
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
import { MiniRepl } from '../../docs/MiniRepl';
|
||||
import { JsDoc } from '../../docs/JsDoc';
|
||||
|
||||
# Functional JavaScript API
|
||||
|
||||
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.
|
||||
|
||||
For example, this Pattern in Mini Notation:
|
||||
|
||||
<MiniRepl client:only="react" tune={`note("c3 eb3 g3")`} />
|
||||
|
||||
is equivalent to this Pattern without Mini Notation:
|
||||
|
||||
<MiniRepl client:only="react" tune={`note(seq(c3, eb3, g3))`} />
|
||||
|
||||
Similarly, there is an equivalent function for every aspect of the mini notation.
|
||||
|
||||
Which representation to use is a matter of context. As a rule of thumb, you can think of the JavaScript API
|
||||
to fit better for the larger context, while mini notation is more practical for individiual rhythms.
|
||||
|
||||
## Limits of Mini Notation
|
||||
|
||||
While the Mini Notation is a powerful way to write rhythms shortly, it also has its limits. Take this example:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`stack(
|
||||
note("c2 eb2(3,8)").s('sawtooth').cutoff(800),
|
||||
s("bd,~ sd,hh*4")
|
||||
)`}
|
||||
/>
|
||||
|
||||
Here, we are using mini notation for the individual rhythms, while using the function `stack` to mix them.
|
||||
While stack is also available as `,` in mini notation, we cannot use it here, because we have different types of sounds.
|
||||
|
||||
## Notes
|
||||
|
||||
Notes are automatically available as variables:
|
||||
|
||||
<MiniRepl client:only="react" tune={`note(seq(d4, fs4, a4)) // note("d4 f#4 a4")`} />
|
||||
|
||||
An important difference to the mini notation:
|
||||
For sharp notes, the letter "s" is used instead of "#", because JavaScript does not support "#" in a variable name.
|
||||
|
||||
The above is the same as:
|
||||
|
||||
<MiniRepl client:only="react" tune={`note(seq('d4', 'f#4', 'a4'))`} />
|
||||
|
||||
Using strings, you can also use "#".
|
||||
|
||||
## Alternative Syntax
|
||||
|
||||
In the above example, we are nesting a function inside a function, which makes reading the parens a little more difficult.
|
||||
To avoid getting to many nested parens, there is an alternative syntax to add a type to a pattern:
|
||||
|
||||
<MiniRepl client:only="react" tune={`seq(d4, fs4, a4).note()`} />
|
||||
|
||||
You can use this with any function that declares a type (like `n`, `s`, `note`, `freq` etc), just make sure to leave the parens empty!
|
||||
|
||||
## Pattern Factories
|
||||
|
||||
The following functions will return a pattern.
|
||||
|
||||
### cat
|
||||
|
||||
<JsDoc client:idle name="cat" h={0} />
|
||||
|
||||
### seq
|
||||
|
||||
<JsDoc client:idle name="seq" h={0} />
|
||||
|
||||
### stack
|
||||
|
||||
<JsDoc client:idle name="stack" h={0} />
|
||||
|
||||
### timeCat
|
||||
|
||||
<JsDoc client:idle name="timeCat" h={0} />
|
||||
|
||||
## Combining Patterns
|
||||
|
||||
You can freely mix JS patterns, mini patterns and values! For example, this pattern:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`cat(
|
||||
stack(g3,b3,e4),
|
||||
stack(a3,c3,e4),
|
||||
stack(b3,d3,fs4),
|
||||
stack(b3,e4,g4)
|
||||
).note()`}
|
||||
/>
|
||||
|
||||
...is equivalent to:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`cat(
|
||||
"g3,b3,e4",
|
||||
"a3,c3,e4",
|
||||
"b3,d3,f#4",
|
||||
"b3,e4,g4"
|
||||
).note()`}
|
||||
/>
|
||||
|
||||
... as well as:
|
||||
|
||||
<MiniRepl client:only="react" tune={`note("<[g3,b3,e4] [a3,c3,e4] [b3,d3,f#4] [b3,e4,g4]>")`} />
|
||||
|
||||
While mini notation is almost always shorter, it only has a handful of modifiers: \* / ! @.
|
||||
When using JS patterns, there is a lot more you can do.
|
||||
|
||||
## Time Modifiers
|
||||
|
||||
The following functions modify a pattern temporal structure in some way.
|
||||
|
||||
### Pattern.slow
|
||||
|
||||
<JsDoc client:idle name="Pattern.slow" h={0} />
|
||||
|
||||
### Pattern.fast
|
||||
|
||||
<JsDoc client:idle name="Pattern.fast" h={0} />
|
||||
|
||||
### Pattern.early
|
||||
|
||||
<JsDoc client:idle name="Pattern.early" h={0} />
|
||||
|
||||
### Pattern.late
|
||||
|
||||
<JsDoc client:idle name="Pattern.late" h={0} />
|
||||
|
||||
### Pattern.legato
|
||||
|
||||
<JsDoc client:idle name="Pattern.legato" h={0} />
|
||||
|
||||
### Pattern.struct
|
||||
|
||||
<JsDoc client:idle name="Pattern.struct" h={0} />
|
||||
|
||||
### Pattern.euclid
|
||||
|
||||
<JsDoc client:idle name="Pattern.euclid" h={0} />
|
||||
|
||||
### Pattern.euclidLegato
|
||||
|
||||
<JsDoc client:idle name="Pattern.euclidLegato" h={0} />
|
||||
|
||||
### Pattern.rev
|
||||
|
||||
<JsDoc client:idle name="Pattern.rev" h={0} />
|
||||
|
||||
### Pattern.iter
|
||||
|
||||
<JsDoc client:idle name="Pattern.iter" h={0} />
|
||||
|
||||
### Pattern.iterBack
|
||||
|
||||
<JsDoc client:idle name="Pattern.iterBack" h={0} />
|
||||
|
||||
## Conditional Modifiers
|
||||
|
||||
### Pattern.every
|
||||
|
||||
<JsDoc client:idle name="Pattern.every" h={0} />
|
||||
|
||||
### Pattern.when
|
||||
|
||||
<JsDoc client:idle name="Pattern.when" h={0} />
|
||||
|
||||
## Accumulation Modifiers
|
||||
|
||||
### Pattern.stack
|
||||
|
||||
<JsDoc client:idle name="Pattern.stack" h={0} />
|
||||
|
||||
### Pattern.superimpose
|
||||
|
||||
<JsDoc client:idle name="Pattern.superimpose" h={0} />
|
||||
|
||||
### Pattern.layer
|
||||
|
||||
<JsDoc client:idle name="Pattern.layer" h={0} />
|
||||
|
||||
### Pattern.off
|
||||
|
||||
<JsDoc client:idle name="Pattern.off" h={0} />
|
||||
|
||||
### Pattern.echo
|
||||
|
||||
<JsDoc client:idle name="Pattern.echo" h={0} />
|
||||
|
||||
### Pattern.echoWith
|
||||
|
||||
<JsDoc client:idle name="Pattern.echoWith" h={0} />
|
||||
|
||||
## Concat Modifiers
|
||||
|
||||
### Pattern.seq
|
||||
|
||||
<JsDoc client:idle name="Pattern.seq" h={0} />
|
||||
|
||||
### Pattern.cat
|
||||
|
||||
<JsDoc client:idle name="Pattern.cat" h={0} />
|
||||
|
||||
## Value Modifiers
|
||||
|
||||
### Pattern.add
|
||||
|
||||
<JsDoc client:idle name="Pattern.add" h={0} />
|
||||
|
||||
### Pattern.sub
|
||||
|
||||
<JsDoc client:idle name="Pattern.sub" h={0} />
|
||||
|
||||
### Pattern.mul
|
||||
|
||||
<JsDoc client:idle name="Pattern.mul" h={0} />
|
||||
|
||||
### Pattern.div
|
||||
|
||||
<JsDoc client:idle name="Pattern.div" h={0} />
|
||||
|
||||
### Pattern.round
|
||||
|
||||
<JsDoc client:idle name="Pattern.round" h={0} />
|
||||
|
||||
### Pattern.apply
|
||||
|
||||
<JsDoc client:idle name="Pattern.apply" h={0} />
|
||||
|
||||
### Pattern.range
|
||||
|
||||
<JsDoc client:idle name="Pattern.range" h={0} />
|
||||
|
||||
### Pattern.chunk
|
||||
|
||||
<JsDoc client:idle name="Pattern.chunk" h={0} />
|
||||
|
||||
### Pattern.chunkBack
|
||||
|
||||
<JsDoc client:idle name="Pattern.chunkBack" h={0} />
|
||||
64
website/src/pages/learn/time-modifiers.mdx
Normal file
64
website/src/pages/learn/time-modifiers.mdx
Normal file
@ -0,0 +1,64 @@
|
||||
---
|
||||
title: Pattern Factories
|
||||
description: Strudel Tutorial
|
||||
layout: ../../layouts/MainLayout.astro
|
||||
---
|
||||
|
||||
import { MiniRepl } from '../../docs/MiniRepl';
|
||||
import { JsDoc } from '../../docs/JsDoc';
|
||||
|
||||
# Time Modifiers
|
||||
|
||||
The following functions modify a pattern temporal structure in some way.
|
||||
|
||||
## slow
|
||||
|
||||
<JsDoc client:idle name="Pattern.slow" h={0} />
|
||||
|
||||
## fast
|
||||
|
||||
<JsDoc client:idle name="Pattern.fast" h={0} />
|
||||
|
||||
## early
|
||||
|
||||
<JsDoc client:idle name="Pattern.early" h={0} />
|
||||
|
||||
## late
|
||||
|
||||
<JsDoc client:idle name="Pattern.late" h={0} />
|
||||
|
||||
## legato
|
||||
|
||||
<JsDoc client:idle name="Pattern.legato" h={0} />
|
||||
|
||||
## struct
|
||||
|
||||
<JsDoc client:idle name="Pattern.struct" h={0} />
|
||||
|
||||
## euclid
|
||||
|
||||
<JsDoc client:idle name="Pattern.euclid" h={0} />
|
||||
|
||||
## euclidLegato
|
||||
|
||||
<JsDoc client:idle name="Pattern.euclidLegato" h={0} />
|
||||
|
||||
## rev
|
||||
|
||||
<JsDoc client:idle name="Pattern.rev" h={0} />
|
||||
|
||||
## iter
|
||||
|
||||
<JsDoc client:idle name="Pattern.iter" h={0} />
|
||||
|
||||
## iterBack
|
||||
|
||||
<JsDoc client:idle name="Pattern.iterBack" h={0} />
|
||||
|
||||
### chunk
|
||||
|
||||
<JsDoc client:idle name="Pattern.chunk" h={0} />
|
||||
|
||||
### chunkBack
|
||||
|
||||
<JsDoc client:idle name="Pattern.chunkBack" h={0} />
|
||||
Loading…
x
Reference in New Issue
Block a user