add draw helpers + pianoroll

repl/public/global.css

@@ -2,7 +2,25 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  background-color: #2a3236;
+}
+
 .react-codemirror2,
 .CodeMirror {
   height: 100% !important;
+  background-color: transparent !important;
+  //font-size: 15px;
+}
+
+.CodeMirror-line span {
+  background-color: #2a323660;
+}
+
+.CodeMirror-code {
+  //padding: 10px;
+}
+
+.CodeMirror-linenumber {
+  background-color: transparent !important;
 }

repl/src/App.tsx

@@ -80,8 +80,8 @@ function App() {
   });
 
   return (
-    <div className="min-h-screen bg-[#2A3236] flex flex-col">
-      <header className="flex-none w-full h-16 px-2 flex border-b border-gray-200 bg-white justify-between">
+    <div className="min-h-screen flex flex-col">
+      <header className="flex-none w-full h-16 px-2 flex border-b border-gray-200 bg-white justify-between z-[10]">
         <div className="flex items-center space-x-2">
           <img src={logo} className="Tidal-logo w-16 h-16" alt="logo" />
           <h1 className="text-2xl">Strudel REPL</h1>
@@ -106,14 +106,14 @@ function App() {
       </header>
       <section className="grow flex flex-col text-gray-100">
         <div className="grow relative">
-          <div className={cx('h-full  bg-[#2A3236]', error ? 'focus:ring-red-500' : 'focus:ring-slate-800')}>
+          <div className={cx('h-full', error ? 'focus:ring-red-500' : 'focus:ring-slate-800')}>
             <CodeMirror
               value={code}
               editorDidMount={setEditor}
               options={{
                 mode: 'javascript',
                 theme: 'material',
-                lineNumbers: true,
+                lineNumbers: false,
                 styleSelectedText: true,
                 cursorBlinkRate: 0,
               }}
@@ -130,13 +130,13 @@ function App() {
           )}
         </div>
         <button
-          className="flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
+          className="z-[10] flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
           onClick={() => togglePlay()}
         >
           {!pending ? <>{cycle.started ? 'pause' : 'play'}</> : <>loading...</>}
         </button>
         <textarea
-          className="grow bg-[#283237] border-0 text-xs min-h-[200px]"
+          className="z-[10] grow border-0 text-xs min-h-[200px] bg-[transparent]"
           value={log}
           readOnly
           ref={logBox}

repl/src/draw.mjs

@@ -0,0 +1,43 @@
+import * as Tone from 'tone';
+
+export const getDrawContext = (id = 'test-canvas') => {
+  let canvas = document.querySelector('#' + id);
+  if (!canvas) {
+    canvas = document.createElement('canvas');
+    canvas.id = id;
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    canvas.style = 'pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0';
+    document.body.prepend(canvas);
+  }
+  return canvas.getContext('2d');
+};
+
+export const draw = (callback) => {
+  if (window.strudelAnimation) {
+    cancelAnimationFrame(window.strudelAnimation);
+  }
+  const animate = (t) => {
+    callback(t);
+    window.strudelAnimation = requestAnimationFrame(animate);
+  };
+  requestAnimationFrame(animate);
+};
+
+export const queryEvents = (pattern, callback, seconds) => {
+  const queryEvents = () => {
+    const t = Tone.getTransport().seconds;
+    const begin = Math.floor(t / seconds) * seconds;
+    const end = begin + seconds * 4;
+    // console.log('query', t, begin, end);
+    const events = pattern.add(0).query(new State(new TimeSpan(begin, end)));
+    callback(events);
+  };
+  queryEvents();
+  if (window.strudelScheduler) {
+    clearInterval(window.strudelScheduler);
+  }
+  window.strudelScheduler = setInterval(() => {
+    queryEvents();
+  }, seconds * 1.5 * 1000);
+};

repl/src/evaluate.ts

@@ -5,12 +5,15 @@ import './voicings';
 import './tonal.mjs';
 import './xen.mjs';
 import './tune.mjs';
-import './tonal.mjs';
+import './tune.mjs';
+import './pianoroll.mjs';
+import * as drawHelpers from './draw.mjs';
 import gist from './gist.js';
 import shapeshifter from './shapeshifter';
 import { minify } from './parse';
 import * as Tone from 'tone';
 import * as toneHelpers from './tone';
+import * as voicingHelpers from './voicings';
 
 // this will add all methods from definedMethod to strudel + connect all the partial application stuff
 const bootstrapped: any = { ...strudel, ...strudel.Pattern.prototype.bootstrap() };
@@ -31,7 +34,7 @@ hackLiteral(String, ['mini', 'm'], bootstrapped.mini); // comment out this line
 hackLiteral(String, ['pure', 'p'], bootstrapped.pure); // comment out this line if you panic
 
 // this will add everything to global scope, which is accessed by eval
-Object.assign(globalThis, bootstrapped, Tone, toneHelpers, { gist });
+Object.assign(globalThis, bootstrapped, Tone, toneHelpers, voicingHelpers, drawHelpers, { gist });
 
 export const evaluate: any = async (code: string) => {
   const shapeshifted = shapeshifter(code); // transform syntactically correct js code to semantically usable code

repl/src/pianoroll.mjs

@@ -0,0 +1,41 @@
+import { draw, queryEvents, getDrawContext } from './draw.mjs';
+import { Pattern } from '../../strudel.mjs';
+import * as Tone from 'tone';
+
+Pattern.prototype.pianoroll = function () {
+  // draw stuff here with p.query
+  const ctx = getDrawContext();
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  const s = 10; // 10s in viewport
+  const maxMidi = 90;
+  const height = h / maxMidi;
+  let events;
+
+  queryEvents(this, (_events) => (events = _events), s);
+
+  const clear = () => ctx.clearRect(0, 0, w, h);
+
+  const drawEvents = (events) => {
+    events.forEach((event) => {
+      const t = Tone.getTransport().seconds;
+      const isActive = event.whole.begin <= t && event.whole.end >= t;
+      ctx.fillStyle = isActive ? '#FFCA28' : '#88ABF8';
+      const x = Math.round((event.whole.begin / s) * w);
+      const width = Math.round(((event.whole.end - event.whole.begin) / s) * w);
+      const y = Math.round(h - (Number(event.value) / maxMidi) * h);
+      const offset = (t / s) * w;
+      const margin = 0;
+      // console.log(x, y, width, height)
+      ctx.fillRect(x - offset + margin, y, width, height);
+    });
+  };
+
+  draw((t) => {
+    clear();
+    ctx.fillStyle = '#2A3236';
+    ctx.fillRect(0, 0, w, h);
+    drawEvents(events);
+  });
+  return this;
+};