+ );
+}
+
+function cx(...classes) {
+ // : Array
+ return classes.filter(Boolean).join(' ');
+}
+
+function s4() {
+ return Math.floor((1 + Math.random()) * 0x10000)
+ .toString(16)
+ .substring(1);
+}
diff --git a/website/src/pages/recipes/recipes-next.mdx b/website/src/pages/recipes/recipes-next.mdx
new file mode 100644
index 000000000..4230063f8
--- /dev/null
+++ b/website/src/pages/recipes/recipes-next.mdx
@@ -0,0 +1,312 @@
+---
+title: Recipes
+layout: ../../layouts/MainLayout.astro
+---
+
+import { MicroRepl } from '../../docs/MicroRepl';
+
+# Recipes
+
+This page shows possible ways to achieve common (or not so common) musical goals.
+There are often many ways to do a thing and there is no right or wrong.
+The fun part is that each representation will give you different impulses when improvising.
+
+## Arpeggios
+
+An arpeggio is when the notes of a chord are played in sequence.
+We can either write the notes by hand:
+
+
+
+...or use scales:
+
+
+
+...or chord symbols:
+
+
+
+...using off:
+
+
+
+## Chopping Breaks
+
+A sample can be looped and chopped like this:
+
+
+
+This fits the break into 8 cycles + chops it in 16 pieces.
+The chops are not audible yet, because we're not doing any manipulation.
+Let's add randmized doubling + reversing:
+
+
+
+If we want to specify the order of samples, we can replace `chop` with `slice`:
+
+")
+ .cut(1).rarely(ply(2))`}
+ punchcard
+/>
+
+If we use `splice` instead of `slice`, the speed adjusts to the duration of the event:
+
+")
+ .cut(1).rarely(ply(2))`}
+ punchcard
+/>
+
+Note that we don't need `fit`, because `splice` will do that by itself.
+
+## Filter Envelopes
+
+A minimal filter envelope looks like this:
+
+ d2")
+ .s("sawtooth")
+ .lpf(400).lpa(.2).lpenv(4)
+ .scope()`}
+/>
+
+We can flip the envelope by setting `lpenv` negative + add some resonance `lpq`:
+
+ d2")
+ .s("sawtooth").lpq(8)
+ .lpf(400).lpa(.2).lpenv(-4)
+ .scope()`}
+/>
+
+## Layering Sounds
+
+We can layer sounds by separating them with ",":
+
+")
+.s("sawtooth, square") // <------
+.scope()`}
+/>
+
+We can control the gain of individual sounds like this:
+
+")
+.s("sawtooth, square:0:.5") // <--- "name:number:gain"
+.scope()`}
+/>
+
+For more control over each voice, we can use `layer`:
+
+").layer(
+ x=>x.s("sawtooth").vib(4),
+ x=>x.s("square").add(note(12))
+).scope()`}
+/>
+
+Here, we give the sawtooth a vibrato and the square is moved an octave up.
+With `layer`, you can use any pattern method available on each voice, so sky is the limit..
+
+## Oscillator Detune
+
+We can fatten a sound by adding a detuned version to itself:
+
+")
+.add(note("0,.1")) // <------ chorus
+.s("sawtooth").scope()`}
+ punchcard
+/>
+
+Try out different values, or add another voice!
+
+## Polyrhythms
+
+Here is a simple example of a polyrhythm:
+
+
+
+A polyrhythm is when 2 different tempos happen at the same time.
+
+## Polymeter
+
+This is a polymeter:
+
+,").fast(2)`} punchcard />
+
+A polymeter is when 2 different bar lengths play at the same tempo.
+
+## Phasing
+
+This is a phasing:
+
+*[6,6.1]").piano()`} punchcard />
+
+Phasing happens when the same sequence plays at slightly different tempos.
+
+## Running through samples
+
+Using `run` with `n`, we can rush through a sample bank:
+
+
+
+This works great with sample banks that contain similar sounds, like in this case different recordings of a tabla.
+Often times, you'll hear the beginning of the phrase not where the pattern begins.
+In this case, I hear the beginning at the third sample, which can be accounted for with `early`.
+
+
+
+Let's add some randomness:
+
+
+
+## Tape Warble
+
+We can emulate a pitch warbling effect like this:
+
+
+
+## Sound Duration
+
+There are a number of ways to change the sound duration. Using clip:
+
+/2")`}
+/>
+
+The value of clip is relative to the duration of each event.
+We can also create overlaps using release:
+
+/2")`}
+/>
+
+This will smoothly fade out each sound for the given number of seconds.
+We could also make the notes shorter with decay / sustain:
+
+/2").sustain(0)`}
+/>
+
+For now, there is a limitation where decay values that exceed the event duration may cause little cracks, so use higher numbers with caution..
+
+When using samples, we also have `.end` to cut relative to the sample length:
+
+")`} />
+
+Compare that to clip:
+
+")`} />
+
+or decay / sustain
+
+").sustain(0)`} />
+
+## Wavetable Synthesis
+
+You can loop a sample with `loop` / `loopEnd`:
+
+").s("bd").loop(1).loopEnd(.05).gain(.2)`} />
+
+This allows us to play the first 5% of the bass drum as a synth!
+To simplify loading wavetables, any sample that starts with `wt_` will be looped automatically:
+
+
+
+Running through different wavetables can also give interesting variations:
+
+
+
+...adding a filter envelope + reverb:
+
+
diff --git a/website/src/pages/vanilla/index.astro b/website/src/pages/vanilla/index.astro
index 44144bb64..d4ea40b84 100644
--- a/website/src/pages/vanilla/index.astro
+++ b/website/src/pages/vanilla/index.astro
@@ -1,10 +1,5 @@
----
-import HeadCommonNew from '../../components/HeadCommonNew.astro';
----
-
- Strudel Vanilla REPL
@@ -90,7 +85,8 @@ import HeadCommonNew from '../../components/HeadCommonNew.astro';
-
+
+
diff --git a/website/src/repl/vanilla/vanilla.css b/website/src/repl/vanilla/vanilla.css
index 584dd924d..5387fb04b 100644
--- a/website/src/repl/vanilla/vanilla.css
+++ b/website/src/repl/vanilla/vanilla.css
@@ -12,7 +12,7 @@ select {
html,
body,
-#code,
+#editor,
.cm-editor,
.cm-scroller {
padding: 0;
diff --git a/website/src/repl/vanilla/vanilla.mjs b/website/src/repl/vanilla/vanilla.mjs
index 488fcf8c4..6f0cc0585 100644
--- a/website/src/repl/vanilla/vanilla.mjs
+++ b/website/src/repl/vanilla/vanilla.mjs
@@ -1,94 +1,12 @@
-import { logger, getDrawContext, silence, controls, evalScope, hash2code, code2hash } from '@strudel.cycles/core';
-import { StrudelMirror, initTheme, activateTheme } from '@strudel/codemirror';
-import { transpiler } from '@strudel.cycles/transpiler';
-import {
- getAudioContext,
- webaudioOutput,
- registerSynthSounds,
- registerZZFXSounds,
- samples,
-} from '@strudel.cycles/webaudio';
+import { hash2code, logger } from '@strudel.cycles/core';
+import { codemirrorSettings, defaultSettings } from '@strudel/codemirror';
import './vanilla.css';
let editor;
-const initialSettings = {
- keybindings: 'codemirror',
- isLineNumbersDisplayed: true,
- isActiveLineHighlighted: true,
- isAutoCompletionEnabled: false,
- isPatternHighlightingEnabled: true,
- isFlashEnabled: true,
- isTooltipEnabled: false,
- isLineWrappingEnabled: false,
- theme: 'teletext',
- fontFamily: 'monospace',
- fontSize: 18,
-};
-initTheme(initialSettings.theme);
async function run() {
- const container = document.getElementById('code');
- if (!container) {
- console.warn('could not init: no container found');
- return;
- }
-
- const drawContext = getDrawContext();
- const drawTime = [-2, 2];
- editor = new StrudelMirror({
- defaultOutput: webaudioOutput,
- getTime: () => getAudioContext().currentTime,
- transpiler,
- root: container,
- initialCode: '// LOADING',
- pattern: silence,
- settings: initialSettings,
- drawTime,
- onDraw: (haps, time, frame, painters) => {
- painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2);
- painters?.forEach((painter) => {
- // ctx time haps drawTime paintOptions
- painter(drawContext, time, haps, drawTime, { clear: false });
- });
- },
- prebake: async () => {
- // populate scope / lazy load modules
- const modulesLoading = evalScope(
- import('@strudel.cycles/core'),
- import('@strudel.cycles/tonal'),
- import('@strudel.cycles/mini'),
- // import('@strudel.cycles/xen'),
- import('@strudel.cycles/webaudio'),
- import('@strudel/codemirror'),
- /* import('@strudel/hydra'), */
- // import('@strudel.cycles/serial'),
- /* import('@strudel.cycles/soundfonts'), */
- // import('@strudel.cycles/csound'),
- /* import('@strudel.cycles/midi'), */
- // import('@strudel.cycles/osc'),
- controls, // sadly, this cannot be exported from core directly (yet)
- );
- // load samples
- const ds = 'https://raw.githubusercontent.com/felixroos/dough-samples/main/';
- await Promise.all([
- modulesLoading,
- registerSynthSounds(),
- registerZZFXSounds(),
- samples(`${ds}/tidal-drum-machines.json`),
- samples(`${ds}/piano.json`),
- samples(`${ds}/Dirt-Samples.json`),
- samples(`${ds}/EmuSP12.json`),
- samples(`${ds}/vcsl.json`),
- ]);
- },
- afterEval: ({ code }) => {
- window.location.hash = '#' + code2hash(code);
- },
- });
-
- // init settings
- editor.updateSettings(initialSettings);
-
+ const repl = document.getElementById('editor');
+ editor = repl.editor;
logger(`Welcome to Strudel! Click into the editor and then hit ctrl+enter to run the code!`, 'highlight');
const codeParam = window.location.href.split('#')[1] || '';
@@ -192,11 +110,8 @@ function setFormValues(form, values) {
}
const form = document.querySelector('form[name=settings]');
-setFormValues(form, initialSettings);
+setFormValues(form, codemirrorSettings.get());
form.addEventListener('change', () => {
- const values = getFormValues(form, initialSettings);
- // console.log('values', values);
- editor.updateSettings(values);
- // TODO: only activateTheme when it changes
- activateTheme(values.theme);
+ const values = getFormValues(form, defaultSettings);
+ editor?.updateSettings(values);
});