build

docs/dist/App.js

@@ -34,6 +34,7 @@ function App() {
     defaultSynth,
     onDraw: useCallback(markEvent(editor), [editor])
   });
+  const [uiHidden, setUiHidden] = useState(false);
   const logBox = useRef();
   useLayoutEffect(() => {
     logBox.current.scrollTop = logBox.current?.scrollHeight;
@@ -67,18 +68,40 @@ function App() {
   return /* @__PURE__ */ React.createElement("div", {
     className: "min-h-screen flex flex-col"
   }, /* @__PURE__ */ React.createElement("header", {
-    className: "flex-none w-full h-16 px-2 flex border-b border-gray-200 bg-white justify-between z-[10]"
+    className: cx("flex-none w-full h-14 px-2 flex border-b border-gray-200  justify-between z-[10]", uiHidden ? "bg-transparent text-white" : "bg-white")
   }, /* @__PURE__ */ React.createElement("div", {
     className: "flex items-center space-x-2"
   }, /* @__PURE__ */ React.createElement("img", {
     src: logo,
-    className: "Tidal-logo w-16 h-16",
+    className: "Tidal-logo w-12 h-12",
     alt: "logo"
   }), /* @__PURE__ */ React.createElement("h1", {
     className: "text-2xl"
   }, "Strudel REPL")), /* @__PURE__ */ React.createElement("div", {
     className: "flex space-x-4"
   }, /* @__PURE__ */ React.createElement("button", {
+    onClick: () => togglePlay()
+  }, !pending ? /* @__PURE__ */ React.createElement("span", {
+    className: "flex items-center w-16"
+  }, cycle.started ? /* @__PURE__ */ React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "h-5 w-5",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, /* @__PURE__ */ React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z",
+    clipRule: "evenodd"
+  })) : /* @__PURE__ */ React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "h-5 w-5",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  }, /* @__PURE__ */ React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z",
+    clipRule: "evenodd"
+  })), cycle.started ? "pause" : "play") : /* @__PURE__ */ React.createElement(React.Fragment, null, "loading...")), /* @__PURE__ */ React.createElement("button", {
     onClick: async () => {
       const _code = getRandomTune();
       console.log("tune", _code);
@@ -86,14 +109,16 @@ function App() {
       const parsed = await evaluate(_code);
       setPattern(parsed.pattern);
     }
-  }, "🎲 random tune"), /* @__PURE__ */ React.createElement("button", null, /* @__PURE__ */ React.createElement("a", {
+  }, "🎲 random"), /* @__PURE__ */ React.createElement("button", null, /* @__PURE__ */ React.createElement("a", {
     href: "./tutorial"
-  }, "📚 tutorial")))), /* @__PURE__ */ React.createElement("section", {
+  }, "📚 tutorial")), /* @__PURE__ */ React.createElement("button", {
+    onClick: () => setUiHidden((c) => !c)
+  }, "👀 ", uiHidden ? "show ui" : "hide ui"))), /* @__PURE__ */ React.createElement("section", {
     className: "grow flex flex-col text-gray-100"
   }, /* @__PURE__ */ React.createElement("div", {
     className: "grow relative"
   }, /* @__PURE__ */ React.createElement("div", {
-    className: cx("h-full", error ? "focus:ring-red-500" : "focus:ring-slate-800")
+    className: cx("h-full transition-opacity", error ? "focus:ring-red-500" : "focus:ring-slate-800", uiHidden ? "opacity-0" : "opacity-100")
   }, /* @__PURE__ */ React.createElement(CodeMirror, {
     value: code,
     editorDidMount: setEditor,
@@ -106,16 +131,13 @@ function App() {
     },
     onChange: (_2, __, value) => setCode(value)
   }), /* @__PURE__ */ React.createElement("span", {
-    className: "p-4 absolute top-0 right-0 text-xs whitespace-pre text-right"
+    className: "p-4 absolute top-0 right-0 text-xs whitespace-pre text-right pointer-events-none"
   }, !cycle.started ? `press ctrl+enter to play
 ` : dirty ? `ctrl+enter to update
 ` : "no changes\n")), error && /* @__PURE__ */ React.createElement("div", {
     className: cx("absolute right-2 bottom-2 px-2", "text-red-500")
-  }, error?.message || "unknown error")), /* @__PURE__ */ React.createElement("button", {
+  }, error?.message || "unknown error")), /* @__PURE__ */ React.createElement("textarea", {
-    className: "z-[10] flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500",
+    className: "z-[10] h-16 border-0 text-xs bg-[transparent] border-t border-slate-600 resize-none",
-    onClick: () => togglePlay()
-  }, !pending ? /* @__PURE__ */ React.createElement(React.Fragment, null, cycle.started ? "pause" : "play") : /* @__PURE__ */ React.createElement(React.Fragment, null, "loading...")), /* @__PURE__ */ React.createElement("textarea", {
-    className: "z-[10] grow border-0 text-xs min-h-[200px] bg-[transparent]",
     value: log,
     readOnly: true,
     ref: logBox,

docs/dist/draw.js

@@ -1,4 +1,5 @@
 import * as Tone from "../_snowpack/pkg/tone.js";
+import {Pattern} from "../_snowpack/link/strudel.js";
 export const getDrawContext = (id = "test-canvas") => {
   let canvas = document.querySelector("#" + id);
   if (!canvas) {
@@ -11,31 +12,28 @@ export const getDrawContext = (id = "test-canvas") => {
   }
   return canvas.getContext("2d");
 };
-export const draw = (callback) => {
+Pattern.prototype.draw = function(callback, queryDuration) {
   if (window.strudelAnimation) {
     cancelAnimationFrame(window.strudelAnimation);
   }
-  const animate = (t) => {
+  const ctx = getDrawContext();
-    callback(t);
+  let cycle, events = [];
+  const animate = (time) => {
+    const t = Tone.getTransport().seconds;
+    if (queryDuration) {
+      const currentCycle = Math.floor(t / queryDuration);
+      if (cycle !== currentCycle) {
+        cycle = currentCycle;
+        const begin = currentCycle * queryDuration;
+        const end = (currentCycle + 1) * queryDuration;
+        events = this.add(0).query(new State(new TimeSpan(begin, end)));
+      }
+    }
+    callback(ctx, events, t, queryDuration, time);
     window.strudelAnimation = requestAnimationFrame(animate);
   };
   requestAnimationFrame(animate);
-};
+  return this;
-export const queryEvents = (pattern, callback, seconds) => {
-  const queryEvents2 = () => {
-    const t = Tone.getTransport().seconds;
-    const begin = Math.floor(t / seconds) * seconds;
-    const end = begin + seconds * 4;
-    const events = pattern.add(0).query(new State(new TimeSpan(begin, end)));
-    callback(events);
-  };
-  queryEvents2();
-  if (window.strudelScheduler) {
-    clearInterval(window.strudelScheduler);
-  }
-  window.strudelScheduler = setInterval(() => {
-    queryEvents2();
-  }, seconds * 1.5 * 1e3);
 };
 export const cleanup = () => {
   const ctx = getDrawContext();

docs/dist/evaluate.js

@@ -7,6 +7,7 @@ import "./xen.js";
 import "./tune.js";
 import "./tune.js";
 import "./pianoroll.js";
+import "./draw.js";
 import * as drawHelpers from "./draw.js";
 import gist from "./gist.js";
 import shapeshifter from "./shapeshifter.js";

docs/dist/pianoroll.js

@@ -1,34 +1,29 @@
-import {draw, queryEvents, getDrawContext} from "./draw.js";
 import {Pattern} from "../_snowpack/link/strudel.js";
-import * as Tone from "../_snowpack/pkg/tone.js";
+Pattern.prototype.pianoroll = function({
-Pattern.prototype.pianoroll = function() {
+  timeframe = 10,
-  const ctx = getDrawContext();
+  inactive = "#C9E597",
+  active = "#FFCA28",
+  background = "#2A3236",
+  maxMidi = 90,
+  minMidi = 0
+} = {}) {
   const w = window.innerWidth;
   const h = window.innerHeight;
-  const s = 10;
+  const midiRange = maxMidi - minMidi + 1;
-  const maxMidi = 90;
+  const height = h / midiRange;
-  const height = h / maxMidi;
+  this.draw((ctx, events, t) => {
-  let events;
+    ctx.fillStyle = background;
-  queryEvents(this, (_events) => events = _events, s);
-  const clear = () => ctx.clearRect(0, 0, w, h);
-  const drawEvents = (events2) => {
-    events2.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;
-      ctx.fillRect(x - offset + margin, y, width, height);
-    });
-  };
-  draw((t) => {
-    clear();
-    ctx.fillStyle = "#2A3236";
     ctx.fillRect(0, 0, w, h);
-    drawEvents(events);
+    events.forEach((event) => {
-  });
+      const isActive = event.whole.begin <= t && event.whole.end >= t;
+      ctx.fillStyle = isActive ? active : inactive;
+      const x = Math.round(event.whole.begin / timeframe * w);
+      const width = Math.round((event.whole.end - event.whole.begin) / timeframe * w);
+      const y = Math.round(h - (Number(event.value) - minMidi) / midiRange * h);
+      const offset = t / timeframe * w;
+      const margin = 0;
+      ctx.fillRect(x - offset + margin + 1, y + 1, width - 2, height - 2);
+    });
+  }, timeframe * 2);
   return this;
 };

docs/dist/tunejs.js

@@ -143,10 +143,10 @@ Tune.prototype.loadScale = function(name){
 	}
 
 	/* visualize in console */
-	console.log(" ");
+/* 	console.log(" ");
 	console.log("LOADED "+name);
 	console.log(TuningList[name].description);
-	console.log(this.scale);
+	console.log(this.scale); */
 	var vis = [];
 	for (var i=0;i<100;i++) {
 		vis[i] = " ";
@@ -163,8 +163,8 @@ Tune.prototype.loadScale = function(name){
 	for (var i=0;i<vis.length;i++) {
 		textvis += vis[i];
 	}
-	console.log(name)
+/* 	console.log(name)
-	console.log(textvis)
+	console.log(textvis) */
 	// ET scale vis
 	var vis = [];
 	for (var i=0;i<100;i++) {
@@ -183,8 +183,8 @@ Tune.prototype.loadScale = function(name){
 	for (var i=0;i<vis.length;i++) {
 		textvis += vis[i];
 	}
-	console.log(textvis)
+/* 	console.log(textvis)
-	console.log("equal-tempered major (reference)")
+	console.log("equal-tempered major (reference)") */
 
 }
 

docs/global.css

@@ -927,6 +927,9 @@ select {
 .prose > :where(:last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 0;
 }
+.pointer-events-none {
+  pointer-events: none;
+}
 .static {
   position: static;
 }
@@ -967,24 +970,30 @@ select {
 .contents {
   display: contents;
 }
-.h-16 {
+.h-14 {
-  height: 4rem;
+  height: 3.5rem;
 }
-.h-full {
+.h-12 {
-  height: 100%;
+  height: 3rem;
 }
 .h-5 {
   height: 1.25rem;
 }
+.h-full {
+  height: 100%;
+}
+.h-16 {
+  height: 4rem;
+}
 .min-h-screen {
   min-height: 100vh;
 }
-.min-h-\[200px\] {
-  min-height: 200px;
-}
 .w-full {
   width: 100%;
 }
+.w-12 {
+  width: 3rem;
+}
 .w-16 {
   width: 4rem;
 }
@@ -1022,6 +1031,9 @@ select {
 .cursor-not-allowed {
   cursor: not-allowed;
 }
+.resize-none {
+  resize: none;
+}
 .flex-col {
   flex-direction: column;
 }
@@ -1066,12 +1078,12 @@ select {
 .rounded-md {
   border-radius: 0.375rem;
 }
-.border {
-  border-width: 1px;
-}
 .border-0 {
   border-width: 0px;
 }
+.border {
+  border-width: 1px;
+}
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1085,25 +1097,28 @@ select {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
-.border-gray-700 {
+.border-slate-600 {
   --tw-border-opacity: 1;
-  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+  border-color: rgb(71 85 105 / var(--tw-border-opacity));
 }
 .border-slate-500 {
   --tw-border-opacity: 1;
   border-color: rgb(100 116 139 / var(--tw-border-opacity));
 }
+.bg-transparent {
+  background-color: transparent;
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
+.bg-\[transparent\] {
+  background-color: transparent;
+}
 .bg-slate-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(51 65 85 / 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));
@@ -1111,9 +1126,6 @@ select {
 .p-4 {
   padding: 1rem;
 }
-.p-2 {
-  padding: 0.5rem;
-}
 .p-1 {
   padding: 0.25rem;
 }
@@ -1139,6 +1151,10 @@ select {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .text-gray-100 {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
@@ -1147,10 +1163,6 @@ select {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
 .text-slate-400 {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity));
@@ -1159,9 +1171,20 @@ select {
   --tw-text-opacity: 1;
   color: rgb(254 202 202 / var(--tw-text-opacity));
 }
+.opacity-0 {
+  opacity: 0;
+}
+.opacity-100 {
+  opacity: 1;
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 
 body {
   background-color: #2a3236;
@@ -1171,24 +1194,11 @@ body {
 .CodeMirror {
   height: 100% !important;
   background-color: transparent !important;
-  //font-size: 15px;
+  font-size: 15px;
 }
 
-.CodeMirror-line span {
+.CodeMirror-line > span {
-  background-color: #2a323660;
+  background-color: #2a323690;
-}
-
-.CodeMirror-code {
-  //padding: 10px;
-}
-
-.CodeMirror-linenumber {
-  background-color: transparent !important;
-}
-
-.hover\:bg-slate-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
 }
 
 .hover\:bg-slate-600:hover {

docs/tutorial/index.4949a046.css

@@ -674,6 +674,8 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-top: 0;
 }.prose > :where(:last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 0;
+}.pointer-events-none {
+  pointer-events: none;
 }.static {
   position: static;
 }.absolute {
@@ -701,18 +703,22 @@ Ensure the default browser behavior of the `hidden` attribute.
   display: inline-flex;
 }.contents {
   display: contents;
-}.h-16 {
+}.h-14 {
-  height: 4rem;
+  height: 3.5rem;
-}.h-full {
+}.h-12 {
-  height: 100%;
+  height: 3rem;
 }.h-5 {
   height: 1.25rem;
+}.h-full {
+  height: 100%;
+}.h-16 {
+  height: 4rem;
 }.min-h-screen {
   min-height: 100vh;
-}.min-h-\[200px\] {
-  min-height: 200px;
 }.w-full {
   width: 100%;
+}.w-12 {
+  width: 3rem;
 }.w-16 {
   width: 4rem;
 }.w-5 {
@@ -740,6 +746,8 @@ Ensure the default browser behavior of the `hidden` attribute.
           animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }.cursor-not-allowed {
   cursor: not-allowed;
+}.resize-none {
+  resize: none;
 }.flex-col {
   flex-direction: column;
 }.items-center {
@@ -772,10 +780,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   white-space: pre;
 }.rounded-md {
   border-radius: 0.375rem;
-}.border {
-  border-width: 1px;
 }.border-0 {
   border-width: 0px;
+}.border {
+  border-width: 1px;
 }.border-b {
   border-bottom-width: 1px;
 }.border-t {
@@ -785,27 +793,27 @@ Ensure the default browser behavior of the `hidden` attribute.
 }.border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
-}.border-gray-700 {
+}.border-slate-600 {
   --tw-border-opacity: 1;
-  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+  border-color: rgb(71 85 105 / var(--tw-border-opacity));
 }.border-slate-500 {
   --tw-border-opacity: 1;
   border-color: rgb(100 116 139 / var(--tw-border-opacity));
+}.bg-transparent {
+  background-color: transparent;
 }.bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}.bg-\[transparent\] {
+  background-color: transparent;
 }.bg-slate-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(51 65 85 / 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));
 }.p-4 {
   padding: 1rem;
-}.p-2 {
-  padding: 0.5rem;
 }.p-1 {
   padding: 0.25rem;
 }.px-2 {
@@ -824,32 +832,37 @@ Ensure the default browser behavior of the `hidden` attribute.
 }.text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
+}.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }.text-gray-100 {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
 }.text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
-}.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
 }.text-slate-400 {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity));
 }.text-red-200 {
   --tw-text-opacity: 1;
   color: rgb(254 202 202 / var(--tw-text-opacity));
+}.opacity-0 {
+  opacity: 0;
+}.opacity-100 {
+  opacity: 1;
 }.filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
 }.react-codemirror2,
 .CodeMirror {
   width: 100% !important;
   height: inherit !important;
 }main {
   margin: 0 auto;
-}.hover\:bg-slate-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
 }.hover\:bg-slate-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@@ -1348,4 +1361,4 @@ span.CodeMirror-selectedtext { background: none; }
   color: white !important;
 }
 
-/*# sourceMappingURL=index.9b9efe63.css.map */
+/*# sourceMappingURL=index.4949a046.css.map */

docs/tutorial/index.9717dc33.js

@@ -64459,11 +64459,10 @@ exports.default = Tune;
     /* load the scale */ var freqs = TuningList[name].frequencies;
     this.scale = [];
     for(var i = 0; i < freqs.length - 1; i++)this.scale.push(freqs[i] / freqs[0]);
-    /* visualize in console */ console.log(" ");
+    /* visualize in console */ /* 	console.log(" ");
-    console.log("LOADED " + name);
+	console.log("LOADED "+name);
-    console.log(TuningList[name].description);
+	console.log(TuningList[name].description);
-    console.log(this.scale);
+	console.log(this.scale); */ var vis = [];
-    var vis = [];
     for(var i = 0; i < 100; i++)vis[i] = " ";
     for(var i = 0; i < this.scale.length; i++){
         var spot = Math.round(this.scale[i] * 100 - 100);
@@ -64472,9 +64471,8 @@ exports.default = Tune;
     }
     var textvis = "";
     for(var i = 0; i < vis.length; i++)textvis += vis[i];
-    console.log(name);
+    /* 	console.log(name)
-    console.log(textvis);
+	console.log(textvis) */ // ET scale vis
-    // ET scale vis
     var vis = [];
     for(var i = 0; i < 100; i++)vis[i] = " ";
     for(var i = 0; i < this.etmajor.length; i++){
@@ -64484,9 +64482,8 @@ exports.default = Tune;
     }
     var textvis = "";
     for(var i = 0; i < vis.length; i++)textvis += vis[i];
-    console.log(textvis);
+/* 	console.log(textvis)
-    console.log("equal-tempered major (reference)");
+	console.log("equal-tempered major (reference)") */ };
-};
 /* Search the names of tunings
 	 Returns an array of names of tunings */ Tune.prototype.search = function(letters) {
     var possible = [];
@@ -136146,57 +136143,39 @@ Tune.prototype.isValidScale = function(name) {
 };
 
 },{"@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({ timeframe =10 , inactive ='#C9E597' , active ='#FFCA28' , background ='#2A3236' , maxMidi =90 , minMidi =0 ,  } = {
-_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 midiRange = maxMidi - minMidi + 1;
-    const maxMidi = 90;
+    const height = h / midiRange;
-    const height = h / maxMidi;
+    this.draw((ctx, events, t)=>{
-    let events1;
+        ctx.fillStyle = background;
-    _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);
+        events.forEach((event)=>{
-    });
+            const isActive = event.whole.begin <= t && event.whole.end >= t;
+            ctx.fillStyle = isActive ? active : inactive;
+            const x = Math.round(event.whole.begin / timeframe * w);
+            const width = Math.round((event.whole.end - event.whole.begin) / timeframe * w);
+            const y = Math.round(h - (Number(event.value) - minMidi) / midiRange * h);
+            const offset = t / timeframe * w;
+            const margin = 0;
+            ctx.fillRect(x - offset + margin + 1, y + 1, width - 2, height - 2);
+        });
+    }, timeframe * 2);
     return this;
 };
 
-},{"./draw.mjs":"dHJhg","../../strudel.mjs":"ggZqJ","tone":"2tCfN"}],"dHJhg":[function(require,module,exports) {
+},{"../../strudel.mjs":"ggZqJ"}],"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");
+var _strudelMjs = require("../../strudel.mjs");
 const getDrawContext = (id = 'test-canvas')=>{
     let canvas = document.querySelector('#' + id);
     if (!canvas) {
@@ -136209,28 +136188,26 @@ const getDrawContext = (id = 'test-canvas')=>{
     }
     return canvas.getContext('2d');
 };
-const draw = (callback)=>{
+_strudelMjs.Pattern.prototype.draw = function(callback, queryDuration) {
     if (window.strudelAnimation) cancelAnimationFrame(window.strudelAnimation);
-    const animate = (t)=>{
+    const ctx = getDrawContext();
-        callback(t);
+    let cycle, events = [];
+    const animate = (time)=>{
+        const t = _tone.getTransport().seconds;
+        if (queryDuration) {
+            const currentCycle = Math.floor(t / queryDuration);
+            if (cycle !== currentCycle) {
+                cycle = currentCycle;
+                const begin = currentCycle * queryDuration;
+                const end = (currentCycle + 1) * queryDuration;
+                events = this.add(0).query(new State(new TimeSpan(begin, end)));
+            }
+        }
+        callback(ctx, events, t, queryDuration, time);
         window.strudelAnimation = requestAnimationFrame(animate);
     };
     requestAnimationFrame(animate);
-};
+    return this;
-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();
@@ -136239,7 +136216,7 @@ const cleanup = ()=>{
     if (window.strudelScheduler) clearInterval(window.strudelScheduler);
 };
 
-},{"tone":"2tCfN","@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}],"fYZxP":[function(require,module,exports) {
+},{"tone":"2tCfN","../../strudel.mjs":"ggZqJ","@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()
@@ -183013,4 +182990,4 @@ exports.default = cx;
 
 },{"@parcel/transformer-js/src/esmodule-helpers.js":"gkKU3"}]},["3uVTb"], "3uVTb", "parcelRequire94c2")
 
-//# sourceMappingURL=index.dbbfddd8.js.map
+//# sourceMappingURL=index.9717dc33.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.9b9efe63.css">
+    <link rel="stylesheet" type="text/css" href="/tutorial/index.4949a046.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.dbbfddd8.js" defer=""></script>
+    <script src="/tutorial/index.9717dc33.js" defer=""></script>
   </body>
 </html>