mirror of
https://github.com/eliasstepanik/strudel-docker.git
synced 2026-01-11 05:38:34 +00:00
basic scheduling
This commit is contained in:
Felix Roos
parent
71a3bdfeac
commit
df865e323d
76
repl/package-lock.json
generated
76
repl/package-lock.json
generated
@ -6,7 +6,8 @@
|
||||
"": {
|
||||
"dependencies": {
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
"react-dom": "^17.0.2",
|
||||
"tone": "^14.7.77"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@snowpack/plugin-dotenv": "^2.1.0",
|
||||
@ -315,7 +316,6 @@
|
||||
"version": "7.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.0.tgz",
|
||||
"integrity": "sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
},
|
||||
@ -2010,6 +2010,18 @@
|
||||
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/automation-events": {
|
||||
"version": "4.0.12",
|
||||
"resolved": "https://registry.npmjs.org/automation-events/-/automation-events-4.0.12.tgz",
|
||||
"integrity": "sha512-7tu7q/rw3vFuAwjBoarCGql3V0HkC5QAbZUYhOblxxkHzdLUTjVotm0iaIRwiCSqxMeoFK64LrgaSCuSZguvGA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.16.7",
|
||||
"tslib": "^2.3.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.20.1"
|
||||
}
|
||||
},
|
||||
"node_modules/autoprefixer": {
|
||||
"version": "10.4.2",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
|
||||
@ -6717,8 +6729,7 @@
|
||||
"node_modules/regenerator-runtime": {
|
||||
"version": "0.13.9",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
|
||||
},
|
||||
"node_modules/request": {
|
||||
"version": "2.88.2",
|
||||
@ -7451,6 +7462,16 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/standardized-audio-context": {
|
||||
"version": "25.3.20",
|
||||
"resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.20.tgz",
|
||||
"integrity": "sha512-c6eMQXmN7iDS7ROuSqOrHQhxpazerJSnRHEJiKD8YkruZBTt/a5E7zmk+KkStoi0dohFAod8wvwWxc7S1gmdig==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.17.0",
|
||||
"automation-events": "^4.0.12",
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/statuses": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
|
||||
@ -7831,6 +7852,15 @@
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/tone": {
|
||||
"version": "14.7.77",
|
||||
"resolved": "https://registry.npmjs.org/tone/-/tone-14.7.77.tgz",
|
||||
"integrity": "sha512-tCfK73IkLHyzoKUvGq47gyDyxiKLFvKiVCOobynGgBB9Dl0NkxTM2p+eRJXyCYrjJwy9Y0XCMqD3uOYsYt2Fdg==",
|
||||
"dependencies": {
|
||||
"standardized-audio-context": "^25.1.8",
|
||||
"tslib": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/tough-cookie": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
|
||||
@ -7865,8 +7895,7 @@
|
||||
"node_modules/tslib": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
|
||||
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
|
||||
},
|
||||
"node_modules/tsscmp": {
|
||||
"version": "1.0.6",
|
||||
@ -8592,7 +8621,6 @@
|
||||
"version": "7.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.0.tgz",
|
||||
"integrity": "sha512-etcO/ohMNaNA2UBdaXBBSX/3aEzFMRrVfaPv8Ptc0k+cWpWW0QFiGZ2XnVqQZI1Cf734LbPGmqBKWESfW4x/dQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.4"
|
||||
}
|
||||
@ -10009,6 +10037,15 @@
|
||||
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
|
||||
"dev": true
|
||||
},
|
||||
"automation-events": {
|
||||
"version": "4.0.12",
|
||||
"resolved": "https://registry.npmjs.org/automation-events/-/automation-events-4.0.12.tgz",
|
||||
"integrity": "sha512-7tu7q/rw3vFuAwjBoarCGql3V0HkC5QAbZUYhOblxxkHzdLUTjVotm0iaIRwiCSqxMeoFK64LrgaSCuSZguvGA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.16.7",
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"autoprefixer": {
|
||||
"version": "10.4.2",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
|
||||
@ -13552,8 +13589,7 @@
|
||||
"regenerator-runtime": {
|
||||
"version": "0.13.9",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
|
||||
},
|
||||
"request": {
|
||||
"version": "2.88.2",
|
||||
@ -14102,6 +14138,16 @@
|
||||
"minipass": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"standardized-audio-context": {
|
||||
"version": "25.3.20",
|
||||
"resolved": "https://registry.npmjs.org/standardized-audio-context/-/standardized-audio-context-25.3.20.tgz",
|
||||
"integrity": "sha512-c6eMQXmN7iDS7ROuSqOrHQhxpazerJSnRHEJiKD8YkruZBTt/a5E7zmk+KkStoi0dohFAod8wvwWxc7S1gmdig==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.17.0",
|
||||
"automation-events": "^4.0.12",
|
||||
"tslib": "^2.3.1"
|
||||
}
|
||||
},
|
||||
"statuses": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
|
||||
@ -14397,6 +14443,15 @@
|
||||
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
|
||||
"dev": true
|
||||
},
|
||||
"tone": {
|
||||
"version": "14.7.77",
|
||||
"resolved": "https://registry.npmjs.org/tone/-/tone-14.7.77.tgz",
|
||||
"integrity": "sha512-tCfK73IkLHyzoKUvGq47gyDyxiKLFvKiVCOobynGgBB9Dl0NkxTM2p+eRJXyCYrjJwy9Y0XCMqD3uOYsYt2Fdg==",
|
||||
"requires": {
|
||||
"standardized-audio-context": "^25.1.8",
|
||||
"tslib": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"tough-cookie": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
|
||||
@ -14425,8 +14480,7 @@
|
||||
"tslib": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
|
||||
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
|
||||
},
|
||||
"tsscmp": {
|
||||
"version": "1.0.6",
|
||||
|
||||
@ -8,7 +8,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
"react-dom": "^17.0.2",
|
||||
"tone": "^14.7.77"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@snowpack/plugin-dotenv": "^2.1.0",
|
||||
|
||||
@ -1,31 +1,69 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
||||
import logo from './logo.svg';
|
||||
import * as strudel from '../../strudel.mjs';
|
||||
import cx from './cx';
|
||||
import * as Tone from 'tone';
|
||||
import useCycle from './useCycle';
|
||||
import type { Hap, Pattern } from './types';
|
||||
|
||||
const { Fraction, TimeSpan } = strudel;
|
||||
|
||||
const fr = (v: number) => new Fraction(v);
|
||||
const ts = (start: number, end: number) => new TimeSpan(fr(start), fr(end));
|
||||
const parse = (code: string): Pattern<any> => {
|
||||
const { sequence, stack, pure } = strudel; // make available to eval
|
||||
const parse = (code: string): Pattern => {
|
||||
const { sequence, stack, pure, slowcat, slow } = strudel; // make available to eval
|
||||
return eval(code);
|
||||
};
|
||||
|
||||
const synth = new Tone.Synth().toDestination();
|
||||
|
||||
function App() {
|
||||
const [code, setCode] = useState<string>("sequence('a', 'b', sequence('c', 'd'))");
|
||||
const [events, setEvents] = useState<Hap<any>[]>([]);
|
||||
const [code, setCode] = useState<string>(
|
||||
// "sequence('c3', 'eb3', sequence('g3', 'f3'))" //
|
||||
"slow(sequence('c3', 'eb3', sequence('g3', 'f3')), 'g3')" //
|
||||
);
|
||||
const [log, setLog] = useState('');
|
||||
const logBox = useRef<any>();
|
||||
const [error, setError] = useState<Error>();
|
||||
const [pattern, setPattern] = useState<Pattern>();
|
||||
// logs events of cycle
|
||||
const logCycle = (_events: any, cycle: any) => {
|
||||
if (_events.length) {
|
||||
setLog((log) => log + `${log ? '\n\n' : ''}# cycle ${cycle}\n` + _events.map((e: any) => e.show()).join('\n'));
|
||||
}
|
||||
};
|
||||
// cycle hook to control scheduling
|
||||
const cycle = useCycle({
|
||||
onEvent: useCallback((time, event) => {
|
||||
// console.log('event', event, time);
|
||||
synth.triggerAttackRelease(event.value, event.duration, time);
|
||||
}, []),
|
||||
onQuery: useCallback((span) => pattern?.query(span) || [], [pattern]),
|
||||
onSchedule: useCallback(
|
||||
(_events, cycle) => {
|
||||
// console.log('schedule', _events, cycle);
|
||||
logCycle(_events, cycle);
|
||||
},
|
||||
[pattern]
|
||||
),
|
||||
ready: !!pattern,
|
||||
});
|
||||
// parse pattern when code changes
|
||||
useEffect(() => {
|
||||
try {
|
||||
const pattern = parse(code);
|
||||
console.log('pattern', pattern);
|
||||
setEvents(pattern.query(ts(0, 1)));
|
||||
console.log('events', events);
|
||||
const _pattern = parse(code);
|
||||
setPattern(_pattern);
|
||||
// cycle.query(cycle.activeCycle()); // reschedule active cycle
|
||||
setError(undefined);
|
||||
} catch (err: any) {
|
||||
setError(err);
|
||||
}
|
||||
}, [code]);
|
||||
// scroll log box to bottom when log changes
|
||||
useLayoutEffect(() => {
|
||||
logBox.current.scrollTop = logBox.current?.scrollHeight;
|
||||
}, [log]);
|
||||
|
||||
return (
|
||||
<div className="h-[100vh] bg-slate-900 flex-row">
|
||||
<header className="px-2 flex items-center space-x-2 border-b border-gray-200 bg-white">
|
||||
@ -38,34 +76,28 @@ function App() {
|
||||
<textarea
|
||||
className={cx('w-full h-32 bg-slate-600', error ? 'focus:ring-red-500' : 'focus:ring-slate-800')}
|
||||
value={code}
|
||||
onChange={(e) => setCode(e.target.value)}
|
||||
onChange={(e) => {
|
||||
setLog((log) => log + `${log ? '\n\n' : ''}✏️ edit\n${code}\n${e.target.value}`);
|
||||
setCode(e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<textarea className="w-full h-64 bg-slate-600" value={events.map((e) => e.show()).join('\n')} readOnly />
|
||||
<textarea
|
||||
className="w-full h-64 bg-slate-600"
|
||||
value={log}
|
||||
readOnly
|
||||
ref={logBox}
|
||||
style={{ fontFamily: 'monospace' }}
|
||||
/>
|
||||
<button
|
||||
className="w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
|
||||
onClick={() => cycle.toggle()}
|
||||
>
|
||||
{cycle.started ? 'pause' : 'play'}
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
declare interface Fraction {
|
||||
(v: number): Fraction;
|
||||
d: number;
|
||||
n: number;
|
||||
s: number;
|
||||
}
|
||||
declare interface TimeSpan {
|
||||
constructor: any; //?
|
||||
begin: Fraction;
|
||||
end: Fraction;
|
||||
}
|
||||
declare interface Hap<T> {
|
||||
whole: TimeSpan;
|
||||
part: TimeSpan;
|
||||
value: T;
|
||||
show: () => string;
|
||||
}
|
||||
declare interface Pattern<T> {
|
||||
query: (span: TimeSpan) => Hap<T>[];
|
||||
}
|
||||
|
||||
22
repl/src/types.d.ts
vendored
Normal file
22
repl/src/types.d.ts
vendored
Normal file
@ -0,0 +1,22 @@
|
||||
export declare interface Fraction {
|
||||
(v: number): Fraction;
|
||||
d: number;
|
||||
n: number;
|
||||
s: number;
|
||||
sub: (f: Fraction) => Fraction;
|
||||
sam: () => Fraction;
|
||||
}
|
||||
export declare interface TimeSpan {
|
||||
constructor: any; //?
|
||||
begin: Fraction;
|
||||
end: Fraction;
|
||||
}
|
||||
export declare interface Hap<T = any> {
|
||||
whole: TimeSpan;
|
||||
part: TimeSpan;
|
||||
value: T;
|
||||
show: () => string;
|
||||
}
|
||||
export declare interface Pattern<T = any> {
|
||||
query: (span: TimeSpan) => Hap<T>[];
|
||||
}
|
||||
73
repl/src/useCycle.ts
Normal file
73
repl/src/useCycle.ts
Normal file
@ -0,0 +1,73 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import type { ToneEventCallback } from 'tone';
|
||||
import * as Tone from 'tone';
|
||||
import { TimeSpan } from '../../strudel.mjs';
|
||||
import type { Hap } from './types';
|
||||
|
||||
export declare interface UseCycleProps {
|
||||
onEvent: ToneEventCallback<any>;
|
||||
onQuery?: (query: TimeSpan) => Hap[];
|
||||
onSchedule?: (events: Hap[], cycle: number) => void;
|
||||
ready?: boolean; // if false, query will not be called on change props
|
||||
}
|
||||
|
||||
function useCycle(props: UseCycleProps) {
|
||||
// onX must use useCallback!
|
||||
const { onEvent, onQuery, onSchedule, ready = true } = props;
|
||||
const [started, setStarted] = useState<boolean>(false);
|
||||
const cycleDuration = 1;
|
||||
const activeCycle = () => Math.floor(Tone.Transport.seconds / cycleDuration);
|
||||
|
||||
// pull events with onQuery + count up to next cycle
|
||||
const query = (cycle = activeCycle()) => {
|
||||
const timespan = new TimeSpan(cycle, cycle + 1);
|
||||
const _events = onQuery?.(timespan) || [];
|
||||
onSchedule?.(_events, cycle);
|
||||
schedule(_events, cycle);
|
||||
};
|
||||
|
||||
const schedule = (events: any[], cycle = activeCycle()) => {
|
||||
// cancel events after current query. makes sure no old events are player for rescheduled cycles
|
||||
// console.log('schedule', cycle);
|
||||
const timespan = new TimeSpan(cycle, cycle + 1);
|
||||
// query next cycle in the middle of the current
|
||||
const cancelFrom = timespan.begin.valueOf();
|
||||
Tone.Transport.cancel(cancelFrom);
|
||||
const queryNextTime = (cycle + 1) * cycleDuration - 0.1;
|
||||
Tone.Transport.schedule(() => {
|
||||
// TODO: find out why this event is sometimes swallowed
|
||||
query(cycle + 1);
|
||||
}, queryNextTime);
|
||||
// schedule events for next cycle
|
||||
events?.forEach((event) => {
|
||||
Tone.Transport.schedule((time) => {
|
||||
const toneEvent = {
|
||||
time: event.part.begin.valueOf(),
|
||||
duration: event.part.end.valueOf() - event.part.begin.valueOf(),
|
||||
value: event.value,
|
||||
};
|
||||
onEvent(time, toneEvent);
|
||||
}, event.part.begin.valueOf());
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
ready && query();
|
||||
}, [onEvent, onSchedule, onQuery]);
|
||||
|
||||
const start = async () => {
|
||||
console.log('start');
|
||||
setStarted(true);
|
||||
await Tone.start();
|
||||
Tone.Transport.start('+0.1');
|
||||
};
|
||||
const stop = () => {
|
||||
console.log('stop');
|
||||
setStarted(false);
|
||||
Tone.Transport.pause();
|
||||
};
|
||||
const toggle = () => (started ? stop() : start());
|
||||
return { start, stop, onEvent, started, toggle, schedule, query, activeCycle };
|
||||
}
|
||||
|
||||
export default useCycle;
|
||||
@ -524,6 +524,11 @@ function slowcat(pats) {
|
||||
return new Pattern(query)._splitQueries()
|
||||
}
|
||||
|
||||
function slow(...pats) {
|
||||
pats = pats.map(pat => reify(pat));
|
||||
return slowcat(pats);
|
||||
}
|
||||
|
||||
function fastcat(pats) {
|
||||
// Concatenation: as with slowcat, but squashes a cycle from each
|
||||
// pattern into one cycle
|
||||
@ -594,5 +599,5 @@ function silence() {
|
||||
|
||||
|
||||
export {Fraction, TimeSpan, Hap, Pattern,
|
||||
pure, stack, slowcat, fastcat, cat, sequence, polymeter}
|
||||
pure, stack, slowcat, slow, fastcat, cat, sequence, polymeter}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user