mirror of
https://github.com/eliasstepanik/strudel.git
synced 2026-01-11 21:58:37 +00:00
simplify writing mdx files
This commit is contained in:
Felix Roos
parent
d0013f55a2
commit
b8f991eddb
@ -1,25 +1,35 @@
|
||||
import { evalScope, controls } from '@strudel.cycles/core';
|
||||
import { MiniRepl as _MiniRepl } from '@strudel.cycles/react';
|
||||
import { samples } from '@strudel.cycles/webaudio';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
fetch('https://strudel.tidalcycles.org/EmuSP12.json')
|
||||
.then((res) => res.json())
|
||||
.then((json) => samples(json, 'https://strudel.tidalcycles.org/EmuSP12/'));
|
||||
if (typeof window !== 'undefined') {
|
||||
fetch('https://strudel.tidalcycles.org/EmuSP12.json')
|
||||
.then((res) => res.json())
|
||||
.then((json) => samples(json, 'https://strudel.tidalcycles.org/EmuSP12/'));
|
||||
|
||||
evalScope(
|
||||
controls,
|
||||
import('@strudel.cycles/core'),
|
||||
// import('@strudel.cycles/tone'),
|
||||
import('@strudel.cycles/tonal'),
|
||||
import('@strudel.cycles/mini'),
|
||||
import('@strudel.cycles/midi'),
|
||||
import('@strudel.cycles/xen'),
|
||||
import('@strudel.cycles/webaudio'),
|
||||
import('@strudel.cycles/osc'),
|
||||
);
|
||||
evalScope(
|
||||
controls,
|
||||
import('@strudel.cycles/core'),
|
||||
// import('@strudel.cycles/tone'),
|
||||
import('@strudel.cycles/tonal'),
|
||||
import('@strudel.cycles/mini'),
|
||||
import('@strudel.cycles/midi'),
|
||||
import('@strudel.cycles/xen'),
|
||||
import('@strudel.cycles/webaudio'),
|
||||
import('@strudel.cycles/osc'),
|
||||
);
|
||||
}
|
||||
|
||||
// prebake();
|
||||
|
||||
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>;
|
||||
}
|
||||
|
||||
@ -36,11 +36,14 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
|
||||
<Header currentPage={currentPage} />
|
||||
</header>
|
||||
<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}>
|
||||
<slot />
|
||||
</PageContent>
|
||||
</main>
|
||||
</div>
|
||||
<aside class="w-2xl flex-none h-full overflow-auto px-4" title="Table of Contents">
|
||||
<RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
|
||||
</aside>
|
||||
|
||||
@ -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 }} />
|
||||
@ -1,9 +1,12 @@
|
||||
---
|
||||
title: What is Strudel?
|
||||
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?
|
||||
|
||||
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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`samples({
|
||||
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'],
|
||||
@ -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 `#`.
|
||||
|
||||
<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!
|
||||
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:
|
||||
|
||||
<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.
|
||||
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
|
||||
|
||||
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).
|
||||
|
||||
@ -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`:
|
||||
|
||||
<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:
|
||||
|
||||
<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`!
|
||||
|
||||
@ -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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`note("a3 c#4 e4 a4")
|
||||
.s("sawtooth")
|
||||
.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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`note(\`[
|
||||
[
|
||||
[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:
|
||||
|
||||
<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.
|
||||
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:
|
||||
|
||||
<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.
|
||||
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:
|
||||
|
||||
<MiniRepl tune={`note("<e5 b4 d5 c5>")`} />
|
||||
<MiniRepl client:only="react" tune={`note("<e5 b4 d5 c5>")`} />
|
||||
|
||||
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.
|
||||
|
||||
@ -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:
|
||||
|
||||
<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.
|
||||
|
||||
@ -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:
|
||||
|
||||
<MiniRepl tune={`note("e5 [b4 c5] d5 [c5 b4]")`} />
|
||||
<MiniRepl client:only="react" tune={`note("e5 [b4 c5] d5 [c5 b4]")`} />
|
||||
|
||||
## Rests
|
||||
|
||||
The "~" represents a rest:
|
||||
|
||||
<MiniRepl tune={`note("[b4 [~ c5] d5 e5]")`} />
|
||||
<MiniRepl client:only="react" tune={`note("[b4 [~ c5] d5 e5]")`} />
|
||||
|
||||
## Parallel
|
||||
|
||||
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:
|
||||
|
||||
<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
|
||||
|
||||
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.
|
||||
|
||||
@ -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:
|
||||
|
||||
<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`.
|
||||
|
||||
@ -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)",
|
||||
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 />
|
||||
|
||||
@ -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.
|
||||
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.
|
||||
|
||||
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:
|
||||
|
||||
<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!
|
||||
`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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`note("c2 <eb2 <g2 g1>>").s('sawtooth')
|
||||
.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:
|
||||
|
||||
<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)
|
||||
|
||||
@ -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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`samples({
|
||||
bd: 'bd/BT0AADA.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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`samples({
|
||||
bd: 'bd/BT0AADA.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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`samples({
|
||||
bd: ['bd/BT0AADA.wav','bd/BT0AAD0.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`:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`samples({
|
||||
bd: ['bd/BT0AADA.wav','bd/BT0AAD0.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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`samples({
|
||||
'gtr': 'gtr/0001_cleanC.wav',
|
||||
}, '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)`:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`samples({
|
||||
'gtr': 'gtr/0001_cleanC.wav',
|
||||
}, '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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`samples({
|
||||
'gtr': 'gtr/0001_cleanC.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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`samples({
|
||||
'moog': {
|
||||
'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
|
||||
|
||||
<JsDoc name="Pattern.begin" h={0} />
|
||||
<JsDoc client:idle name="Pattern.begin" h={0} />
|
||||
|
||||
### Pattern.end
|
||||
|
||||
<JsDoc name="Pattern.end" h={0} />
|
||||
<JsDoc client:idle name="Pattern.end" h={0} />
|
||||
|
||||
### Pattern.loopAt
|
||||
|
||||
<JsDoc name="Pattern.loopAt" h={0} />
|
||||
<JsDoc client:idle name="Pattern.loopAt" h={0} />
|
||||
|
||||
### Pattern.chop
|
||||
|
||||
<JsDoc name="Pattern.chop" h={0} />
|
||||
<JsDoc client:idle name="Pattern.chop" h={0} />
|
||||
|
||||
## Audio Effects
|
||||
|
||||
@ -431,55 +446,55 @@ Wether you're using a synth or a sample, you can apply these effects:
|
||||
|
||||
### gain
|
||||
|
||||
<JsDoc name="gain" h={0} />
|
||||
<JsDoc client:idle name="gain" h={0} />
|
||||
|
||||
### velocity
|
||||
|
||||
<JsDoc name="velocity" h={0} />
|
||||
<JsDoc client:idle name="velocity" h={0} />
|
||||
|
||||
### cutoff
|
||||
|
||||
<JsDoc name="cutoff" h={0} />
|
||||
<JsDoc client:idle name="cutoff" h={0} />
|
||||
|
||||
### resonance
|
||||
|
||||
<JsDoc name="resonance" h={0} />
|
||||
<JsDoc client:idle name="resonance" h={0} />
|
||||
|
||||
### hcutoff
|
||||
|
||||
<JsDoc name="hcutoff" h={0} />
|
||||
<JsDoc client:idle name="hcutoff" h={0} />
|
||||
|
||||
### hresonance
|
||||
|
||||
<JsDoc name="hresonance" h={0} />
|
||||
<JsDoc client:idle name="hresonance" h={0} />
|
||||
|
||||
### bandf
|
||||
|
||||
<JsDoc name="bandf" h={0} />
|
||||
<JsDoc client:idle name="bandf" h={0} />
|
||||
|
||||
### bandq
|
||||
|
||||
<JsDoc name="bandq" h={0} />
|
||||
<JsDoc client:idle name="bandq" h={0} />
|
||||
|
||||
### vowel
|
||||
|
||||
<JsDoc name="vowel" h={0} />
|
||||
<JsDoc client:idle name="vowel" h={0} />
|
||||
|
||||
### pan
|
||||
|
||||
<JsDoc name="pan" h={0} />
|
||||
<JsDoc client:idle name="pan" h={0} />
|
||||
|
||||
### coarse
|
||||
|
||||
<JsDoc name="coarse" h={0} />
|
||||
<JsDoc client:idle name="coarse" h={0} />
|
||||
|
||||
### shape
|
||||
|
||||
<JsDoc name="shape" h={0} />
|
||||
<JsDoc client:idle name="shape" h={0} />
|
||||
|
||||
### crush
|
||||
|
||||
<JsDoc name="crush" h={0} />
|
||||
<JsDoc client:idle name="crush" h={0} />
|
||||
|
||||
<br />
|
||||
|
||||
@ -490,11 +505,11 @@ Internally, the mini notation will expand to use the actual functional JavaScrip
|
||||
|
||||
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:
|
||||
|
||||
<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.
|
||||
|
||||
@ -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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`stack(
|
||||
note("c2 eb2(3,8)").s('sawtooth').cutoff(800),
|
||||
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:
|
||||
|
||||
<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:
|
||||
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 tune={`note(seq('d4', 'f#4', 'a4'))`} />
|
||||
<MiniRepl client:only="react" tune={`note(seq('d4', 'f#4', 'a4'))`} />
|
||||
|
||||
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.
|
||||
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!
|
||||
|
||||
@ -545,25 +561,26 @@ The following functions will return a pattern.
|
||||
|
||||
### cat
|
||||
|
||||
<JsDoc name="cat" h={0} />
|
||||
<JsDoc client:idle name="cat" h={0} />
|
||||
|
||||
### seq
|
||||
|
||||
<JsDoc name="seq" h={0} />
|
||||
<JsDoc client:idle name="seq" h={0} />
|
||||
|
||||
### stack
|
||||
|
||||
<JsDoc name="stack" h={0} />
|
||||
<JsDoc client:idle name="stack" h={0} />
|
||||
|
||||
### timeCat
|
||||
|
||||
<JsDoc name="timeCat" h={0} />
|
||||
<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),
|
||||
@ -575,6 +592,7 @@ You can freely mix JS patterns, mini patterns and values! For example, this patt
|
||||
...is equivalent to:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`cat(
|
||||
"g3,b3,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:
|
||||
|
||||
<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: \* / ! @.
|
||||
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
|
||||
|
||||
<JsDoc name="Pattern.slow" h={0} />
|
||||
<JsDoc client:idle name="Pattern.slow" h={0} />
|
||||
|
||||
### Pattern.fast
|
||||
|
||||
<JsDoc name="Pattern.fast" h={0} />
|
||||
<JsDoc client:idle name="Pattern.fast" h={0} />
|
||||
|
||||
### Pattern.early
|
||||
|
||||
<JsDoc name="Pattern.early" h={0} />
|
||||
<JsDoc client:idle name="Pattern.early" h={0} />
|
||||
|
||||
### Pattern.late
|
||||
|
||||
<JsDoc name="Pattern.late" h={0} />
|
||||
<JsDoc client:idle name="Pattern.late" h={0} />
|
||||
|
||||
### Pattern.legato
|
||||
|
||||
<JsDoc name="Pattern.legato" h={0} />
|
||||
<JsDoc client:idle name="Pattern.legato" h={0} />
|
||||
|
||||
### Pattern.struct
|
||||
|
||||
<JsDoc name="Pattern.struct" h={0} />
|
||||
<JsDoc client:idle name="Pattern.struct" h={0} />
|
||||
|
||||
### Pattern.euclid
|
||||
|
||||
<JsDoc name="Pattern.euclid" h={0} />
|
||||
<JsDoc client:idle name="Pattern.euclid" h={0} />
|
||||
|
||||
### Pattern.euclidLegato
|
||||
|
||||
<JsDoc name="Pattern.euclidLegato" h={0} />
|
||||
<JsDoc client:idle name="Pattern.euclidLegato" h={0} />
|
||||
|
||||
### Pattern.rev
|
||||
|
||||
<JsDoc name="Pattern.rev" h={0} />
|
||||
<JsDoc client:idle name="Pattern.rev" h={0} />
|
||||
|
||||
### Pattern.iter
|
||||
|
||||
<JsDoc name="Pattern.iter" h={0} />
|
||||
<JsDoc client:idle name="Pattern.iter" h={0} />
|
||||
|
||||
### Pattern.iterBack
|
||||
|
||||
<JsDoc name="Pattern.iterBack" h={0} />
|
||||
<JsDoc client:idle name="Pattern.iterBack" h={0} />
|
||||
|
||||
## Conditional Modifiers
|
||||
|
||||
### Pattern.every
|
||||
|
||||
<JsDoc name="Pattern.every" h={0} />
|
||||
<JsDoc client:idle name="Pattern.every" h={0} />
|
||||
|
||||
### Pattern.when
|
||||
|
||||
<JsDoc name="Pattern.when" h={0} />
|
||||
<JsDoc client:idle name="Pattern.when" h={0} />
|
||||
|
||||
## Accumulation Modifiers
|
||||
|
||||
### Pattern.stack
|
||||
|
||||
<JsDoc name="Pattern.stack" h={0} />
|
||||
<JsDoc client:idle name="Pattern.stack" h={0} />
|
||||
|
||||
### Pattern.superimpose
|
||||
|
||||
<JsDoc name="Pattern.superimpose" h={0} />
|
||||
<JsDoc client:idle name="Pattern.superimpose" h={0} />
|
||||
|
||||
### Pattern.layer
|
||||
|
||||
<JsDoc name="Pattern.layer" h={0} />
|
||||
<JsDoc client:idle name="Pattern.layer" h={0} />
|
||||
|
||||
### Pattern.off
|
||||
|
||||
<JsDoc name="Pattern.off" h={0} />
|
||||
<JsDoc client:idle name="Pattern.off" h={0} />
|
||||
|
||||
### Pattern.echo
|
||||
|
||||
<JsDoc name="Pattern.echo" h={0} />
|
||||
<JsDoc client:idle name="Pattern.echo" h={0} />
|
||||
|
||||
### Pattern.echoWith
|
||||
|
||||
<JsDoc name="Pattern.echoWith" h={0} />
|
||||
<JsDoc client:idle name="Pattern.echoWith" h={0} />
|
||||
|
||||
## Concat Modifiers
|
||||
|
||||
### Pattern.seq
|
||||
|
||||
<JsDoc name="Pattern.seq" h={0} />
|
||||
<JsDoc client:idle name="Pattern.seq" h={0} />
|
||||
|
||||
### Pattern.cat
|
||||
|
||||
<JsDoc name="Pattern.cat" h={0} />
|
||||
<JsDoc client:idle name="Pattern.cat" h={0} />
|
||||
|
||||
## Value Modifiers
|
||||
|
||||
### Pattern.add
|
||||
|
||||
<JsDoc name="Pattern.add" h={0} />
|
||||
<JsDoc client:idle name="Pattern.add" h={0} />
|
||||
|
||||
### Pattern.sub
|
||||
|
||||
<JsDoc name="Pattern.sub" h={0} />
|
||||
<JsDoc client:idle name="Pattern.sub" h={0} />
|
||||
|
||||
### Pattern.mul
|
||||
|
||||
<JsDoc name="Pattern.mul" h={0} />
|
||||
<JsDoc client:idle name="Pattern.mul" h={0} />
|
||||
|
||||
### Pattern.div
|
||||
|
||||
<JsDoc name="Pattern.div" h={0} />
|
||||
<JsDoc client:idle name="Pattern.div" h={0} />
|
||||
|
||||
### Pattern.round
|
||||
|
||||
<JsDoc name="Pattern.round" h={0} />
|
||||
<JsDoc client:idle name="Pattern.round" h={0} />
|
||||
|
||||
### Pattern.apply
|
||||
|
||||
<JsDoc name="Pattern.apply" h={0} />
|
||||
<JsDoc client:idle name="Pattern.apply" h={0} />
|
||||
|
||||
### Pattern.range
|
||||
|
||||
<JsDoc name="Pattern.range" h={0} />
|
||||
<JsDoc client:idle name="Pattern.range" h={0} />
|
||||
|
||||
### Pattern.chunk
|
||||
|
||||
<JsDoc name="Pattern.chunk" h={0} />
|
||||
<JsDoc client:idle name="Pattern.chunk" h={0} />
|
||||
|
||||
### Pattern.chunkBack
|
||||
|
||||
<JsDoc name="Pattern.chunkBack" h={0} />
|
||||
<JsDoc client:idle name="Pattern.chunkBack" h={0} />
|
||||
|
||||
## Continuous Signals
|
||||
|
||||
@ -729,23 +747,23 @@ They can provide streams of numbers that can be sampled at discrete points in ti
|
||||
|
||||
### saw
|
||||
|
||||
<JsDoc name="saw" h={0} />
|
||||
<JsDoc client:idle name="saw" h={0} />
|
||||
|
||||
### sine
|
||||
|
||||
<JsDoc name="sine" h={0} />
|
||||
<JsDoc client:idle name="sine" h={0} />
|
||||
|
||||
### cosine
|
||||
|
||||
<JsDoc name="cosine" h={0} />
|
||||
<JsDoc client:idle name="cosine" h={0} />
|
||||
|
||||
### tri
|
||||
|
||||
<JsDoc name="tri" h={0} />
|
||||
<JsDoc client:idle name="tri" h={0} />
|
||||
|
||||
### square
|
||||
|
||||
<JsDoc name="square" h={0} />
|
||||
<JsDoc client:idle name="square" h={0} />
|
||||
|
||||
### Ranges from -1 to 1
|
||||
|
||||
@ -753,15 +771,15 @@ There is also `saw2`, `sine2`, `cosine2`, `tri2` and `square2` which have a rang
|
||||
|
||||
### rand
|
||||
|
||||
<JsDoc name="rand" h={0} />
|
||||
<JsDoc client:idle name="rand" h={0} />
|
||||
|
||||
### perlin
|
||||
|
||||
<JsDoc name="perlin" h={0} />
|
||||
<JsDoc client:idle name="perlin" h={0} />
|
||||
|
||||
### irand
|
||||
|
||||
<JsDoc name="irand" h={0} />
|
||||
<JsDoc client:idle name="irand" h={0} />
|
||||
|
||||
## Random Modifiers
|
||||
|
||||
@ -769,59 +787,59 @@ These methods add random behavior to your Patterns.
|
||||
|
||||
### chooseCycles
|
||||
|
||||
<JsDoc name="chooseCycles" h={0} />
|
||||
<JsDoc client:idle name="chooseCycles" h={0} />
|
||||
|
||||
### Pattern.degradeBy
|
||||
|
||||
<JsDoc name="Pattern.degradeBy" h={0} />
|
||||
<JsDoc client:idle name="Pattern.degradeBy" h={0} />
|
||||
|
||||
### Pattern.degrade
|
||||
|
||||
<JsDoc name="Pattern.degrade" h={0} />
|
||||
<JsDoc client:idle name="Pattern.degrade" h={0} />
|
||||
|
||||
### Pattern.undegradeBy
|
||||
|
||||
<JsDoc name="Pattern.undegradeBy" h={0} />
|
||||
<JsDoc client:idle name="Pattern.undegradeBy" h={0} />
|
||||
|
||||
### Pattern.sometimesBy
|
||||
|
||||
<JsDoc name="Pattern.sometimesBy" h={0} />
|
||||
<JsDoc client:idle name="Pattern.sometimesBy" h={0} />
|
||||
|
||||
### Pattern.sometimes
|
||||
|
||||
<JsDoc name="Pattern.sometimes" h={0} />
|
||||
<JsDoc client:idle name="Pattern.sometimes" h={0} />
|
||||
|
||||
### Pattern.someCyclesBy
|
||||
|
||||
<JsDoc name="Pattern.someCyclesBy" h={0} />
|
||||
<JsDoc client:idle name="Pattern.someCyclesBy" h={0} />
|
||||
|
||||
### Pattern.someCycles
|
||||
|
||||
<JsDoc name="Pattern.someCycles" h={0} />
|
||||
<JsDoc client:idle name="Pattern.someCycles" h={0} />
|
||||
|
||||
### Pattern.often
|
||||
|
||||
<JsDoc name="Pattern.often" h={0} />
|
||||
<JsDoc client:idle name="Pattern.often" h={0} />
|
||||
|
||||
### Pattern.rarely
|
||||
|
||||
<JsDoc name="Pattern.rarely" h={0} />
|
||||
<JsDoc client:idle name="Pattern.rarely" h={0} />
|
||||
|
||||
### Pattern.almostNever
|
||||
|
||||
<JsDoc name="Pattern.almostNever" h={0} />
|
||||
<JsDoc client:idle name="Pattern.almostNever" h={0} />
|
||||
|
||||
### Pattern.almostAlways
|
||||
|
||||
<JsDoc name="Pattern.almostAlways" h={0} />
|
||||
<JsDoc client:idle name="Pattern.almostAlways" h={0} />
|
||||
|
||||
### Pattern.never
|
||||
|
||||
<JsDoc name="Pattern.never" h={0} />
|
||||
<JsDoc client:idle name="Pattern.never" h={0} />
|
||||
|
||||
### Pattern.always
|
||||
|
||||
<JsDoc name="Pattern.always" h={0} />
|
||||
<JsDoc client:idle name="Pattern.always" h={0} />
|
||||
|
||||
<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:
|
||||
|
||||
<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.
|
||||
|
||||
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)
|
||||
|
||||
Turns numbers into notes in the scale (zero indexed). Also sets scale for other scale operations, like scaleTranpose.
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`"0 2 4 6 4 2"
|
||||
.scale(seq('C2 major', 'C2 minor').slow(2))
|
||||
.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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`"-8 [2,4,6]"
|
||||
.scale('C4 bebop major')
|
||||
.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:
|
||||
|
||||
<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)
|
||||
|
||||
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:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`"<C^7 A7b13 Dm7 G7>".layer(
|
||||
x => x.voicings('lefthand').struct("~ x").note(),
|
||||
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.
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`stack("<C^7 A7 Dm7 G7>".voicings('lefthand'), "<C3 A2 D3 G2>")
|
||||
.midi()`}
|
||||
/>
|
||||
@ -931,13 +953,13 @@ Now you're all set!
|
||||
|
||||
...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).
|
||||
|
||||
### Pattern.osc
|
||||
|
||||
<JsDoc name="Pattern.osc" h={0} />
|
||||
<JsDoc client:idle name="Pattern.osc" h={0} />
|
||||
|
||||
## Superdirt Params
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import '@strudel.cycles/react/dist/style.css';
|
||||
|
||||
.cm-gutters {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user