build

docs/tutorial/index.9b9efe63.css

@@ -691,6 +691,8 @@ Ensure the default browser behavior of the `hidden` attribute.
   right: 0.5rem;
 }.bottom-2 {
   bottom: 0.5rem;
+}.z-\[10\] {
+  z-index: 10;
 }.block {
   display: block;
 }.flex {
@@ -789,18 +791,14 @@ Ensure the default browser behavior of the `hidden` attribute.
 }.border-slate-500 {
   --tw-border-opacity: 1;
   border-color: rgb(100 116 139 / var(--tw-border-opacity));
-}.bg-\[\#2A3236\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(42 50 54 / var(--tw-bg-opacity));
 }.bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }.bg-slate-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(51 65 85 / var(--tw-bg-opacity));
-}.bg-\[\#283237\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(40 50 55 / var(--tw-bg-opacity));
+}.bg-\[transparent\] {
+  background-color: transparent;
 }.bg-slate-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@@ -1350,4 +1348,4 @@ span.CodeMirror-selectedtext { background: none; }
   color: white !important;
 }
 
-/*# sourceMappingURL=index.edd7bd0d.css.map */
+/*# sourceMappingURL=index.9b9efe63.css.map */

docs/tutorial/index.dbbfddd8.js

@@ -41871,6 +41871,8 @@ var _voicings = require("./voicings");
 var _tonalMjs = require("./tonal.mjs");
 var _xenMjs = require("./xen.mjs");
 var _tuneMjs = require("./tune.mjs");
+var _pianorollMjs = require("./pianoroll.mjs");
+var _drawMjs = require("./draw.mjs");
 var _gistJs = require("./gist.js");
 var _gistJsDefault = parcelHelpers.interopDefault(_gistJs);
 var _shapeshifter = require("./shapeshifter");
@@ -41902,12 +41904,13 @@ hackLiteral(String, [
     '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, _tone1, _tone, {
+Object.assign(globalThis, bootstrapped, _tone1, _tone, _voicings, _drawMjs, {
     gist: _gistJsDefault.default
 });
 const evaluate = async (code)=>{
     const shapeshifted = _shapeshifterDefault.default(code); // transform syntactically correct js code to semantically usable code
     // console.log('shapeshifted', shapeshifted);
+    _drawMjs.cleanup();
     let evaluated = await eval(shapeshifted);
     if (typeof evaluated === 'function') evaluated = evaluated();
     if (typeof evaluated === 'string') evaluated = _strudelMjs.withLocationOffset(_parse.minify(evaluated), {
@@ -41926,7 +41929,7 @@ const evaluate = async (code)=>{
     };
 };
 
-},{"../../strudel.mjs":"ggZqJ","./tone":"aBpVm","./midi":"kToux","./voicings":"bexb4","./tonal.mjs":"j8DFK","./xen.mjs":"2MdCD","./tune.mjs":"ggPHE","./gist.js":"fYZxP","./shapeshifter":"67UCx","./parse":"dddDq","tone":"2tCfN","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"ggZqJ":[function(require,module,exports) {
+},{"../../strudel.mjs":"ggZqJ","./tone":"aBpVm","./midi":"kToux","./voicings":"bexb4","./tonal.mjs":"j8DFK","./xen.mjs":"2MdCD","./tune.mjs":"ggPHE","./pianoroll.mjs":"6BZJ6","./draw.mjs":"dHJhg","./gist.js":"fYZxP","./shapeshifter":"67UCx","./parse":"dddDq","tone":"2tCfN","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"ggZqJ":[function(require,module,exports) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 parcelHelpers.export(exports, "curry", ()=>curry
@@ -136142,7 +136145,101 @@ Tune.prototype.isValidScale = function(name) {
     }
 };
 
-},{"@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"fYZxP":[function(require,module,exports) {
+},{"@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"6BZJ6":[function(require,module,exports) {
+var _drawMjs = require("./draw.mjs");
+var _strudelMjs = require("../../strudel.mjs");
+var _tone = require("tone");
+_strudelMjs.Pattern.prototype.pianoroll = function() {
+    // draw stuff here with p.query
+    const ctx = _drawMjs.getDrawContext();
+    const w = window.innerWidth;
+    const h = window.innerHeight;
+    const s = 10; // 10s in viewport
+    const maxMidi = 90;
+    const height = h / maxMidi;
+    let events1;
+    _drawMjs.queryEvents(this, (_events)=>events1 = _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);
+        });
+    };
+    _drawMjs.draw((t)=>{
+        clear();
+        ctx.fillStyle = '#2A3236';
+        ctx.fillRect(0, 0, w, h);
+        drawEvents(events1);
+    });
+    return this;
+};
+
+},{"./draw.mjs":"dHJhg","../../strudel.mjs":"ggZqJ","tone":"2tCfN"}],"dHJhg":[function(require,module,exports) {
+var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
+parcelHelpers.defineInteropFlag(exports);
+parcelHelpers.export(exports, "getDrawContext", ()=>getDrawContext
+);
+parcelHelpers.export(exports, "draw", ()=>draw
+);
+parcelHelpers.export(exports, "queryEvents", ()=>queryEvents
+);
+parcelHelpers.export(exports, "cleanup", ()=>cleanup
+);
+var _tone = require("tone");
+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');
+};
+const draw = (callback)=>{
+    if (window.strudelAnimation) cancelAnimationFrame(window.strudelAnimation);
+    const animate = (t)=>{
+        callback(t);
+        window.strudelAnimation = requestAnimationFrame(animate);
+    };
+    requestAnimationFrame(animate);
+};
+const queryEvents = (pattern, callback, seconds)=>{
+    const queryEvents1 = ()=>{
+        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);
+    };
+    queryEvents1();
+    if (window.strudelScheduler) clearInterval(window.strudelScheduler);
+    window.strudelScheduler = setInterval(()=>{
+        queryEvents1();
+    }, seconds * 1500);
+};
+const cleanup = ()=>{
+    const ctx = getDrawContext();
+    ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+    if (window.strudelAnimation) cancelAnimationFrame(window.strudelAnimation);
+    if (window.strudelScheduler) clearInterval(window.strudelScheduler);
+};
+
+},{"tone":"2tCfN","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"fYZxP":[function(require,module,exports) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 exports.default = (route)=>fetch(`https://gist.githubusercontent.com/${route}?cachebust=${Date.now()}`).then((res)=>res.text()
@@ -182916,4 +183013,4 @@ exports.default = cx;
 
 },{"@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}]},["3uVTb"], "3uVTb", "parcelRequire94c2")
 
-//# sourceMappingURL=index.7a60a07f.js.map
+//# sourceMappingURL=index.dbbfddd8.js.map

docs/tutorial/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <link rel="icon" href="/tutorial/favicon.e3ab9dd9.ico">
-    <link rel="stylesheet" type="text/css" href="/tutorial/index.edd7bd0d.css">
+    <link rel="stylesheet" type="text/css" href="/tutorial/index.9b9efe63.css">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="Strudel REPL">
     <title>Strudel Tutorial</title>
@@ -11,6 +11,6 @@
   <body>
     <div id="root"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <script src="/tutorial/index.7a60a07f.js" defer=""></script>
+    <script src="/tutorial/index.dbbfddd8.js" defer=""></script>
   </body>
 </html>