elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-26 13:08:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

simplify writing mdx files

Browse Source
This commit is contained in:
Felix Roos 2022-12-20 20:42:42 +01:00
parent d0013f55a2
commit b8f991eddb
5 changed files with 162 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
website/src/components/strudel/MiniRepl.jsx
View File

@ -1,25 +1,35 @@
import { evalScope, controls } from '@strudel.cycles/core'; import { evalScope, controls } from '@strudel.cycles/core';
import { MiniRepl as _MiniRepl } from '@strudel.cycles/react';
import { samples } from '@strudel.cycles/webaudio'; import { samples } from '@strudel.cycles/webaudio';
import { useEffect, useState } from 'react';
fetch('https://strudel.tidalcycles.org/EmuSP12.json') if (typeof window !== 'undefined') {
.then((res) => res.json()) fetch('https://strudel.tidalcycles.org/EmuSP12.json')
.then((json) => samples(json, 'https://strudel.tidalcycles.org/EmuSP12/')); .then((res) => res.json())
.then((json) => samples(json, 'https://strudel.tidalcycles.org/EmuSP12/'));
evalScope( evalScope(
controls, controls,
import('@strudel.cycles/core'), import('@strudel.cycles/core'),
// import('@strudel.cycles/tone'), // import('@strudel.cycles/tone'),
import('@strudel.cycles/tonal'), import('@strudel.cycles/tonal'),
import('@strudel.cycles/mini'), import('@strudel.cycles/mini'),
import('@strudel.cycles/midi'), import('@strudel.cycles/midi'),
import('@strudel.cycles/xen'), import('@strudel.cycles/xen'),
import('@strudel.cycles/webaudio'), import('@strudel.cycles/webaudio'),
import('@strudel.cycles/osc'), import('@strudel.cycles/osc'),
); );
}
// prebake(); // prebake();
export function MiniRepl({ tune }) { export function MiniRepl({ tune }) {
return <_MiniRepl tune={tune} hideOutsideView={true} />; const [Repl, setRepl] = useState();
useEffect(() => {
// we have to load this package on the client
// because codemirror throws an error on the server
import('@strudel.cycles/react').then((res) => {
setRepl(() => res.MiniRepl);
});
}, []);
return Repl ? <Repl tune={tune} hideOutsideView={true} /> : <pre>{tune}</pre>;
} }

7
website/src/layouts/MainLayout.astro
View File

@ -36,11 +36,14 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
<Header currentPage={currentPage} /> <Header currentPage={currentPage} />
</header> </header>
<main class="flex space-x-4 overflow-hidden relative"> <main class="flex space-x-4 overflow-hidden relative">
<main class="h-full grow overflow-auto px-2"> <aside title="Site Navigation">
<LeftSidebar currentPage={currentPage} />
</aside>
<div class="h-full grow overflow-auto px-2">
<PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}> <PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}>
<slot /> <slot />
</PageContent> </PageContent>
</main> </div>
<aside class="w-2xl flex-none h-full overflow-auto px-4" title="Table of Contents"> <aside class="w-2xl flex-none h-full overflow-auto px-4" title="Table of Contents">
<RightSidebar headings={headings} githubEditUrl={githubEditUrl} /> <RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
</aside> </aside>

7
website/src/pages/tutorial/index.astro
View File

@ -1,7 +0,0 @@
---
import { Content } from '../../components/tutorial.mdx';
import MiniRepl from '../../components/strudel/MiniRepl.astro';
import JsDoc from '../../components/strudel/JsDoc.astro';
---
<Content components={{ MiniRepl, JsDoc }} />

236
website/src/components/tutorial.mdx → website/src/pages/tutorial/index.mdx
View File

@ -1,9 +1,12 @@
--- ---
title: What is Strudel? title: What is Strudel?
description: Strudel Tutorial description: Strudel Tutorial
layout: ../layouts/MainLayout.astro layout: ../../layouts/MainLayout.astro
--- ---
import { MiniRepl } from '../../components/strudel/MiniRepl';
import { JsDoc } from '../../components/strudel/JsDoc';
# What is Strudel? # What is Strudel?
With Strudel, you can expressively write dynamic music pieces. With Strudel, you can expressively write dynamic music pieces.
@ -20,6 +23,7 @@ The best place to actually make music with Strudel is the [Strudel REPL](https:/
To get a taste of what Strudel can do, check out this track: To get a taste of what Strudel can do, check out this track:
<MiniRepl <MiniRepl
client:idle
tune={`samples({ tune={`samples({
bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav','bd/BT0A0DA.wav','bd/BT0A0D3.wav','bd/BT0A0D0.wav','bd/BT0A0A7.wav'], bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav','bd/BT0A0DA.wav','bd/BT0A0D3.wav','bd/BT0A0D0.wav','bd/BT0A0A7.wav'],
sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'], sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'],
@ -68,7 +72,7 @@ Pitches are an essential building block for music. In Strudel, there are 3 diffe
Notes are notated with the note letter, followed by the octave number. You can notate flats with `b` and sharps with `#`. Notes are notated with the note letter, followed by the octave number. You can notate flats with `b` and sharps with `#`.
<MiniRepl tune={`note("a3 c#4 e4 a4")`} /> <MiniRepl client:only="react" tune={`note("a3 c#4 e4 a4")`} />
By the way, you can edit the contents of the player, and press "update" to hear your change! By the way, you can edit the contents of the player, and press "update" to hear your change!
You can also press "play" on the next player without needing to stop the last one. You can also press "play" on the next player without needing to stop the last one.
@ -77,18 +81,18 @@ You can also press "play" on the next player without needing to stop the last on
If you don't like notes, you can also use numbers with `n` instead: If you don't like notes, you can also use numbers with `n` instead:
<MiniRepl tune={`n("57 61 64 69")`} /> <MiniRepl client:only="react" tune={`n("57 61 64 69")`} />
These numbers are interpreted as so called midi numbers, where adjacent whole numbers are 1 semitone apart. These numbers are interpreted as so called midi numbers, where adjacent whole numbers are 1 semitone apart.
You could also write decimal numbers to get microtonal pitches: You could also write decimal numbers to get microtonal pitches:
<MiniRepl tune={`n("74.5 75 75.5 76")`} /> <MiniRepl client:only="react" tune={`n("74.5 75 75.5 76")`} />
## freq ## freq
To get maximum freedom, you can also use `freq` to directly control the frequency: To get maximum freedom, you can also use `freq` to directly control the frequency:
<MiniRepl tune={`freq("220 275 330 440")`} /> <MiniRepl client:only="react" tune={`freq("220 275 330 440")`} />
In this example, we play A3 (220Hz), C#4 natural (275Hz), E4 (330Hz) and A4 (440Hz). In this example, we play A3 (220Hz), C#4 natural (275Hz), E4 (330Hz) and A4 (440Hz).
@ -98,11 +102,11 @@ In this example, we play A3 (220Hz), C#4 natural (275Hz), E4 (330Hz) and A4 (440
Instead of pitches, we can also play sounds with `s`: Instead of pitches, we can also play sounds with `s`:
<MiniRepl tune={`s("bd hh sd hh")`} /> <MiniRepl client:only="react" tune={`s("bd hh sd hh")`} />
Similarly, we can also use `s` to change the sound of our pitches: Similarly, we can also use `s` to change the sound of our pitches:
<MiniRepl tune={`note("a3 c#4 e4 a4").s("sawtooth")`} /> <MiniRepl client:only="react" tune={`note("a3 c#4 e4 a4").s("sawtooth")`} />
Try changing the sound to `square`, `triangle` or `sine`! Try changing the sound to `square`, `triangle` or `sine`!
@ -125,6 +129,7 @@ The `yyy` function is called a chained function, because it is appended with a d
Strudel makes heavy use of chained functions. Here is a more extreme example: Strudel makes heavy use of chained functions. Here is a more extreme example:
<MiniRepl <MiniRepl
client:idle
tune={`note("a3 c#4 e4 a4") tune={`note("a3 c#4 e4 a4")
.s("sawtooth") .s("sawtooth")
.cutoff(500) .cutoff(500)
@ -147,6 +152,7 @@ Similar to Tidal Cycles, Strudel has an embedded mini language that is designed
Before diving deeper into the details, here is a flavor of how the mini language looks like: Before diving deeper into the details, here is a flavor of how the mini language looks like:
<MiniRepl <MiniRepl
client:idle
tune={`note(\`[ tune={`note(\`[
[ [
[e5 [b4 c5] d5 [c5 b4]] [e5 [b4 c5] d5 [c5 b4]]
@ -177,7 +183,7 @@ You can also use double quotes (") for single line mini notation.
We can play more notes by separating them with spaces: We can play more notes by separating them with spaces:
<MiniRepl tune={`note("e5 b4 d5 c5")`} /> <MiniRepl client:only="react" tune={`note("e5 b4 d5 c5")`} />
Here, those four notes are squashed into one cycle, so each note is a quarter second long. Here, those four notes are squashed into one cycle, so each note is a quarter second long.
Try adding or removing notes and notice how the tempo changes! Try adding or removing notes and notice how the tempo changes!
@ -186,7 +192,7 @@ Try adding or removing notes and notice how the tempo changes!
We can slow the sequence down by enclosing it in brackets and dividing it by a number: We can slow the sequence down by enclosing it in brackets and dividing it by a number:
<MiniRepl tune={`note("[e5 b4 d5 c5]/2")`} /> <MiniRepl client:only="react" tune={`note("[e5 b4 d5 c5]/2")`} />
The division by two means that the sequence will be played over the course of two cycles. The division by two means that the sequence will be played over the course of two cycles.
You can also use decimal numbers for any tempo you like. You can also use decimal numbers for any tempo you like.
@ -195,11 +201,11 @@ You can also use decimal numbers for any tempo you like.
Using angle brackets, we can define the sequence length based on the number of children: Using angle brackets, we can define the sequence length based on the number of children:
<MiniRepl tune={`note("<e5 b4 d5 c5>")`} /> <MiniRepl client:only="react" tune={`note("<e5 b4 d5 c5>")`} />
The above snippet is the same as: The above snippet is the same as:
<MiniRepl tune={`note("[e5 b4 d5 c5]/4")`} /> <MiniRepl client:only="react" tune={`note("[e5 b4 d5 c5]/4")`} />
The advantage of the angle brackets, is that we can add more children without needing to change the number at the end. The advantage of the angle brackets, is that we can add more children without needing to change the number at the end.
@ -207,7 +213,7 @@ The advantage of the angle brackets, is that we can add more children without ne
Contrary to division, a sequence can be sped up by multiplying it by a number: Contrary to division, a sequence can be sped up by multiplying it by a number:
<MiniRepl tune={`note("[e5 b4 d5 c5]*2")`} /> <MiniRepl client:only="react" tune={`note("[e5 b4 d5 c5]*2")`} />
The multiplication by 2 here means that the sequence will play twice a cycle. The multiplication by 2 here means that the sequence will play twice a cycle.
@ -215,29 +221,29 @@ The multiplication by 2 here means that the sequence will play twice a cycle.
To create more interesting rhythms, you can nest sequences with brackets, like this: To create more interesting rhythms, you can nest sequences with brackets, like this:
<MiniRepl tune={`note("e5 [b4 c5] d5 [c5 b4]")`} /> <MiniRepl client:only="react" tune={`note("e5 [b4 c5] d5 [c5 b4]")`} />
## Rests ## Rests
The "~" represents a rest: The "~" represents a rest:
<MiniRepl tune={`note("[b4 [~ c5] d5 e5]")`} /> <MiniRepl client:only="react" tune={`note("[b4 [~ c5] d5 e5]")`} />
## Parallel ## Parallel
Using commas, we can play chords: Using commas, we can play chords:
<MiniRepl tune={`note("g3,b3,e4")`} /> <MiniRepl client:only="react" tune={`note("g3,b3,e4")`} />
To play multiple chords in a sequence, we have to wrap them in brackets: To play multiple chords in a sequence, we have to wrap them in brackets:
<MiniRepl tune={`note("<[g3,b3,e4] [a3,c3,e4] [b3,d3,f#4] [b3,e4,g4]>")`} /> <MiniRepl client:only="react" tune={`note("<[g3,b3,e4] [a3,c3,e4] [b3,d3,f#4] [b3,e4,g4]>")`} />
## Elongation ## Elongation
With the "@" symbol, we can specify temporal "weight" of a sequence child: With the "@" symbol, we can specify temporal "weight" of a sequence child:
<MiniRepl tune={`note("<[g3,b3,e4]@2 [a3,c3,e4] [b3,d3,f#4]>")`} /> <MiniRepl client:only="react" tune={`note("<[g3,b3,e4]@2 [a3,c3,e4] [b3,d3,f#4]>")`} />
Here, the first chord has a weight of 2, making it twice the length of the other chords. The default weight is 1. Here, the first chord has a weight of 2, making it twice the length of the other chords. The default weight is 1.
@ -245,7 +251,7 @@ Here, the first chord has a weight of 2, making it twice the length of the other
Using "!" we can repeat without speeding up: Using "!" we can repeat without speeding up:
<MiniRepl tune={`note("<[g3,b3,e4]!2 [a3,c3,e4] [b3,d3,f#4]>")`} /> <MiniRepl client:only="react" tune={`note("<[g3,b3,e4]!2 [a3,c3,e4] [b3,d3,f#4]>")`} />
In essence, the `x!n` is like a shortcut for `[x*n]@n`. In essence, the `x!n` is like a shortcut for `[x*n]@n`.
@ -258,7 +264,7 @@ The third (optional) parameter controls the starting position for distributing t
One popular Euclidian rhythm (going by various names, such as "Pop Clave") is "(3,8,0)" or simply "(3,8)", One popular Euclidian rhythm (going by various names, such as "Pop Clave") is "(3,8,0)" or simply "(3,8)",
resulting in a rhythmical structure of "x ~ ~ x ~ ~ x ~" (3 beats over 8 segments, starting on position 1). resulting in a rhythmical structure of "x ~ ~ x ~ ~ x ~" (3 beats over 8 segments, starting on position 1).
<MiniRepl tune={`note("e5(2,8) b4(3,8) d5(2,8) c5(3,8)").slow(4)`} /> <MiniRepl client:only="react" tune={`note("e5(2,8) b4(3,8) d5(2,8) c5(3,8)").slow(4)`} />
<br /> <br />
@ -271,14 +277,14 @@ Let's take a closer look at how we can control synths, sounds and effects.
So far, all the mini notation examples all used the same sound, which is kind of boring. So far, all the mini notation examples all used the same sound, which is kind of boring.
We can change the sound, using the `s` function: We can change the sound, using the `s` function:
<MiniRepl tune={`note("c2 <eb2 <g2 g1>>").s('sawtooth')`} /> <MiniRepl client:only="react" tune={`note("c2 <eb2 <g2 g1>>").s('sawtooth')`} />
Here, we are wrapping our notes inside `note` and set the sound using `s`, connected by a dot. Here, we are wrapping our notes inside `note` and set the sound using `s`, connected by a dot.
Those functions are only 2 of many ways to alter the properties, or _params_ of a sound. Those functions are only 2 of many ways to alter the properties, or _params_ of a sound.
The power of patterns allows us to sequence any _param_ independently: The power of patterns allows us to sequence any _param_ independently:
<MiniRepl tune={`note("c2 <eb2 <g2 g1>>").s("<sawtooth square triangle>")`} /> <MiniRepl client:only="react" tune={`note("c2 <eb2 <g2 g1>>").s("<sawtooth square triangle>")`} />
Now we not only pattern the notes, but the sound as well! Now we not only pattern the notes, but the sound as well!
`sawtooth` `square` and `triangle` are the basic waveforms available in `s`. `sawtooth` `square` and `triangle` are the basic waveforms available in `s`.
@ -288,6 +294,7 @@ Now we not only pattern the notes, but the sound as well!
You can control the envelope of a synth using the `attack`, `decay`, `sustain` and `release` functions: You can control the envelope of a synth using the `attack`, `decay`, `sustain` and `release` functions:
<MiniRepl <MiniRepl
client:idle
tune={`note("c2 <eb2 <g2 g1>>").s('sawtooth') tune={`note("c2 <eb2 <g2 g1>>").s('sawtooth')
.attack(.1).decay(.1).sustain(.2).release(.1)`} .attack(.1).decay(.1).sustain(.2).release(.1)`}
/> />
@ -296,7 +303,7 @@ You can control the envelope of a synth using the `attack`, `decay`, `sustain` a
Besides Synths, `s` can also play back samples: Besides Synths, `s` can also play back samples:
<MiniRepl tune={`s("bd sd,hh*8,misc/2")`} /> <MiniRepl client:only="react" tune={`s("bd sd,hh*8,misc/2")`} />
To know which sounds are available, open the [default sample map](https://strudel.tidalcycles.org/EmuSP12.json) To know which sounds are available, open the [default sample map](https://strudel.tidalcycles.org/EmuSP12.json)
@ -305,6 +312,7 @@ To know which sounds are available, open the [default sample map](https://strude
You can load your own sample map like this: You can load your own sample map like this:
<MiniRepl <MiniRepl
client:idle
tune={`samples({ tune={`samples({
bd: 'bd/BT0AADA.wav', bd: 'bd/BT0AADA.wav',
sd: 'sd/rytm-01-classic.wav', sd: 'sd/rytm-01-classic.wav',
@ -319,6 +327,7 @@ The second argument is the base URL that comes before each path. Make sure your
Because github is a popular choice to dump samples, there is a shortcut for that: Because github is a popular choice to dump samples, there is a shortcut for that:
<MiniRepl <MiniRepl
client:idle
tune={`samples({ tune={`samples({
bd: 'bd/BT0AADA.wav', bd: 'bd/BT0AADA.wav',
sd: 'sd/rytm-01-classic.wav', sd: 'sd/rytm-01-classic.wav',
@ -334,6 +343,7 @@ The format is `github:user/repo/branch/`.
It is also possible, to declare multiple files for one sound, using the array notation: It is also possible, to declare multiple files for one sound, using the array notation:
<MiniRepl <MiniRepl
client:idle
tune={`samples({ tune={`samples({
bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav'], bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav'],
sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'], sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'],
@ -346,6 +356,7 @@ The `:0` `:1` etc. are the indices of the array.
The sample number can also be set using `n`: The sample number can also be set using `n`:
<MiniRepl <MiniRepl
client:idle
tune={`samples({ tune={`samples({
bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav'], bd: ['bd/BT0AADA.wav','bd/BT0AAD0.wav'],
sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'], sd: ['sd/rytm-01-classic.wav','sd/rytm-00-hard.wav'],
@ -359,6 +370,7 @@ s("bd,~ sd,hh*4").n("<0 1>")`}
For pitched sounds, you can use `note`, just like with synths: For pitched sounds, you can use `note`, just like with synths:
<MiniRepl <MiniRepl
client:idle
tune={`samples({ tune={`samples({
'gtr': 'gtr/0001_cleanC.wav', 'gtr': 'gtr/0001_cleanC.wav',
}, 'github:tidalcycles/Dirt-Samples/master/'); }, 'github:tidalcycles/Dirt-Samples/master/');
@ -369,6 +381,7 @@ Here, the guitar samples will overlap, because they always play till the end.
If we want them to behave more like a synth, we can add `clip(1)`: If we want them to behave more like a synth, we can add `clip(1)`:
<MiniRepl <MiniRepl
client:idle
tune={`samples({ tune={`samples({
'gtr': 'gtr/0001_cleanC.wav', 'gtr': 'gtr/0001_cleanC.wav',
}, 'github:tidalcycles/Dirt-Samples/master/'); }, 'github:tidalcycles/Dirt-Samples/master/');
@ -381,6 +394,7 @@ note("g3 [bb3 c4] <g4 f4 eb4 f3>@2").s('gtr').clip(1)
If we have 2 samples with different base pitches, we can make them in tune by specifying the pitch like this: If we have 2 samples with different base pitches, we can make them in tune by specifying the pitch like this:
<MiniRepl <MiniRepl
client:idle
tune={`samples({ tune={`samples({
'gtr': 'gtr/0001_cleanC.wav', 'gtr': 'gtr/0001_cleanC.wav',
'moog': { 'g3': 'moog/005_Mighty%20Moog%20G3.wav' }, 'moog': { 'g3': 'moog/005_Mighty%20Moog%20G3.wav' },
@ -394,6 +408,7 @@ If a sample has no pitch set, `c3` is the default.
We can also declare different samples for different regions of the keyboard: We can also declare different samples for different regions of the keyboard:
<MiniRepl <MiniRepl
client:idle
tune={`samples({ tune={`samples({
'moog': { 'moog': {
'g2': 'moog/004_Mighty%20Moog%20G2.wav', 'g2': 'moog/004_Mighty%20Moog%20G2.wav',
@ -411,19 +426,19 @@ The sampler will always pick the closest matching sample for the current note!
### Pattern.begin ### Pattern.begin
<JsDoc name="Pattern.begin" h={0} /> <JsDoc client:idle name="Pattern.begin" h={0} />
### Pattern.end ### Pattern.end
<JsDoc name="Pattern.end" h={0} /> <JsDoc client:idle name="Pattern.end" h={0} />
### Pattern.loopAt ### Pattern.loopAt
<JsDoc name="Pattern.loopAt" h={0} /> <JsDoc client:idle name="Pattern.loopAt" h={0} />
### Pattern.chop ### Pattern.chop
<JsDoc name="Pattern.chop" h={0} /> <JsDoc client:idle name="Pattern.chop" h={0} />
## Audio Effects ## Audio Effects
@ -431,55 +446,55 @@ Wether you're using a synth or a sample, you can apply these effects:
### gain ### gain
<JsDoc name="gain" h={0} /> <JsDoc client:idle name="gain" h={0} />
### velocity ### velocity
<JsDoc name="velocity" h={0} /> <JsDoc client:idle name="velocity" h={0} />
### cutoff ### cutoff
<JsDoc name="cutoff" h={0} /> <JsDoc client:idle name="cutoff" h={0} />
### resonance ### resonance
<JsDoc name="resonance" h={0} /> <JsDoc client:idle name="resonance" h={0} />
### hcutoff ### hcutoff
<JsDoc name="hcutoff" h={0} /> <JsDoc client:idle name="hcutoff" h={0} />
### hresonance ### hresonance
<JsDoc name="hresonance" h={0} /> <JsDoc client:idle name="hresonance" h={0} />
### bandf ### bandf
<JsDoc name="bandf" h={0} /> <JsDoc client:idle name="bandf" h={0} />
### bandq ### bandq
<JsDoc name="bandq" h={0} /> <JsDoc client:idle name="bandq" h={0} />
### vowel ### vowel
<JsDoc name="vowel" h={0} /> <JsDoc client:idle name="vowel" h={0} />
### pan ### pan
<JsDoc name="pan" h={0} /> <JsDoc client:idle name="pan" h={0} />
### coarse ### coarse
<JsDoc name="coarse" h={0} /> <JsDoc client:idle name="coarse" h={0} />
### shape ### shape
<JsDoc name="shape" h={0} /> <JsDoc client:idle name="shape" h={0} />
### crush ### crush
<JsDoc name="crush" h={0} /> <JsDoc client:idle name="crush" h={0} />
<br /> <br />
@ -490,11 +505,11 @@ Internally, the mini notation will expand to use the actual functional JavaScrip
For example, this Pattern in Mini Notation: For example, this Pattern in Mini Notation:
<MiniRepl tune={`note("c3 eb3 g3")`} /> <MiniRepl client:only="react" tune={`note("c3 eb3 g3")`} />
is equivalent to this Pattern without Mini Notation: is equivalent to this Pattern without Mini Notation:
<MiniRepl tune={`note(seq(c3, eb3, g3))`} /> <MiniRepl client:only="react" tune={`note(seq(c3, eb3, g3))`} />
Similarly, there is an equivalent function for every aspect of the mini notation. Similarly, there is an equivalent function for every aspect of the mini notation.
@ -506,6 +521,7 @@ to fit better for the larger context, while mini notation is more practical for
While the Mini Notation is a powerful way to write rhythms shortly, it also has its limits. Take this example: While the Mini Notation is a powerful way to write rhythms shortly, it also has its limits. Take this example:
<MiniRepl <MiniRepl
client:idle
tune={`stack( tune={`stack(
note("c2 eb2(3,8)").s('sawtooth').cutoff(800), note("c2 eb2(3,8)").s('sawtooth').cutoff(800),
s("bd,~ sd,hh*4") s("bd,~ sd,hh*4")
@ -519,14 +535,14 @@ While stack is also available as `,` in mini notation, we cannot use it here, be
Notes are automatically available as variables: Notes are automatically available as variables:
<MiniRepl tune={`note(seq(d4, fs4, a4)) // note("d4 f#4 a4")`} /> <MiniRepl client:only="react" tune={`note(seq(d4, fs4, a4)) // note("d4 f#4 a4")`} />
An important difference to the mini notation: 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. 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: The above is the same as:
<MiniRepl tune={`note(seq('d4', 'f#4', 'a4'))`} /> <MiniRepl client:only="react" tune={`note(seq('d4', 'f#4', 'a4'))`} />
Using strings, you can also use "#". Using strings, you can also use "#".
@ -535,7 +551,7 @@ Using strings, you can also use "#".
In the above example, we are nesting a function inside a function, which makes reading the parens a little more difficult. 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: To avoid getting to many nested parens, there is an alternative syntax to add a type to a pattern:
<MiniRepl tune={`seq(d4, fs4, a4).note()`} /> <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! 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!
@ -545,25 +561,26 @@ The following functions will return a pattern.
### cat ### cat
<JsDoc name="cat" h={0} /> <JsDoc client:idle name="cat" h={0} />
### seq ### seq
<JsDoc name="seq" h={0} /> <JsDoc client:idle name="seq" h={0} />
### stack ### stack
<JsDoc name="stack" h={0} /> <JsDoc client:idle name="stack" h={0} />
### timeCat ### timeCat
<JsDoc name="timeCat" h={0} /> <JsDoc client:idle name="timeCat" h={0} />
## Combining Patterns ## Combining Patterns
You can freely mix JS patterns, mini patterns and values! For example, this pattern: You can freely mix JS patterns, mini patterns and values! For example, this pattern:
<MiniRepl <MiniRepl
client:idle
tune={`cat( tune={`cat(
stack(g3,b3,e4), stack(g3,b3,e4),
stack(a3,c3,e4), stack(a3,c3,e4),
@ -575,6 +592,7 @@ You can freely mix JS patterns, mini patterns and values! For example, this patt
...is equivalent to: ...is equivalent to:
<MiniRepl <MiniRepl
client:idle
tune={`cat( tune={`cat(
"g3,b3,e4", "g3,b3,e4",
"a3,c3,e4", "a3,c3,e4",
@ -585,7 +603,7 @@ You can freely mix JS patterns, mini patterns and values! For example, this patt
... as well as: ... as well as:
<MiniRepl tune={`note("<[g3,b3,e4] [a3,c3,e4] [b3,d3,f#4] [b3,e4,g4]>")`} /> <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: \* / ! @. 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. When using JS patterns, there is a lot more you can do.
@ -596,131 +614,131 @@ The following functions modify a pattern temporal structure in some way.
### Pattern.slow ### Pattern.slow
<JsDoc name="Pattern.slow" h={0} /> <JsDoc client:idle name="Pattern.slow" h={0} />
### Pattern.fast ### Pattern.fast
<JsDoc name="Pattern.fast" h={0} /> <JsDoc client:idle name="Pattern.fast" h={0} />
### Pattern.early ### Pattern.early
<JsDoc name="Pattern.early" h={0} /> <JsDoc client:idle name="Pattern.early" h={0} />
### Pattern.late ### Pattern.late
<JsDoc name="Pattern.late" h={0} /> <JsDoc client:idle name="Pattern.late" h={0} />
### Pattern.legato ### Pattern.legato
<JsDoc name="Pattern.legato" h={0} /> <JsDoc client:idle name="Pattern.legato" h={0} />
### Pattern.struct ### Pattern.struct
<JsDoc name="Pattern.struct" h={0} /> <JsDoc client:idle name="Pattern.struct" h={0} />
### Pattern.euclid ### Pattern.euclid
<JsDoc name="Pattern.euclid" h={0} /> <JsDoc client:idle name="Pattern.euclid" h={0} />
### Pattern.euclidLegato ### Pattern.euclidLegato
<JsDoc name="Pattern.euclidLegato" h={0} /> <JsDoc client:idle name="Pattern.euclidLegato" h={0} />
### Pattern.rev ### Pattern.rev
<JsDoc name="Pattern.rev" h={0} /> <JsDoc client:idle name="Pattern.rev" h={0} />
### Pattern.iter ### Pattern.iter
<JsDoc name="Pattern.iter" h={0} /> <JsDoc client:idle name="Pattern.iter" h={0} />
### Pattern.iterBack ### Pattern.iterBack
<JsDoc name="Pattern.iterBack" h={0} /> <JsDoc client:idle name="Pattern.iterBack" h={0} />
## Conditional Modifiers ## Conditional Modifiers
### Pattern.every ### Pattern.every
<JsDoc name="Pattern.every" h={0} /> <JsDoc client:idle name="Pattern.every" h={0} />
### Pattern.when ### Pattern.when
<JsDoc name="Pattern.when" h={0} /> <JsDoc client:idle name="Pattern.when" h={0} />
## Accumulation Modifiers ## Accumulation Modifiers
### Pattern.stack ### Pattern.stack
<JsDoc name="Pattern.stack" h={0} /> <JsDoc client:idle name="Pattern.stack" h={0} />
### Pattern.superimpose ### Pattern.superimpose
<JsDoc name="Pattern.superimpose" h={0} /> <JsDoc client:idle name="Pattern.superimpose" h={0} />
### Pattern.layer ### Pattern.layer
<JsDoc name="Pattern.layer" h={0} /> <JsDoc client:idle name="Pattern.layer" h={0} />
### Pattern.off ### Pattern.off
<JsDoc name="Pattern.off" h={0} /> <JsDoc client:idle name="Pattern.off" h={0} />
### Pattern.echo ### Pattern.echo
<JsDoc name="Pattern.echo" h={0} /> <JsDoc client:idle name="Pattern.echo" h={0} />
### Pattern.echoWith ### Pattern.echoWith
<JsDoc name="Pattern.echoWith" h={0} /> <JsDoc client:idle name="Pattern.echoWith" h={0} />
## Concat Modifiers ## Concat Modifiers
### Pattern.seq ### Pattern.seq
<JsDoc name="Pattern.seq" h={0} /> <JsDoc client:idle name="Pattern.seq" h={0} />
### Pattern.cat ### Pattern.cat
<JsDoc name="Pattern.cat" h={0} /> <JsDoc client:idle name="Pattern.cat" h={0} />
## Value Modifiers ## Value Modifiers
### Pattern.add ### Pattern.add
<JsDoc name="Pattern.add" h={0} /> <JsDoc client:idle name="Pattern.add" h={0} />
### Pattern.sub ### Pattern.sub
<JsDoc name="Pattern.sub" h={0} /> <JsDoc client:idle name="Pattern.sub" h={0} />
### Pattern.mul ### Pattern.mul
<JsDoc name="Pattern.mul" h={0} /> <JsDoc client:idle name="Pattern.mul" h={0} />
### Pattern.div ### Pattern.div
<JsDoc name="Pattern.div" h={0} /> <JsDoc client:idle name="Pattern.div" h={0} />
### Pattern.round ### Pattern.round
<JsDoc name="Pattern.round" h={0} /> <JsDoc client:idle name="Pattern.round" h={0} />
### Pattern.apply ### Pattern.apply
<JsDoc name="Pattern.apply" h={0} /> <JsDoc client:idle name="Pattern.apply" h={0} />
### Pattern.range ### Pattern.range
<JsDoc name="Pattern.range" h={0} /> <JsDoc client:idle name="Pattern.range" h={0} />
### Pattern.chunk ### Pattern.chunk
<JsDoc name="Pattern.chunk" h={0} /> <JsDoc client:idle name="Pattern.chunk" h={0} />
### Pattern.chunkBack ### Pattern.chunkBack
<JsDoc name="Pattern.chunkBack" h={0} /> <JsDoc client:idle name="Pattern.chunkBack" h={0} />
## Continuous Signals ## Continuous Signals
@ -729,23 +747,23 @@ They can provide streams of numbers that can be sampled at discrete points in ti
### saw ### saw
<JsDoc name="saw" h={0} /> <JsDoc client:idle name="saw" h={0} />
### sine ### sine
<JsDoc name="sine" h={0} /> <JsDoc client:idle name="sine" h={0} />
### cosine ### cosine
<JsDoc name="cosine" h={0} /> <JsDoc client:idle name="cosine" h={0} />
### tri ### tri
<JsDoc name="tri" h={0} /> <JsDoc client:idle name="tri" h={0} />
### square ### square
<JsDoc name="square" h={0} /> <JsDoc client:idle name="square" h={0} />
### Ranges from -1 to 1 ### Ranges from -1 to 1
@ -753,15 +771,15 @@ There is also `saw2`, `sine2`, `cosine2`, `tri2` and `square2` which have a rang
### rand ### rand
<JsDoc name="rand" h={0} /> <JsDoc client:idle name="rand" h={0} />
### perlin ### perlin
<JsDoc name="perlin" h={0} /> <JsDoc client:idle name="perlin" h={0} />
### irand ### irand
<JsDoc name="irand" h={0} /> <JsDoc client:idle name="irand" h={0} />
## Random Modifiers ## Random Modifiers
@ -769,59 +787,59 @@ These methods add random behavior to your Patterns.
### chooseCycles ### chooseCycles
<JsDoc name="chooseCycles" h={0} /> <JsDoc client:idle name="chooseCycles" h={0} />
### Pattern.degradeBy ### Pattern.degradeBy
<JsDoc name="Pattern.degradeBy" h={0} /> <JsDoc client:idle name="Pattern.degradeBy" h={0} />
### Pattern.degrade ### Pattern.degrade
<JsDoc name="Pattern.degrade" h={0} /> <JsDoc client:idle name="Pattern.degrade" h={0} />
### Pattern.undegradeBy ### Pattern.undegradeBy
<JsDoc name="Pattern.undegradeBy" h={0} /> <JsDoc client:idle name="Pattern.undegradeBy" h={0} />
### Pattern.sometimesBy ### Pattern.sometimesBy
<JsDoc name="Pattern.sometimesBy" h={0} /> <JsDoc client:idle name="Pattern.sometimesBy" h={0} />
### Pattern.sometimes ### Pattern.sometimes
<JsDoc name="Pattern.sometimes" h={0} /> <JsDoc client:idle name="Pattern.sometimes" h={0} />
### Pattern.someCyclesBy ### Pattern.someCyclesBy
<JsDoc name="Pattern.someCyclesBy" h={0} /> <JsDoc client:idle name="Pattern.someCyclesBy" h={0} />
### Pattern.someCycles ### Pattern.someCycles
<JsDoc name="Pattern.someCycles" h={0} /> <JsDoc client:idle name="Pattern.someCycles" h={0} />
### Pattern.often ### Pattern.often
<JsDoc name="Pattern.often" h={0} /> <JsDoc client:idle name="Pattern.often" h={0} />
### Pattern.rarely ### Pattern.rarely
<JsDoc name="Pattern.rarely" h={0} /> <JsDoc client:idle name="Pattern.rarely" h={0} />
### Pattern.almostNever ### Pattern.almostNever
<JsDoc name="Pattern.almostNever" h={0} /> <JsDoc client:idle name="Pattern.almostNever" h={0} />
### Pattern.almostAlways ### Pattern.almostAlways
<JsDoc name="Pattern.almostAlways" h={0} /> <JsDoc client:idle name="Pattern.almostAlways" h={0} />
### Pattern.never ### Pattern.never
<JsDoc name="Pattern.never" h={0} /> <JsDoc client:idle name="Pattern.never" h={0} />
### Pattern.always ### Pattern.always
<JsDoc name="Pattern.always" h={0} /> <JsDoc client:idle name="Pattern.always" h={0} />
<br /> <br />
<br /> <br />
@ -834,19 +852,20 @@ The Tonal API, uses [tonaljs](https://github.com/tonaljs/tonal) to provide helpe
Transposes all notes to the given number of semitones: Transposes all notes to the given number of semitones:
<MiniRepl tune={`"c2 c3".fast(2).transpose("<0 -2 5 3>".slow(2)).note()`} /> <MiniRepl client:only="react" tune={`"c2 c3".fast(2).transpose("<0 -2 5 3>".slow(2)).note()`} />
This method gets really exciting when we use it with a pattern as above. This method gets really exciting when we use it with a pattern as above.
Instead of numbers, scientific interval notation can be used as well: Instead of numbers, scientific interval notation can be used as well:
<MiniRepl tune={`"c2 c3".fast(2).transpose("<1P -2M 4P 3m>".slow(2)).note()`} /> <MiniRepl client:only="react" tune={`"c2 c3".fast(2).transpose("<1P -2M 4P 3m>".slow(2)).note()`} />
### scale(name) ### scale(name)
Turns numbers into notes in the scale (zero indexed). Also sets scale for other scale operations, like scaleTranpose. Turns numbers into notes in the scale (zero indexed). Also sets scale for other scale operations, like scaleTranpose.
<MiniRepl <MiniRepl
client:idle
tune={`"0 2 4 6 4 2" tune={`"0 2 4 6 4 2"
.scale(seq('C2 major', 'C2 minor').slow(2)) .scale(seq('C2 major', 'C2 minor').slow(2))
.note()`} .note()`}
@ -861,6 +880,7 @@ All the available scale names can be found [here](https://github.com/tonaljs/ton
Transposes notes inside the scale by the number of steps: Transposes notes inside the scale by the number of steps:
<MiniRepl <MiniRepl
client:idle
tune={`"-8 [2,4,6]" tune={`"-8 [2,4,6]"
.scale('C4 bebop major') .scale('C4 bebop major')
.scaleTranspose("<0 -1 -2 -3 -4 -5 -6 -4>") .scaleTranspose("<0 -1 -2 -3 -4 -5 -6 -4>")
@ -871,17 +891,18 @@ Transposes notes inside the scale by the number of steps:
Turns chord symbols into voicings, using the smoothest voice leading possible: Turns chord symbols into voicings, using the smoothest voice leading possible:
<MiniRepl tune={`stack("<C^7 A7 Dm7 G7>".voicings('lefthand'), "<C3 A2 D3 G2>").note()`} /> <MiniRepl client:only="react" tune={`stack("<C^7 A7 Dm7 G7>".voicings('lefthand'), "<C3 A2 D3 G2>").note()`} />
### rootNotes(octave = 2) ### rootNotes(octave = 2)
Turns chord symbols into root notes of chords in given octave. Turns chord symbols into root notes of chords in given octave.
<MiniRepl tune={`"<C^7 A7b13 Dm7 G7>".rootNotes(3).note()`} /> <MiniRepl client:only="react" tune={`"<C^7 A7b13 Dm7 G7>".rootNotes(3).note()`} />
Together with layer, struct and voicings, this can be used to create a basic backing track: Together with layer, struct and voicings, this can be used to create a basic backing track:
<MiniRepl <MiniRepl
client:idle
tune={`"<C^7 A7b13 Dm7 G7>".layer( tune={`"<C^7 A7b13 Dm7 G7>".layer(
x => x.voicings('lefthand').struct("~ x").note(), x => x.voicings('lefthand').struct("~ x").note(),
x => x.rootNotes(2).note().s('sawtooth').cutoff(800) x => x.rootNotes(2).note().s('sawtooth').cutoff(800)
@ -901,6 +922,7 @@ Either connect a midi device or use the IAC Driver (Mac) or Midi Through Port (L
If no outputName is given, it uses the first midi output it finds. If no outputName is given, it uses the first midi output it finds.
<MiniRepl <MiniRepl
client:idle
tune={`stack("<C^7 A7 Dm7 G7>".voicings('lefthand'), "<C3 A2 D3 G2>") tune={`stack("<C^7 A7 Dm7 G7>".voicings('lefthand'), "<C3 A2 D3 G2>")
.midi()`} .midi()`}
/> />
@ -931,13 +953,13 @@ Now you're all set!
...or test it here: ...or test it here:
<MiniRepl tune={`s("bd sd").osc()`} /> <MiniRepl client:only="react" tune={`s("bd sd").osc()`} />
If you now hear sound, congratulations! If not, you can get help on the [#strudel channel in the TidalCycles discord](https://discord.com/invite/HGEdXmRkzT). If you now hear sound, congratulations! If not, you can get help on the [#strudel channel in the TidalCycles discord](https://discord.com/invite/HGEdXmRkzT).
### Pattern.osc ### Pattern.osc
<JsDoc name="Pattern.osc" h={0} /> <JsDoc client:idle name="Pattern.osc" h={0} />
## Superdirt Params ## Superdirt Params

2
website/src/styles/index.css
View File

@ -1,3 +1,5 @@
@import '@strudel.cycles/react/dist/style.css';
.cm-gutters { .cm-gutters {
display: none !important; display: none !important;
} }