elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-24 03:58:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1044 from tidalcycles/fix-import

Browse Source 
web package fixes
This commit is contained in:
Felix Roos 2024-05-20 23:26:19 +02:00 committed by GitHub
commit 841d897d0a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 80 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
examples/buildless/headless-simple.html
View File

@ -1,9 +1,31 @@
<!doctype html> <!doctype html>
<script src="https://unpkg.com/@strudel/web@1.0.3"></script> <html>
<button id="play">play</button> <head>
<button id="stop">stop</button> <meta charset="UTF-8" />
<script> <!-- <script src="../../packages/web/dist/index.js"></script> -->
strudel.initStrudel(); <script src="https://unpkg.com/@strudel/web@1.0.3"></script>
document.getElementById('play').addEventListener('click', () => evaluate('note("c a f e").jux(rev)')); </head>
document.getElementById('play').addEventListener('stop', () => hush()); <body style="background: #222">
</script> <button id="play">play</button>
<button id="stop">stop</button>
<script>
strudel.initStrudel();
document.getElementById('play').addEventListener('click', () =>
evaluate(`
//@title washover @by Switch Angel
//@social https://www.instagram.com/_switch_angel/
n("{0 1 3 5 2 }%16")
.add(n(tri.range(0, 6).slow(3)))
.scale("C4:pentatonic")
.sound("sawtooth").att(saw.range(0, 0.05).fast(6))
.release(3).pan(rand).decay(rand.range(0.1, 0.3))
.lpf(tri.range(200, 8000).slow(5)).lpq(0)
.gain(.4).vib(1).vibmod(.1)
.scope({pos:.5})
`),
);
document.getElementById('stop').addEventListener('click', () => strudel.hush());
</script>
</body>
</html>

38
examples/buildless/headless-with-samples.html
View File

@ -1,16 +1,24 @@
<!doctype html> <!doctype html>
<script src="https://unpkg.com/@strudel/web@1.0.3"></script> <html>
<button id="a">A</button> <head>
<button id="b">B</button> <meta charset="UTF-8" />
<button id="c">C</button> <!-- <script src="../../packages/web/dist/index.js"></script> -->
<button id="stop">stop</button> <script src="https://unpkg.com/@strudel/web@1.0.3"></script>
<script> </head>
initStrudel({ <body style="background: #222">
prebake: () => samples('github:tidalcycles/dirt-samples'), <button id="a">A</button>
}); <button id="b">B</button>
const click = (id, action) => document.getElementById(id).addEventListener('click', action); <button id="c">C</button>
click('a', () => evaluate(`s('bd,jvbass(3,8)').jux(rev)`)); <button id="stop">stop</button>
click('b', () => s('bd*2,hh(3,4),jvbass(5,8,1)').jux(rev).play()); <script>
click('c', () => s('bd*2,hh(3,4),jvbass:[0 4](5,8,1)').jux(rev).stack(s('~ sd')).play()); initStrudel({
click('stop', () => hush()); prebake: () => samples('github:tidalcycles/dirt-samples'),
</script> });
const click = (id, action) => document.getElementById(id).addEventListener('click', action);
click('a', () => evaluate(`s('bd,jvbass(3,8)').jux(rev)`));
click('b', () => s('bd*2,hh(3,4),jvbass(5,8,1)').jux(rev).play());
click('c', () => s('bd*2,hh(3,4),jvbass:[0 4](5,8,1)').jux(rev).stack(s('~ sd')).play());
click('stop', () => hush());
</script>
</body>
</html>

11
packages/draw/draw.mjs
View File

@ -191,7 +191,16 @@ export function getComputedPropertyValue(name) {
return getComputedStyle(document.documentElement).getPropertyValue(name); return getComputedStyle(document.documentElement).getPropertyValue(name);
} }
let theme = {}; let theme = {
background: '#222',
foreground: '#75baff',
caret: '#ffcc00',
selection: 'rgba(128, 203, 196, 0.5)',
selectionMatch: '#036dd626',
lineHighlight: '#00000050',
gutterBackground: 'transparent',
gutterForeground: '#8a919966',
};
export function getTheme() { export function getTheme() {
return theme; return theme;
} }

2
packages/draw/pianoroll.mjs
View File

@ -108,7 +108,7 @@ export function pianoroll({
active = getTheme().foreground, active = getTheme().foreground,
background = 'transparent', background = 'transparent',
smear = 0, smear = 0,
playheadColor = 'white', playheadColor = getTheme().foreground,
minMidi = 10, minMidi = 10,
maxMidi = 90, maxMidi = 90,
autorange = 0, autorange = 0,

5
packages/hydra/hydra.mjs
View File

@ -1,5 +1,5 @@
import { getDrawContext } from '@strudel/draw'; import { getDrawContext } from '@strudel/draw';
import { controls } from '@strudel/core'; import { controls, getTime, reify } from '@strudel/core';
let latestOptions; let latestOptions;
let hydra; let hydra;
@ -27,6 +27,7 @@ export async function initHydra(options = {}) {
hydraConfig.canvas = canvas; hydraConfig.canvas = canvas;
await import(/* @vite-ignore */ src); await import(/* @vite-ignore */ src);
/* eslint-disable-next-line */
hydra = new Hydra(hydraConfig); hydra = new Hydra(hydraConfig);
if (feedStrudel) { if (feedStrudel) {
const { canvas } = getDrawContext(); const { canvas } = getDrawContext();
@ -46,4 +47,4 @@ export function clearHydra() {
globalThis.shape = controls.shape; globalThis.shape = controls.shape;
} }
export const H = (p) => () => p.queryArc(getTime(), getTime())[0].value; export const H = (p) => () => reify(p).queryArc(getTime(), getTime())[0].value;

8
packages/web/README.md
View File

@ -72,7 +72,13 @@ document.getElementById('play').addEventListener('stop',
There is a tiny difference between the [Strudel REPL](https://strudel.cc/) and `@strudel/web`. There is a tiny difference between the [Strudel REPL](https://strudel.cc/) and `@strudel/web`.
In the REPL you can use 'single quotes' for regular JS strings and "double quotes" for mini notation patterns. In the REPL you can use 'single quotes' for regular JS strings and "double quotes" for mini notation patterns.
In `@strudel/web`, it does not matter which types of quotes you're using. In `@strudel/web`, it does not matter which types of quotes you're using.
There will probably be an escapte hatch for that in the future.
This difference means that you cannot call pattern methods on raw strings, for example `"1 2 3".slow(2)`.
To make it work you can either:
1. Use the `evaluate` function, which behaves exactly like the Strudel REPL, interpreting double quoted strings as mini notation.
2. wrap the string with `m`: `m("1 2 3").slow(2)`
3. wrap the string in a control function: `n("1 2 3").slow(2)` depending on your context.
## More Examples ## More Examples

7
packages/web/web.mjs
View File

@ -5,7 +5,7 @@ export * from '@strudel/transpiler';
export * from '@strudel/mini'; export * from '@strudel/mini';
export * from '@strudel/tonal'; export * from '@strudel/tonal';
export * from '@strudel/webaudio'; export * from '@strudel/webaudio';
import { Pattern, evalScope } from '@strudel/core'; import { Pattern, evalScope, setTime } from '@strudel/core';
import { initAudioOnFirstClick, registerSynthSounds, webaudioScheduler } from '@strudel/webaudio'; import { initAudioOnFirstClick, registerSynthSounds, webaudioScheduler } from '@strudel/webaudio';
// import { registerSoundfonts } from '@strudel/soundfonts'; // import { registerSoundfonts } from '@strudel/soundfonts';
import { evaluate as _evaluate } from '@strudel/transpiler'; import { evaluate as _evaluate } from '@strudel/transpiler';
@ -33,11 +33,14 @@ export function initStrudel(options = {}) {
miniAllStrings(); miniAllStrings();
const { prebake, ...schedulerOptions } = options; const { prebake, ...schedulerOptions } = options;
scheduler = webaudioScheduler(schedulerOptions);
initDone = (async () => { initDone = (async () => {
await defaultPrebake(); await defaultPrebake();
await prebake?.(); await prebake?.();
return scheduler;
})(); })();
scheduler = webaudioScheduler(schedulerOptions); setTime(() => scheduler.now());
return initDone;
} }
window.initStrudel = initStrudel; window.initStrudel = initStrudel;