move draw stuff from tone to core + fix getPhase

packages/core/cyclist.mjs

@@ -46,8 +46,8 @@ export class Cyclist {
       interval, // duration of each cycle
     );
   }
-  getPhase(latencyCompensation = true) {
-    return this.phase - (latencyCompensation ? this.latency : 0);
+  getPhase() {
+    return this.getTime() - this.origin;
   }
   setStarted(v) {
     this.started = v;

packages/core/draw.mjs

@@ -0,0 +1,61 @@
+/*
+draw.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/tone/draw.mjs>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Pattern, getTime } from './index.mjs';
+
+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;z-index:5';
+    document.body.prepend(canvas);
+  }
+  return canvas.getContext('2d');
+};
+
+Pattern.prototype.draw = function (callback, { from, to, onQuery }) {
+  if (window.strudelAnimation) {
+    cancelAnimationFrame(window.strudelAnimation);
+  }
+  const ctx = getDrawContext();
+  let cycle,
+    events = [];
+  const animate = (time) => {
+    const t = getTime();
+    if (from !== undefined && to !== undefined) {
+      const currentCycle = Math.floor(t);
+      if (cycle !== currentCycle) {
+        cycle = currentCycle;
+        const begin = currentCycle + from;
+        const end = currentCycle + to;
+        setTimeout(() => {
+          events = this.query(new State(new TimeSpan(begin, end)))
+            .filter(Boolean)
+            .filter((event) => event.part.begin.equals(event.whole.begin));
+          onQuery?.(events);
+        }, 0);
+      }
+    }
+    callback(ctx, events, t, time);
+    window.strudelAnimation = requestAnimationFrame(animate);
+  };
+  requestAnimationFrame(animate);
+  return this;
+};
+
+export const cleanupDraw = () => {
+  const ctx = getDrawContext();
+  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
+  if (window.strudelAnimation) {
+    cancelAnimationFrame(window.strudelAnimation);
+  }
+  if (window.strudelScheduler) {
+    clearInterval(window.strudelScheduler);
+  }
+};

packages/core/evaluate.mjs

@@ -4,9 +4,7 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import * as strudel from '@strudel.cycles/core';
-
-const { isPattern, Pattern } = strudel;
+import { isPattern, Pattern } from './index.mjs';
 
 let scoped = false;
 export const evalScope = async (...args) => {

packages/core/index.mjs

@@ -19,6 +19,10 @@ export * from './speak.mjs';
 export * from './evaluate.mjs';
 export * from './repl.mjs';
 export * from './logger.mjs';
+export * from './time.mjs';
+export * from './draw.mjs';
+export * from './pianoroll.mjs';
+export * from './ui.mjs';
 export { default as drawLine } from './drawLine.mjs';
 export { default as gist } from './gist.js';
 // below won't work with runtime.mjs (json import fails)

packages/core/pianoroll.mjs

@@ -0,0 +1,147 @@
+/*
+pianoroll.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/tone/pianoroll.mjs>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Pattern } from './index.mjs';
+
+const scale = (normalized, min, max) => normalized * (max - min) + min;
+const getValue = (e) => {
+  let value = typeof e.value === 'object' ? e.value.note ?? e.value.n : e.value;
+  if (typeof value === 'string') {
+    value = toMidi(value);
+  }
+  return value;
+};
+
+Pattern.prototype.pianoroll = function ({
+  cycles = 4,
+  playhead = 0.5,
+  overscan = 1,
+  flipTime = 0,
+  flipValues = 0,
+  hideNegative = false,
+  // inactive = '#C9E597',
+  // inactive = '#FFCA28',
+  inactive = '#7491D2',
+  active = '#FFCA28',
+  // background = '#2A3236',
+  background = 'transparent',
+  smear = 0,
+  playheadColor = 'white',
+  minMidi = 10,
+  maxMidi = 90,
+  autorange = 0,
+  timeframe: timeframeProp,
+  fold = 0,
+  vertical = 0,
+} = {}) {
+  const ctx = getDrawContext();
+  const w = ctx.canvas.width;
+  const h = ctx.canvas.height;
+  let from = -cycles * playhead;
+  let to = cycles * (1 - playhead);
+
+  if (timeframeProp) {
+    console.warn('timeframe is deprecated! use from/to instead');
+    from = 0;
+    to = timeframeProp;
+  }
+  if (!autorange && fold) {
+    console.warn('disabling autorange has no effect when fold is enabled');
+  }
+  const timeAxis = vertical ? h : w;
+  const valueAxis = vertical ? w : h;
+  let timeRange = vertical ? [timeAxis, 0] : [0, timeAxis]; // pixel range for time
+  const timeExtent = to - from; // number of seconds that fit inside the canvas frame
+  const valueRange = vertical ? [0, valueAxis] : [valueAxis, 0]; // pixel range for values
+  let valueExtent = maxMidi - minMidi + 1; // number of "slots" for values, overwritten if autorange true
+  let barThickness = valueAxis / valueExtent; // pixels per value, overwritten if autorange true
+  let foldValues = [];
+  flipTime && timeRange.reverse();
+  flipValues && valueRange.reverse();
+
+  this.draw(
+    (ctx, events, t) => {
+      ctx.fillStyle = background;
+      ctx.globalAlpha = 1; // reset!
+      if (!smear) {
+        ctx.clearRect(0, 0, w, h);
+        ctx.fillRect(0, 0, w, h);
+      }
+      const inFrame = (event) =>
+        (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= t + to && event.whole.end >= t + from;
+      events.filter(inFrame).forEach((event) => {
+        const isActive = event.whole.begin <= t && event.whole.end > t;
+        ctx.fillStyle = event.context?.color || inactive;
+        ctx.strokeStyle = event.context?.color || active;
+        ctx.globalAlpha = event.context.velocity ?? 1;
+        const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
+        let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
+        const value = getValue(event);
+        const valuePx = scale(
+          fold ? foldValues.indexOf(value) / foldValues.length : (Number(value) - minMidi) / valueExtent,
+          ...valueRange,
+        );
+        let margin = 0;
+        const offset = scale(t / timeExtent, ...timeRange);
+        let coords;
+        if (vertical) {
+          coords = [
+            valuePx + 1 - (flipValues ? barThickness : 0), // x
+            timeAxis - offset + timePx + margin + 1 - (flipTime ? 0 : durationPx), // y
+            barThickness - 2, // width
+            durationPx - 2, // height
+          ];
+        } else {
+          coords = [
+            timePx - offset + margin + 1 - (flipTime ? durationPx : 0), // x
+            valuePx + 1 - (flipValues ? 0 : barThickness), // y
+            durationPx - 2, // widith
+            barThickness - 2, // height
+          ];
+        }
+        isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
+      });
+      ctx.globalAlpha = 1; // reset!
+      const playheadPosition = scale(-from / timeExtent, ...timeRange);
+      // draw playhead
+      ctx.strokeStyle = playheadColor;
+      ctx.beginPath();
+      if (vertical) {
+        ctx.moveTo(0, playheadPosition);
+        ctx.lineTo(valueAxis, playheadPosition);
+      } else {
+        ctx.moveTo(playheadPosition, 0);
+        ctx.lineTo(playheadPosition, valueAxis);
+      }
+      ctx.stroke();
+    },
+    {
+      from: from - overscan,
+      to: to + overscan,
+      onQuery: (events) => {
+        const { min, max, values } = events.reduce(
+          ({ min, max, values }, e) => {
+            const v = getValue(e);
+            return {
+              min: v < min ? v : min,
+              max: v > max ? v : max,
+              values: values.includes(v) ? values : [...values, v],
+            };
+          },
+          { min: Infinity, max: -Infinity, values: [] },
+        );
+        if (autorange) {
+          minMidi = min;
+          maxMidi = max;
+          valueExtent = maxMidi - minMidi + 1;
+        }
+        foldValues = values.sort((a, b) => a - b);
+        barThickness = fold ? valueAxis / foldValues.length : valueAxis / valueExtent;
+      },
+    },
+  );
+  return this;
+};

packages/core/repl.mjs

@@ -1,6 +1,7 @@
 import { Cyclist } from './cyclist.mjs';
 import { evaluate as _evaluate } from './evaluate.mjs';
 import { logger } from './logger.mjs';
+import { setTime } from './time.mjs';
 
 export function repl({
   interval,
@@ -33,6 +34,7 @@ export function repl({
     getTime,
     onToggle,
   });
+  setTime(() => scheduler.getPhase()); // TODO: refactor?
   const evaluate = async (code, autostart = true) => {
     if (!code) {
       throw new Error('no code to evaluate');

packages/core/time.mjs

@@ -0,0 +1,13 @@
+console.log('load time.mjs');
+let time;
+export function getTime() {
+  if (!time) {
+    throw new Error('no time set! use setTime to define a time source');
+  }
+  return time();
+}
+
+export function setTime(func) {
+  console.log('setTime!');
+  time = func;
+}

packages/core/ui.mjs

@@ -0,0 +1,56 @@
+/*
+ui.mjs - <short description TODO>
+Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/tone/ui.mjs>
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { getTime } from './time.mjs';
+
+export const hideHeader = () => {
+  document.getElementById('header').style = 'display:none';
+};
+
+function frame(callback) {
+  if (window.strudelAnimation) {
+    cancelAnimationFrame(window.strudelAnimation);
+  }
+  const animate = (animationTime) => {
+    callback(animationTime, getTime());
+    window.strudelAnimation = requestAnimationFrame(animate);
+  };
+  requestAnimationFrame(animate);
+}
+
+export const backgroundImage = function (src, animateOptions = {}) {
+  const container = document.getElementById('code');
+  const bg = 'background-image:url(' + src + ');background-size:contain;';
+  container.style = bg;
+  const { className: initialClassName } = container;
+  const handleOption = (option, value) => {
+    ({
+      style: () => (container.style = bg + ';' + value),
+      className: () => (container.className = value + ' ' + initialClassName),
+    }[option]());
+  };
+  const funcOptions = Object.entries(animateOptions).filter(([_, v]) => typeof v === 'function');
+  const stringOptions = Object.entries(animateOptions).filter(([_, v]) => typeof v === 'string');
+  stringOptions.forEach(([option, value]) => handleOption(option, value));
+
+  if (funcOptions.length === 0) {
+    return;
+  }
+  frame((_, t) =>
+    funcOptions.forEach(([option, value]) => {
+      handleOption(option, value(t));
+    }),
+  );
+};
+
+export const cleanupUi = () => {
+  const container = document.getElementById('code');
+  if (container) {
+    container.style = '';
+    // TODO: find a way to remove that duplication..
+    container.className = 'grow flex text-gray-100 relative overflow-auto cursor-text pb-0'; // has to match App.tsx
+  }
+};