mirror of
https://codeberg.org/uzu/strudel
synced 2026-09-15 10:16:55 -04:00
Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Felix Roos
|
3af2210c5e | ||
|
Felix Roos
|
d6aa73fd28 | ||
|
Felix Roos
|
f0083cfe45 | ||
|
Felix Roos
|
66f32dd678 | ||
|
Felix Roos
|
7faf1e1366 | ||
|
Felix Roos
|
e6ae16ca51 | ||
|
Felix Roos
|
6af5250501 | ||
|
Felix Roos
|
7c0dd9a6cc | ||
|
Felix Roos
|
5f6b2223e1 | ||
|
Felix Roos
|
864157ac84 | ||
|
Felix Roos
|
c89ee5ddb3 | ||
|
Felix Roos
|
5a255350b4 | ||
|
Felix Roos
|
8919524432 | ||
|
Felix Roos
|
f79a64de60 | ||
|
Felix Roos
|
3fdeccdb23 |
@@ -25,7 +25,7 @@ npm run start
|
||||
To publish, just run:
|
||||
|
||||
```sh
|
||||
npx lerna publish
|
||||
npx lerna version
|
||||
```
|
||||
|
||||
This will publish all packages that changed since the last version.
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
<input
|
||||
type="text"
|
||||
id="text"
|
||||
value="cat('a', 'b')"
|
||||
style="width: 100%; font-size: 2em; outline: none; margin-bottom: 10px"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<div id="output"></div>
|
||||
<script type="module">
|
||||
const strudel = await import('https://cdn.skypack.dev/@strudel.cycles/core@0.0.2');
|
||||
Object.assign(window, strudel); // assign all strudel functions to global scope to use with eval
|
||||
const input = document.getElementById('text');
|
||||
const getEvents = () => {
|
||||
const code = document.getElementById('text').value;
|
||||
const pattern = eval(code);
|
||||
const events = pattern.firstCycle();
|
||||
console.log(code, '->', events);
|
||||
document.getElementById('output').innerHTML = events.map((e) => e.show()).join('<br/>');
|
||||
};
|
||||
getEvents();
|
||||
input.addEventListener('input', () => getEvents());
|
||||
</script>
|
||||
<p>
|
||||
This page shows how skypack can be used to import strudel core directly into a simple html page. <br />
|
||||
No server, no bundler and no build setup is needed to run this!
|
||||
</p>
|
||||
@@ -0,0 +1,35 @@
|
||||
<body style="margin: 0">
|
||||
<input
|
||||
type="text"
|
||||
id="text"
|
||||
value="cat('lime', slowcat('steelblue','darkblue'),'yellow','salmon','black').every(2,rev).fast(16)"
|
||||
style="width: 100%; font-size: 1.5em; background: black; color: white; outline: none; position: absolute; top: 0"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<canvas id="canvas"></canvas>
|
||||
<script type="module">
|
||||
const strudel = await import('https://cdn.skypack.dev/@strudel.cycles/core@0.0.2');
|
||||
// this adds all strudel functions to the global scope, to be used by eval
|
||||
Object.assign(window, strudel);
|
||||
// setup elements
|
||||
const input = document.getElementById('text');
|
||||
const canvas = document.getElementById('canvas');
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
const ctx = canvas.getContext('2d');
|
||||
input.focus(); // autofocus
|
||||
input.setSelectionRange(input.value.length, input.value.length); // move cursor to end
|
||||
paint(input.value); // initial paint
|
||||
input.addEventListener('input', (e) => paint(e.target.value)); // repaint on input
|
||||
|
||||
function paint(code) {
|
||||
const pattern = eval(code); // run code
|
||||
const events = pattern.firstCycle(); // query first cycle
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
|
||||
events.forEach((event) => {
|
||||
ctx.fillStyle = event.value;
|
||||
ctx.fillRect(event.whole.begin * canvas.width, 0, event.duration * canvas.width, canvas.height);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
@@ -0,0 +1,237 @@
|
||||
<div style="position: absolute; top: 0; right: 0; padding: 4px">
|
||||
<button id="start" style="margin-bottom: 4px; font-size: 2em">start</button><br />
|
||||
<button id="stop" style="font-size: 2em">stop</button>
|
||||
</div>
|
||||
<textarea
|
||||
style="font-size: 2em; background: #e8d565; color: #323230; height: 100%; width: 100%; outline: none; border: 0"
|
||||
id="text"
|
||||
spellcheck="false"
|
||||
>
|
||||
Loading...</textarea
|
||||
>
|
||||
<script type="module">
|
||||
document.body.style = 'margin: 0';
|
||||
import * as strudel from 'https://cdn.skypack.dev/@strudel.cycles/core@0.0.2';
|
||||
import 'https://cdn.skypack.dev/@strudel.cycles/core@0.0.2/euclid.mjs';
|
||||
const { cat, State, TimeSpan } = strudel;
|
||||
let pattern;
|
||||
Object.assign(window, strudel); // add strudel to eval scope
|
||||
const input = document.getElementById('text');
|
||||
|
||||
let initialCode = `sequence(880, [440, 660], 440, 660)
|
||||
.div(slowcat(3,2).slow(2))
|
||||
.off(1/8,mul(2))
|
||||
.off(1/4,mul(3))
|
||||
.legato(2)
|
||||
.slow(2)`;
|
||||
try {
|
||||
initialCode = atob(decodeURIComponent(window.location.href.split('#')[1]));
|
||||
} catch (err) {
|
||||
console.warn('failed to decode', err);
|
||||
}
|
||||
input.value = initialCode;
|
||||
|
||||
const evaluate = () => {
|
||||
try {
|
||||
pattern = eval(input.value);
|
||||
window.location.hash = '#' + encodeURIComponent(btoa(input.value)); // update url hash
|
||||
} catch (err) {
|
||||
console.warn(err);
|
||||
}
|
||||
};
|
||||
input.addEventListener('input', () => evaluate());
|
||||
|
||||
// helpers to create a worker dynamically without needing a server / extra file
|
||||
const stringifyFunction = (func) => '(' + func + ')();';
|
||||
const urlifyFunction = (func) =>
|
||||
URL.createObjectURL(new Blob([stringifyFunction(func)], { type: 'text/javascript' }));
|
||||
const createWorker = (func) => new Worker(urlifyFunction(func));
|
||||
|
||||
const interval = 0.1;
|
||||
const lookahead = 0.5;
|
||||
|
||||
// this class is basically the tale of two clocks
|
||||
class Metro {
|
||||
worker;
|
||||
audioContext;
|
||||
interval = 0.2; // query span
|
||||
lastEnd = 0;
|
||||
constructor(audioContext, callback, interval = this.interval) {
|
||||
this.audioContext = audioContext;
|
||||
this.interval = interval;
|
||||
this.worker = createWorker(() => {
|
||||
// we cannot use closures here!
|
||||
let interval;
|
||||
let timerID = null; // this is clock #1 (the sloppy js clock)
|
||||
const clear = () => {
|
||||
if (timerID) {
|
||||
clearInterval(timerID);
|
||||
timerID = null;
|
||||
}
|
||||
};
|
||||
const start = () => {
|
||||
clear();
|
||||
if (!interval) {
|
||||
throw new Error('no interval set! call worker.postMessage({interval}) before starting.');
|
||||
}
|
||||
timerID = setInterval(() => postMessage('tick'), interval * 1000);
|
||||
};
|
||||
self.onmessage = function (e) {
|
||||
if (e.data == 'start') {
|
||||
start();
|
||||
} else if (e.data.interval) {
|
||||
interval = e.data.interval;
|
||||
if (timerID) {
|
||||
start();
|
||||
}
|
||||
} else if (e.data == 'stop') {
|
||||
clear();
|
||||
}
|
||||
};
|
||||
});
|
||||
this.worker.postMessage({ interval });
|
||||
const round = (n, d) => Math.round(n * d) / d;
|
||||
const precision = 100;
|
||||
this.worker.onmessage = (e) => {
|
||||
if (e.data === 'tick') {
|
||||
const begin = this.lastEnd || this.audioContext.currentTime;
|
||||
const end = this.audioContext.currentTime + this.interval; // DONT reference begin here!
|
||||
this.lastEnd = end;
|
||||
// callback with query span, using clock #2 (the audio clock)
|
||||
callback(begin, end);
|
||||
}
|
||||
};
|
||||
}
|
||||
start() {
|
||||
console.log('start...');
|
||||
this.audioContext.resume();
|
||||
this.worker.postMessage('start');
|
||||
}
|
||||
stop() {
|
||||
console.log('stop...');
|
||||
this.worker.postMessage('stop');
|
||||
}
|
||||
}
|
||||
|
||||
const audioContext = new AudioContext();
|
||||
const metro = new Metro(
|
||||
audioContext,
|
||||
(begin, end) => {
|
||||
pattern.query(new State(new TimeSpan(begin, end))).forEach((e) => {
|
||||
if (!e.part.begin.equals(e.whole.begin)) {
|
||||
return;
|
||||
}
|
||||
if (e.context.createAudioNode) {
|
||||
e.context.createAudioNode(e);
|
||||
} else {
|
||||
// fallback sine wave
|
||||
const attack = 0.01;
|
||||
const decay = 0.05;
|
||||
const sustain = 0.5;
|
||||
const release = 0.01;
|
||||
const velocity = (e.context?.velocity || 1) * 0.1;
|
||||
const osc = audioContext.createOscillator();
|
||||
osc.type = 'sine';
|
||||
osc.frequency.value = e.value;
|
||||
osc.start(e.whole.begin);
|
||||
const envelope = adsr(attack, decay, sustain, release, velocity, e.whole.begin, e.whole.end);
|
||||
osc.stop(e.whole.end + release);
|
||||
osc.connect(envelope);
|
||||
envelope.connect(audioContext.destination);
|
||||
}
|
||||
});
|
||||
},
|
||||
interval,
|
||||
lookahead,
|
||||
);
|
||||
|
||||
const adsr = (attack, decay, sustain, release, velocity, begin, end) => {
|
||||
const gainNode = audioContext.createGain();
|
||||
gainNode.gain.setValueAtTime(0, begin);
|
||||
gainNode.gain.linearRampToValueAtTime(velocity, begin + attack); // attack
|
||||
gainNode.gain.linearRampToValueAtTime(sustain * velocity, begin + attack + decay); // sustain start
|
||||
gainNode.gain.setValueAtTime(sustain * velocity, end); // sustain end
|
||||
gainNode.gain.linearRampToValueAtTime(0, end + release); // release
|
||||
// for some reason, using exponential ramping creates little cracklings
|
||||
return gainNode;
|
||||
};
|
||||
|
||||
strudel.Pattern.prototype.withAudioNode = function (createAudioNode) {
|
||||
return this._withEvent((event) => {
|
||||
return event.setContext({
|
||||
...event.context,
|
||||
createAudioNode: (e) => createAudioNode(e, event.context.createAudioNode?.(event)),
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
strudel.Pattern.prototype._osc = function (type) {
|
||||
return this.withAudioNode((e) => {
|
||||
const osc = audioContext.createOscillator();
|
||||
osc.type = type;
|
||||
osc.frequency.value = e.value; // expects frequency..
|
||||
osc.start(e.whole.begin.valueOf() + lookahead);
|
||||
osc.stop(e.whole.end.valueOf() + lookahead); // release?
|
||||
// osc.connect(audioContext.destination);
|
||||
return osc;
|
||||
});
|
||||
};
|
||||
strudel.Pattern.prototype.define('osc', (type, pat) => pat.osc(type), { patternified: true });
|
||||
strudel.Pattern.prototype.adsr = function (a = 0.01, d = 0.05, s = 1, r = 0.01) {
|
||||
return this.withAudioNode((e, node) => {
|
||||
const velocity = e.context?.velocity || 1;
|
||||
const envelope = adsr(
|
||||
a,
|
||||
d,
|
||||
s,
|
||||
r,
|
||||
velocity,
|
||||
e.whole.begin.valueOf() + lookahead,
|
||||
e.whole.end.valueOf() + lookahead,
|
||||
);
|
||||
node?.connect(envelope);
|
||||
return envelope;
|
||||
});
|
||||
};
|
||||
strudel.Pattern.prototype.filter = function (type = 'lowshelf', frequency = 1000, gain = 25) {
|
||||
return this.withAudioNode((e, node) => {
|
||||
const filter = audioContext.createBiquadFilter();
|
||||
filter.type = type;
|
||||
filter.frequency.value = frequency;
|
||||
filter.gain.value = gain;
|
||||
node?.connect(filter);
|
||||
return filter;
|
||||
});
|
||||
};
|
||||
|
||||
strudel.Pattern.prototype.out = function () {
|
||||
const master = audioContext.createGain();
|
||||
master.gain.value = 0.1;
|
||||
master.connect(audioContext.destination);
|
||||
return this.withAudioNode((e, node) => {
|
||||
if (!node) {
|
||||
console.warn('out: no source! call .osc() first');
|
||||
}
|
||||
node?.connect(master);
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById('start').addEventListener('click', () => metro.start());
|
||||
document.getElementById('stop').addEventListener('click', () => metro.stop());
|
||||
evaluate(); // evaluate initial code
|
||||
/*
|
||||
sequence(1,3/2,1,2).stack(
|
||||
stack(5,3,4).velocity(.8).slow(2).legato(.2)
|
||||
//.echo(3, 1/4, .5)
|
||||
).mul(110) // frequencies
|
||||
.div(slowcat(slowcat(2,5/4, 3/2),slowcat(3,4/3)).slow(2))
|
||||
.echoWith(
|
||||
16, // n of partials / cutoff
|
||||
tri2.slow(128).div(2), // time between partials
|
||||
(x,n)=>x // n = partial index 0..n
|
||||
.mul((n+1)*3/2)
|
||||
.legato(2)
|
||||
.velocity(1/((n+1)**1.6)) // amplitude falloff
|
||||
).legato(2) // note length
|
||||
*/
|
||||
</script>
|
||||
Generated
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@strudel.cycles/core",
|
||||
"version": "0.0.3",
|
||||
"version": "0.0.2",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@strudel.cycles/core",
|
||||
"version": "0.0.3",
|
||||
"version": "0.0.2",
|
||||
"description": "Port of Tidal Cycles to JavaScript",
|
||||
"main": "strudel.mjs",
|
||||
"type": "module",
|
||||
|
||||
Generated
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@strudel.cycles/eval",
|
||||
"version": "0.0.3",
|
||||
"version": "0.0.2",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@strudel.cycles/eval",
|
||||
"version": "0.0.3",
|
||||
"version": "0.0.2",
|
||||
"description": "Code evaluator for strudel",
|
||||
"main": "evaluate.mjs",
|
||||
"directories": {
|
||||
@@ -28,7 +28,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/tidalcycles/strudel#readme",
|
||||
"dependencies": {
|
||||
"@strudel.cycles/core": "^0.0.3",
|
||||
"@strudel.cycles/core": "^0.0.2",
|
||||
"estraverse": "^5.3.0",
|
||||
"shift-ast": "^6.1.0",
|
||||
"shift-codegen": "^7.0.3",
|
||||
|
||||
Generated
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@strudel.cycles/midi",
|
||||
"version": "0.0.4",
|
||||
"version": "0.0.3",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@strudel.cycles/midi",
|
||||
"version": "0.0.4",
|
||||
"version": "0.0.3",
|
||||
"description": "Midi API for strudel",
|
||||
"main": "midi.mjs",
|
||||
"repository": {
|
||||
@@ -21,7 +21,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/tidalcycles/strudel#readme",
|
||||
"dependencies": {
|
||||
"@strudel.cycles/tone": "^0.0.4",
|
||||
"@strudel.cycles/tone": "^0.0.3",
|
||||
"tone": "^14.7.77",
|
||||
"webmidi": "^2.5.2"
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@strudel.cycles/mini",
|
||||
"version": "0.0.4",
|
||||
"version": "0.0.3",
|
||||
"description": "Mini notation for strudel",
|
||||
"main": "mini.mjs",
|
||||
"type": "module",
|
||||
@@ -25,7 +25,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/tidalcycles/strudel#readme",
|
||||
"dependencies": {
|
||||
"@strudel.cycles/eval": "^0.0.3",
|
||||
"@strudel.cycles/tone": "^0.0.4"
|
||||
"@strudel.cycles/eval": "^0.0.2",
|
||||
"@strudel.cycles/tone": "^0.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
Generated
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@strudel.cycles/tonal",
|
||||
"version": "0.0.3",
|
||||
"version": "0.0.2",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@strudel.cycles/tonal",
|
||||
"version": "0.0.3",
|
||||
"version": "0.0.2",
|
||||
"description": "Tonal functions for strudel",
|
||||
"main": "tonal.mjs",
|
||||
"type": "module",
|
||||
@@ -25,7 +25,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/tidalcycles/strudel#readme",
|
||||
"dependencies": {
|
||||
"@strudel.cycles/core": "^0.0.3",
|
||||
"@strudel.cycles/core": "^0.0.2",
|
||||
"@tonaljs/tonal": "^4.6.5",
|
||||
"webmidi": "^3.0.15"
|
||||
}
|
||||
|
||||
Generated
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@strudel.cycles/tone",
|
||||
"version": "0.0.4",
|
||||
"version": "0.0.3",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@strudel.cycles/tone",
|
||||
"version": "0.0.4",
|
||||
"version": "0.0.3",
|
||||
"description": "Tone.js API for strudel",
|
||||
"main": "tone.mjs",
|
||||
"type": "module",
|
||||
@@ -22,7 +22,7 @@
|
||||
},
|
||||
"homepage": "https://github.com/tidalcycles/strudel#readme",
|
||||
"dependencies": {
|
||||
"@strudel.cycles/core": "^0.0.3",
|
||||
"@strudel.cycles/core": "^0.0.2",
|
||||
"@tonejs/piano": "^0.2.1",
|
||||
"chord-voicings": "^0.0.1",
|
||||
"tone": "^14.7.77"
|
||||
|
||||
+7
-10
@@ -30,16 +30,13 @@ import { getPlayableNoteValue } from '@strudel.cycles/core/util.mjs';
|
||||
|
||||
// "balanced" | "interactive" | "playback";
|
||||
// Tone.setContext(new Tone.Context({ latencyHint: 'playback', lookAhead: 1 }));
|
||||
export const getDefaultSynth = () => {
|
||||
const s = new PolySynth().chain(new Gain(0.5), getDestination());
|
||||
s.set({
|
||||
oscillator: { type: 'triangle' },
|
||||
envelope: {
|
||||
release: 0.01,
|
||||
},
|
||||
});
|
||||
return s;
|
||||
};
|
||||
export const defaultSynth = new PolySynth().chain(new Gain(0.5), getDestination());
|
||||
defaultSynth.set({
|
||||
oscillator: { type: 'triangle' },
|
||||
envelope: {
|
||||
release: 0.01,
|
||||
},
|
||||
});
|
||||
|
||||
// what about
|
||||
// https://www.charlie-roberts.com/gibberish/playground/
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@strudel.cycles/xen",
|
||||
"version": "0.0.3",
|
||||
"version": "0.0.2",
|
||||
"description": "Xenharmonic API for strudel",
|
||||
"main": "xen.mjs",
|
||||
"scripts": {
|
||||
@@ -24,6 +24,6 @@
|
||||
},
|
||||
"homepage": "https://github.com/tidalcycles/strudel#readme",
|
||||
"dependencies": {
|
||||
"@strudel.cycles/core": "^0.0.3"
|
||||
"@strudel.cycles/core": "^0.0.2"
|
||||
}
|
||||
}
|
||||
|
||||
+1
-2
@@ -3,7 +3,7 @@ import CodeMirror, { markEvent, markParens } from './CodeMirror';
|
||||
import cx from './cx';
|
||||
import logo from './logo.svg';
|
||||
import playStatic from './static.mjs';
|
||||
import { getDefaultSynth } from '@strudel.cycles/tone';
|
||||
import { defaultSynth } from '@strudel.cycles/tone';
|
||||
import * as tunes from './tunes.mjs';
|
||||
import useRepl from './useRepl.mjs';
|
||||
import { useWebMidi } from './useWebMidi';
|
||||
@@ -52,7 +52,6 @@ function getRandomTune() {
|
||||
}
|
||||
|
||||
const randomTune = getRandomTune();
|
||||
const defaultSynth = getDefaultSynth();
|
||||
|
||||
function App() {
|
||||
const [editor, setEditor] = useState();
|
||||
|
||||
+1
-3
@@ -2,9 +2,7 @@ import { Tone } from '@strudel.cycles/tone';
|
||||
import { State, TimeSpan } from '@strudel.cycles/core';
|
||||
import { getPlayableNoteValue } from '@strudel.cycles/core/util.mjs';
|
||||
import { evaluate } from '@strudel.cycles/eval';
|
||||
import { getDefaultSynth } from '@strudel.cycles/tone';
|
||||
|
||||
const defaultSynth = getDefaultSynth();
|
||||
import { defaultSynth } from '@strudel.cycles/tone';
|
||||
|
||||
// this is a test to play back events with as less runtime code as possible..
|
||||
// the code asks for the number of seconds to prequery
|
||||
|
||||
Reference in New Issue
Block a user