hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better names + more readme

Browse source
This commit is contained in:
Felix Roos 2023-12-29 16:36:38 +01:00
parent 5d6ccf56d7
commit c13feccdcd
10 changed files with 5 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

34
examples/buildless/canvas.html Normal file
View file

@ -0,0 +1,34 @@
<body style="margin: 0">
<input
type="text"
id="text"
value="seq('tomato', 'indigo', ['white', 'steelblue']).fast(4)"
style="width: 100%; font-size: 2em; 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.6.8');
// 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
events.forEach((event) => {
ctx.fillStyle = event.value;
ctx.fillRect(event.whole.begin * canvas.width, 0, event.duration.valueOf() * canvas.width, canvas.height);
});
}
</script>
</body>