delete strudelmirror example
This commit is contained in:
Felix Roos
parent
40f3212efa
commit
592e54a53f
7 changed files with 6 additions and 579 deletions
|
|
@ -1,24 +0,0 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>StrudelMirror Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="settings">
|
||||
<form name="settings">
|
||||
<label
|
||||
>theme
|
||||
<select name="theme">
|
||||
<option>strudelTheme</option>
|
||||
<option>bluescreen</option>
|
||||
<option>blackscreen</option>
|
||||
<option>whitescreen</option>
|
||||
<option>teletext</option>
|
||||
<option>algoboy</option>
|
||||
<option>terminal</option>
|
||||
<option>abcdef</option>
|
||||
<option>androidstudio</option>
|
||||
<option>atomone</option>
|
||||
<option>aura</option>
|
||||
<option>bespin</option>
|
||||
<option>darcula</option>
|
||||
<option>dracula</option>
|
||||
<option>duotoneDark</option>
|
||||
<option>eclipse</option>
|
||||
<option>githubDark</option>
|
||||
<option>gruvboxDark</option>
|
||||
<option>materialDark</option>
|
||||
<option>nord</option>
|
||||
<option>okaidia</option>
|
||||
<option>solarizedDark</option>
|
||||
<option>sublime</option>
|
||||
<option>tokyoNight</option>
|
||||
<option>tokyoNightStorm</option>
|
||||
<option>vscodeDark</option>
|
||||
<option>xcodeDark</option>
|
||||
<option>bbedit</option>
|
||||
<option>duotoneLight</option>
|
||||
<option>githubLight</option>
|
||||
<option>gruvboxLight</option>
|
||||
<option>materialLight</option>
|
||||
<option>noctisLilac</option>
|
||||
<option>solarizedLight</option>
|
||||
<option>tokyoNightDay</option>
|
||||
<option>xcodeLight</option>
|
||||
</select> </label
|
||||
><br />
|
||||
<!-- <label
|
||||
>keybindings
|
||||
<select name="keybindings">
|
||||
<option>codemirror</option>
|
||||
<option>vim</option>
|
||||
<option>emacs</option>
|
||||
<option>vscode</option>
|
||||
</select> </label
|
||||
><br />
|
||||
<label
|
||||
>fontFamily
|
||||
<select name="fontFamily">
|
||||
<option>monospace</option>
|
||||
<option>helvetica</option>
|
||||
</select> </label
|
||||
><br /> -->
|
||||
<label>fontSize <input type="number" name="fontSize" /></label>
|
||||
<br />
|
||||
<label><input type="checkbox" name="isLineNumbersDisplayed" />isLineNumbersDisplayed</label>
|
||||
<br />
|
||||
<label><input type="checkbox" name="isActiveLineHighlighted" />isActiveLineHighlighted</label>
|
||||
<br />
|
||||
<label><input type="checkbox" name="isPatternHighlightingEnabled" />isPatternHighlightingEnabled</label>
|
||||
<br />
|
||||
<label><input type="checkbox" name="isFlashEnabled" />isFlashEnabled</label>
|
||||
<br />
|
||||
<label><input type="checkbox" name="isLineWrappingEnabled" />isLineWrappingEnabled</label>
|
||||
<!-- <label><input type="checkbox" name="isAutoCompletionEnabled" />isAutoCompletionEnabled</label> -->
|
||||
<!-- <label><input type="checkbox" name="isTooltipEnabled" />isTooltipEnabled</label> -->
|
||||
</form>
|
||||
</div>
|
||||
<div id="code"></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,199 +0,0 @@
|
|||
import { logger, getDrawContext, silence, controls, evalScope, hash2code, code2hash } from '@strudel.cycles/core';
|
||||
import { StrudelMirror } from '@strudel/codemirror';
|
||||
import { transpiler } from '@strudel.cycles/transpiler';
|
||||
import {
|
||||
getAudioContext,
|
||||
webaudioOutput,
|
||||
registerSynthSounds,
|
||||
registerZZFXSounds,
|
||||
samples,
|
||||
} from '@strudel.cycles/webaudio';
|
||||
import './style.css';
|
||||
|
||||
let editor;
|
||||
const initialSettings = {
|
||||
keybindings: 'codemirror',
|
||||
isLineNumbersDisplayed: true,
|
||||
isActiveLineHighlighted: true,
|
||||
isAutoCompletionEnabled: false,
|
||||
isPatternHighlightingEnabled: true,
|
||||
isFlashEnabled: true,
|
||||
isTooltipEnabled: false,
|
||||
isLineWrappingEnabled: false,
|
||||
theme: 'teletext',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: 18,
|
||||
};
|
||||
|
||||
async function run() {
|
||||
const container = document.getElementById('code');
|
||||
if (!container) {
|
||||
console.warn('could not init: no container found');
|
||||
return;
|
||||
}
|
||||
|
||||
const drawContext = getDrawContext();
|
||||
const drawTime = [-2, 2];
|
||||
editor = new StrudelMirror({
|
||||
defaultOutput: webaudioOutput,
|
||||
getTime: () => getAudioContext().currentTime,
|
||||
transpiler,
|
||||
root: container,
|
||||
initialCode: '// LOADING',
|
||||
pattern: silence,
|
||||
settings: initialSettings,
|
||||
drawTime,
|
||||
onDraw: (haps, time, frame, painters) => {
|
||||
painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2);
|
||||
painters?.forEach((painter) => {
|
||||
// ctx time haps drawTime paintOptions
|
||||
painter(drawContext, time, haps, drawTime, { clear: false });
|
||||
});
|
||||
},
|
||||
prebake: async () => {
|
||||
// populate scope / lazy load modules
|
||||
const modulesLoading = evalScope(
|
||||
import('@strudel.cycles/core'),
|
||||
import('@strudel.cycles/tonal'),
|
||||
import('@strudel.cycles/mini'),
|
||||
// import('@strudel.cycles/xen'),
|
||||
import('@strudel.cycles/webaudio'),
|
||||
import('@strudel/codemirror'),
|
||||
/* import('@strudel/hydra'), */
|
||||
// import('@strudel.cycles/serial'),
|
||||
/* import('@strudel.cycles/soundfonts'), */
|
||||
// import('@strudel.cycles/csound'),
|
||||
/* import('@strudel.cycles/midi'), */
|
||||
// import('@strudel.cycles/osc'),
|
||||
controls, // sadly, this cannot be exported from core directly (yet)
|
||||
);
|
||||
// load samples
|
||||
const ds = 'https://raw.githubusercontent.com/felixroos/dough-samples/main/';
|
||||
await Promise.all([
|
||||
modulesLoading,
|
||||
registerSynthSounds(),
|
||||
registerZZFXSounds(),
|
||||
samples(`${ds}/tidal-drum-machines.json`),
|
||||
samples(`${ds}/piano.json`),
|
||||
samples(`${ds}/Dirt-Samples.json`),
|
||||
samples(`${ds}/EmuSP12.json`),
|
||||
samples(`${ds}/vcsl.json`),
|
||||
]);
|
||||
},
|
||||
afterEval: ({ code }) => {
|
||||
window.location.hash = '#' + code2hash(code);
|
||||
},
|
||||
});
|
||||
|
||||
// init settings
|
||||
editor.updateSettings(initialSettings);
|
||||
|
||||
logger(`Welcome to Strudel! Click into the editor and then hit ctrl+enter to run the code!`, 'highlight');
|
||||
const codeParam = window.location.href.split('#')[1] || '';
|
||||
|
||||
const initialCode = codeParam
|
||||
? hash2code(codeParam)
|
||||
: `// @date 23-11-30
|
||||
// "teigrührgerät" @by froos
|
||||
|
||||
stack(
|
||||
stack(
|
||||
s("bd(<3!3 5>,6)/2").bank('RolandTR707')
|
||||
,
|
||||
s("~ sd:<0 1>").bank('RolandTR707').room("<0 .5>")
|
||||
.lastOf(8, x=>x.segment("12").end(.2).gain(isaw))
|
||||
,
|
||||
s("[tb ~ tb]").bank('RolandTR707')
|
||||
.clip(0).release(.08).room(.2)
|
||||
).off(-1/6, x=>x.speed(.7).gain(.2).degrade())
|
||||
,
|
||||
stack(
|
||||
note("<g1(<3 4>,6) ~!2 [f1?]*2>")
|
||||
.s("sawtooth").lpf(perlin.range(400,1000))
|
||||
.lpa(.1).lpenv(-3).room(.2)
|
||||
.lpq(8).noise(.2)
|
||||
.add(note("0,.1"))
|
||||
,
|
||||
chord("<~ Gm9 ~!2>")
|
||||
.dict('ireal').voicing()
|
||||
.s("sawtooth").vib("2:.1")
|
||||
.lpf(1000).lpa(.1).lpenv(-4)
|
||||
.room(.5)
|
||||
,
|
||||
n(run(3)).chord("<Gm9 Gm11>/8")
|
||||
.dict('ireal-ext')
|
||||
.off(1/2, add(n(4)))
|
||||
.voicing()
|
||||
.clip(.1).release(.05)
|
||||
.s("sine").jux(rev)
|
||||
.sometimesBy(sine.slow(16), add(note(12)))
|
||||
.room(.75)
|
||||
.lpf(sine.range(200,2000).slow(16))
|
||||
.gain(saw.slow(4).div(2))
|
||||
).add(note(perlin.range(0,.5)))
|
||||
)`;
|
||||
|
||||
editor.setCode(initialCode); // simpler alternative to above init
|
||||
|
||||
// settingsMap.listen((settings, key) => editor.changeSetting(key, settings[key]));
|
||||
onEvent('strudel-toggle-play', () => editor.toggle());
|
||||
}
|
||||
|
||||
run();
|
||||
|
||||
function onEvent(key, callback) {
|
||||
const listener = (e) => {
|
||||
if (e.data === key) {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
window.addEventListener('message', listener);
|
||||
return () => window.removeEventListener('message', listener);
|
||||
}
|
||||
|
||||
// settings form
|
||||
function getInput(form, name) {
|
||||
return form.querySelector(`input[name=${name}]`) || form.querySelector(`select[name=${name}]`);
|
||||
}
|
||||
function getFormValues(form, initial) {
|
||||
const entries = Object.entries(initial).map(([key, initialValue]) => {
|
||||
const input = getInput(form, key);
|
||||
if (!input) {
|
||||
return [key, initialValue]; // fallback
|
||||
}
|
||||
if (input.type === 'checkbox') {
|
||||
return [key, input.checked];
|
||||
}
|
||||
if (input.type === 'number') {
|
||||
return [key, Number(input.value)];
|
||||
}
|
||||
if (input.tagName === 'SELECT') {
|
||||
return [key, input.value];
|
||||
}
|
||||
return [key, input.value];
|
||||
});
|
||||
return Object.fromEntries(entries);
|
||||
}
|
||||
function setFormValues(form, values) {
|
||||
Object.entries(values).forEach(([key, value]) => {
|
||||
const input = getInput(form, key);
|
||||
if (!input) {
|
||||
return;
|
||||
}
|
||||
if (input.type === 'checkbox') {
|
||||
input.checked = !!value;
|
||||
} else if (input.type === 'number') {
|
||||
input.value = value;
|
||||
} else if (input.tagName) {
|
||||
input.value = value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const form = document.querySelector('form[name=settings]');
|
||||
setFormValues(form, initialSettings);
|
||||
form.addEventListener('change', () => {
|
||||
const values = getFormValues(form, initialSettings);
|
||||
// console.log('values', values);
|
||||
editor.updateSettings(values);
|
||||
});
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
{
|
||||
"name": "strudelmirror",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^5.0.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"@strudel/codemirror": "workspace:*",
|
||||
"@strudel.cycles/core":"workspace:*",
|
||||
"@strudel.cycles/transpiler":"workspace:*",
|
||||
"@strudel.cycles/tonal":"workspace:*",
|
||||
"@strudel.cycles/mini":"workspace:*",
|
||||
"@strudel.cycles/xen":"workspace:*",
|
||||
"@strudel.cycles/webaudio":"workspace:*",
|
||||
"@strudel/hydra":"workspace:*",
|
||||
"@strudel.cycles/serial":"workspace:*",
|
||||
"@strudel.cycles/soundfonts":"workspace:*",
|
||||
"@strudel.cycles/csound":"workspace:*",
|
||||
"@strudel.cycles/midi":"workspace:*",
|
||||
"@strudel.cycles/osc":"workspace:*"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
:root {
|
||||
--foreground: white;
|
||||
}
|
||||
|
||||
body,
|
||||
input {
|
||||
font-family: monospace;
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#code,
|
||||
.cm-editor,
|
||||
.cm-scroller {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.settings {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
display: flex-col;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.settings > form > * + * {
|
||||
margin-top: 10px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue