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

add core examples

Browse Source
This commit is contained in:
Felix Roos 2022-03-29 22:16:36 +02:00
parent ed6cf2ecf1
commit ee0d835cd8
2 changed files with 60 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/core/examples/basic.html Normal file
View File

@ -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>

34
packages/core/examples/canvas.html Normal file
View File

@ -0,0 +1,34 @@
<body style="margin: 0">
<input
type="text"
id="text"
value="cat('orange', 'indigo')"
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.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
events.forEach((event) => {
ctx.fillStyle = event.value;
ctx.fillRect(event.whole.begin * canvas.width, 0, event.duration * canvas.width, canvas.height);
});
}
</script>
</body>