Merge pull request #95 from Bubobubobubobubo/topas

Experimental Workshop Branch

package.json

@@ -43,6 +43,7 @@
     "unique-names-generator": "^4.7.1",
     "vite-plugin-markdown": "^2.1.0",
     "zifferjs": "^0.0.44",
+    "zyklus": "^0.1.4",
     "zzfx": "^1.2.0"
   }
 }

src/API.ts

@@ -1581,7 +1581,9 @@ export class UserAPI {
   // Low Frequency Oscillators
   // =============================================================
 
-  line = (start: number, end: number, step: number = 1): number[] => {
+  public range = (v: number, a: number, b: number): number => v * (b - a) + a;
+
+  public line = (start: number, end: number, step: number = 1): number[] => {
     /**
      * Returns an array of values between start and end, with a given step.
      *
@@ -1603,7 +1605,11 @@ export class UserAPI {
     return result;
   };
 
-  sine = (freq: number = 1, times: number = 1, offset: number = 0): number => {
+  public sine = (
+    freq: number = 1,
+    times: number = 1,
+    offset: number = 0,
+  ): number => {
     /**
      * Returns a sine wave between -1 and 1.
      *
@@ -1617,7 +1623,11 @@ export class UserAPI {
     );
   };
 
-  usine = (freq: number = 1, times: number = 1, offset: number = 0): number => {
+  public usine = (
+    freq: number = 1,
+    times: number = 1,
+    offset: number = 0,
+  ): number => {
     /**
      * Returns a sine wave between 0 and 1.
      *
@@ -1780,18 +1790,6 @@ export class UserAPI {
     return sum / values.length;
   };
 
-  public range = (
-    inputY: number,
-    yMin: number,
-    yMax: number,
-    xMin: number,
-    xMax: number,
-  ): number => {
-    const percent = (inputY - yMin) / (yMax - yMin);
-    const outputX = percent * (xMax - xMin) + xMin;
-    return outputX;
-  };
-
   limit = (value: number, min: number, max: number): number => {
     /**
      * Limits a value between a minimum and a maximum.
@@ -2101,19 +2099,6 @@ export class UserAPI {
   // Transport functions
   // =============================================================
 
-  public nudge = (nudge?: number): number => {
-    /**
-     * Sets or returns the current clock nudge.
-     *
-     * @param nudge - [optional] the nudge to set
-     * @returns The current nudge
-     */
-    if (nudge) {
-      this.app.clock.nudge = nudge;
-    }
-    return this.app.clock.nudge;
-  };
-
   public tempo = (n?: number): number => {
     /**
      * Sets or returns the current bpm.

src/Clock.ts

@@ -1,7 +1,11 @@
-// @ts-ignore
-import { TransportNode } from "./TransportNode";
-import TransportProcessor from "./TransportProcessor?worker&url";
 import { Editor } from "./main";
+import { tryEvaluate } from "./Evaluator";
+// @ts-ignore
+import { getAudioContext } from "superdough";
+// @ts-ignore
+import "zyklus";
+const zeroPad = (num: number, places: number) =>
+  String(num).padStart(places, "0");
 
 export interface TimePosition {
   /**
@@ -18,35 +22,29 @@ export interface TimePosition {
 
 export class Clock {
   /**
-   * The Clock Class is responsible for keeping track of the current time.
-   * It is also responsible for starting and stopping the Clock TransportNode.
    *
-   * @param app - The main application instance
+   * @param app - main application instance
-   * @param ctx - The current AudioContext used by app
+   * @param clock - zyklus clock
-   * @param transportNode - The TransportNode helper
+   * @param ctx - current AudioContext used by app
-   * @param bpm - The current beats per minute value
+   * @param bpm - current beats per minute value
-   * @param time_signature - The time signature
+   * @param time_signature - time signature
-   * @param time_position - The current time position
+   * @param time_position - current time position
-   * @param ppqn - The pulses per quarter note
+   * @param ppqn - pulses per quarter note
-   * @param tick - The current tick since origin
+   * @param tick - current tick since origin
    * @param running - Is the clock running?
-   * @param lastPauseTime - The last time the clock was paused
-   * @param lastPlayPressTime - The last time the clock was started
-   * @param totalPauseTime - The total time the clock has been paused / stopped
    */
 
+  private _bpm: number;
+  private _ppqn: number;
+  clock: any;
   ctx: AudioContext;
   logicalTime: number;
-  transportNode: TransportNode | null;
-  private _bpm: number;
   time_signature: number[];
   time_position: TimePosition;
-  private _ppqn: number;
   tick: number;
   running: boolean;
-  lastPauseTime: number;
+  timeviewer: HTMLElement;
-  lastPlayPressTime: number;
+  deadline: number;
-  totalPauseTime: number;
 
   constructor(
     public app: Editor,
@@ -58,31 +56,58 @@ export class Clock {
     this.tick = 0;
     this._bpm = 120;
     this._ppqn = 48;
-    this.transportNode = null;
     this.ctx = ctx;
     this.running = true;
-    this.lastPauseTime = 0;
+    this.deadline = 0;
-    this.lastPlayPressTime = 0;
+    this.timeviewer = document.getElementById("timeviewer")!;
-    this.totalPauseTime = 0;
+    this.clock = getAudioContext().createClock(
-    ctx.audioWorklet
+      this.clockCallback,
-      .addModule(TransportProcessor)
+      this.pulse_duration,
-      .then((e) => {
+    );
-        this.transportNode = new TransportNode(ctx, {}, this.app);
-        this.transportNode.connect(ctx.destination);
-        return e;
-      })
-      .catch((e) => {
-        console.log("Error loading TransportProcessor.js:", e);
-      });
   }
 
+  // @ts-ignore
+  clockCallback = (time: number, duration: number, tick: number) => {
+    /**
+     * Callback function for the zyklus clock. Updates the clock info and sends a 
+     * MIDI clock message if the setting is enabled. Also evaluates the global buffer.
+     * 
+     * @param time - precise AudioContext time when the tick should happen
+     * @param duration -  seconds between each tick
+     * @param tick - count of the current tick
+     */
+    let deadline = time - getAudioContext().currentTime;
+    this.deadline = deadline;
+    this.tick = tick;
+    if (this.app.clock.running) {
+      if (this.app.settings.send_clock) {
+        this.app.api.MidiConnection.sendMidiClock();
+      }
+      const futureTimeStamp = this.app.clock.convertTicksToTimeposition(
+        this.app.clock.tick,
+      );
+      this.app.clock.time_position = futureTimeStamp;
+      if (futureTimeStamp.pulse % this.app.clock.ppqn == 0) {
+        this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${futureTimeStamp.beat + 1
+          } / ${this.app.clock.bpm}`;
+      }
+      if (this.app.exampleIsPlaying) {
+        tryEvaluate(this.app, this.app.example_buffer);
+      } else {
+        tryEvaluate(this.app, this.app.global_buffer);
+      }
+    }
+
+    // Implement TransportNode clock callback and update clock info with it
+  };
+
   convertTicksToTimeposition(ticks: number): TimePosition {
     /**
-     * Converts ticks to a TimePosition object.
+     * Converts ticks to a time position. 
-     * @param ticks The number of ticks to convert.
+     * 
-     * @returns The TimePosition object representing the converted ticks.
+     * @param ticks - ticks to convert
+     * @returns TimePosition
      */
-
     const beatsPerBar = this.app.clock.time_signature[0];
     const ppqnPosition = ticks % this.app.clock.ppqn;
     const beatNumber = Math.floor(ticks / this.app.clock.ppqn);
@@ -93,10 +118,9 @@ export class Clock {
 
   get ticks_before_new_bar(): number {
     /**
-     * This function returns the number of ticks separating the current moment
+     * Calculates the number of ticks before the next bar.
-     * from the beginning of the next bar.
      * 
-     * @returns number of ticks until next bar
+     * @returns number - ticks before the next bar
      */
     const ticskMissingFromBeat = this.ppqn - this.time_position.pulse;
     const beatsMissingFromBar = this.beats_per_bar - this.time_position.beat;
@@ -105,10 +129,9 @@ export class Clock {
 
   get next_beat_in_ticks(): number {
     /**
-     * This function returns the number of ticks separating the current moment
+     * Calculates the number of ticks before the next beat.
-     * from the beginning of the next beat.
      * 
-     * @returns number of ticks until next beat
+     * @returns number - ticks before the next beat
      */
     return this.app.clock.pulses_since_origin + this.time_position.pulse;
   }
@@ -116,6 +139,8 @@ export class Clock {
   get beats_per_bar(): number {
     /**
      * Returns the number of beats per bar.
+     * 
+     * @returns number - beats per bar
      */
     return this.time_signature[0];
   }
@@ -124,7 +149,7 @@ export class Clock {
     /**
      * Returns the number of beats since the origin.
      * 
-     * @returns number of beats since origin
+     * @returns number - beats since the origin
      */
     return Math.floor(this.tick / this.ppqn);
   }
@@ -133,7 +158,7 @@ export class Clock {
     /**
      * Returns the number of pulses since the origin.
      * 
-     * @returns number of pulses since origin
+     * @returns number - pulses since the origin
      */
     return this.tick;
   }
@@ -141,119 +166,112 @@ export class Clock {
   get pulse_duration(): number {
     /**
      * Returns the duration of a pulse in seconds.
+     * @returns number - duration of a pulse in seconds
      */
     return 60 / this.bpm / this.ppqn;
   }
 
   public pulse_duration_at_bpm(bpm: number = this.bpm): number {
     /**
-     * Returns the duration of a pulse in seconds at a specific bpm.
+     * Returns the duration of a pulse in seconds at a given bpm.
+     * 
+     * @param bpm - bpm to calculate the pulse duration for
+     * @returns number - duration of a pulse in seconds
      */
     return 60 / bpm / this.ppqn;
   }
 
   get bpm(): number {
+    /**
+     * Returns the current bpm.
+     * @returns number - current bpm
+     */
     return this._bpm;
   }
 
-  set nudge(nudge: number) {
+  get tickDuration(): number {
-    this.transportNode?.setNudge(nudge);
+    /**
+     * Returns the duration of a tick in seconds.
+     * @returns number - duration of a tick in seconds
+     */
+    return 1 / this.ppqn;
   }
 
   set bpm(bpm: number) {
+    /**
+     * Sets the bpm.
+     * @param bpm - bpm to set
+     */
     if (bpm > 0 && this._bpm !== bpm) {
-      this.transportNode?.setBPM(bpm);
       this._bpm = bpm;
-      this.logicalTime = this.realTime;
+      this.clock.setDuration(() => (this.tickDuration * 60) / this.bpm);
     }
   }
 
   get ppqn(): number {
+    /**
+     * Returns the current ppqn.
+     * @returns number - current ppqn
+     */
     return this._ppqn;
   }
 
-  get realTime(): number {
-    return this.app.audioContext.currentTime - this.totalPauseTime;
-  }
-
-  get deviation(): number {
-    return Math.abs(this.logicalTime - this.realTime);
-  }
-
   set ppqn(ppqn: number) {
+    /**
+     * Sets the ppqn.
+     * @param ppqn - ppqn to set
+     * @returns number - current ppqn
+     */
     if (ppqn > 0 && this._ppqn !== ppqn) {
       this._ppqn = ppqn;
-      this.transportNode?.setPPQN(ppqn);
-      this.logicalTime = this.realTime;
     }
   }
 
-  public incrementTick(bpm: number) {
-    this.tick++;
-    this.logicalTime += this.pulse_duration_at_bpm(bpm);
-  }
-
   public nextTickFrom(time: number, nudge: number): number {
-    /**
-     * Compute the time remaining before the next clock tick.
-     * @param time - audio context currentTime
-     * @param nudge - nudge in the future (in seconds)
-     * @returns remainingTime
-     */
     const pulseDuration = this.pulse_duration;
     const nudgedTime = time + nudge;
     const nextTickTime = Math.ceil(nudgedTime / pulseDuration) * pulseDuration;
     const remainingTime = nextTickTime - nudgedTime;
-
     return remainingTime;
   }
 
   public convertPulseToSecond(n: number): number {
-    /**
-     * Converts a pulse to a second.
-     */
     return n * this.pulse_duration;
   }
 
   public start(): void {
     /**
-     * Starts the TransportNode (starts the clock).
+     * Start the clock
      * 
      * @remark also sends a MIDI message if a port is declared
      */
     this.app.audioContext.resume();
     this.running = true;
     this.app.api.MidiConnection.sendStartMessage();
-    this.lastPlayPressTime = this.app.audioContext.currentTime;
+    this.clock.start();
-    this.totalPauseTime += this.lastPlayPressTime - this.lastPauseTime;
-    this.transportNode?.start();
   }
 
   public pause(): void {
     /**
-     * Pauses the TransportNode (pauses the clock).
+     * Pause the clock.
      * 
      * @remark also sends a MIDI message if a port is declared
      */
     this.running = false;
-    this.transportNode?.pause();
     this.app.api.MidiConnection.sendStopMessage();
-    this.lastPauseTime = this.app.audioContext.currentTime;
+    this.clock.pause();
-    this.logicalTime = this.realTime;
   }
 
   public stop(): void {
     /**
-     * Stops the TransportNode (stops the clock).
+     * Stops the clock.
      *
      * @remark also sends a MIDI message if a port is declared
      */
     this.running = false;
     this.tick = 0;
-    this.lastPauseTime = this.app.audioContext.currentTime;
-    this.logicalTime = this.realTime;
     this.time_position = { bar: 0, beat: 0, pulse: 0 };
     this.app.api.MidiConnection.sendStopMessage();
-    this.transportNode?.stop();
+    this.clock.stop();
   }
 }

src/InterfaceLogic.ts

@@ -144,9 +144,10 @@ export const installInterfaceLogic = (app: Editor) => {
   });
 
   app.interface.audio_nudge_range.addEventListener("input", () => {
-    app.clock.nudge = parseInt(
+    // TODO: rebuild this
-      (app.interface.audio_nudge_range as HTMLInputElement).value,
+    // app.clock.nudge = parseInt(
-    );
+    //   (app.interface.audio_nudge_range as HTMLInputElement).value,
+    // );
   });
 
   app.interface.dough_nudge_range.addEventListener("input", () => {

src/TransportNode.js

@@ -1,68 +0,0 @@
-import { tryEvaluate } from "./Evaluator";
-const zeroPad = (num, places) => String(num).padStart(places, "0");
-
-export class TransportNode extends AudioWorkletNode {
-  constructor(context, options, application) {
-    super(context, "transport", options);
-    this.app = application;
-    this.port.addEventListener("message", this.handleMessage);
-    this.port.start();
-    this.timeviewer = document.getElementById("timeviewer");
-  }
-
-  /** @type {(this: MessagePort, ev: MessageEvent<any>) => any} */
-  handleMessage = (message) => {
-    if (message.data) {
-      if (message.data.type === "bang") {
-        if (this.app.clock.running) {
-          if (this.app.settings.send_clock) {
-            this.app.api.MidiConnection.sendMidiClock();
-          }
-          const futureTimeStamp = this.app.clock.convertTicksToTimeposition(
-            this.app.clock.tick,
-          );
-          this.app.clock.time_position = futureTimeStamp;
-          if (futureTimeStamp.pulse % this.app.clock.ppqn == 0) {
-            this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${
-              futureTimeStamp.beat + 1
-            } / ${this.app.clock.bpm}`;
-          }
-          if (this.app.exampleIsPlaying) {
-            tryEvaluate(this.app, this.app.example_buffer);
-          } else {
-            tryEvaluate(this.app, this.app.global_buffer);
-          }
-          this.app.clock.incrementTick(message.data.bpm);
-        }
-      }
-    }
-  };
-
-  start() {
-    this.port.postMessage({ type: "start" });
-  }
-
-  pause() {
-    this.port.postMessage({ type: "pause" });
-  }
-
-  resume() {
-    this.port.postMessage({ type: "resume" });
-  }
-
-  setBPM(bpm) {
-    this.port.postMessage({ type: "bpm", value: bpm });
-  }
-
-  setPPQN(ppqn) {
-    this.port.postMessage({ type: "ppqn", value: ppqn });
-  }
-
-  setNudge(nudge) {
-    this.port.postMessage({ type: "nudge", value: nudge });
-  }
-
-  stop() {
-    this.port.postMessage({ type: "stop" });
-  }
-}

src/TransportProcessor.js

@@ -1,47 +0,0 @@
-class TransportProcessor extends AudioWorkletProcessor {
-  constructor(options) {
-    super(options);
-    this.port.addEventListener("message", this.handleMessage);
-    this.port.start();
-    this.nudge = 0;
-    this.started = false;
-    this.bpm = 120;
-    this.ppqn = 48;
-    this.currentPulsePosition = 0;
-  }
-
-  handleMessage = (message) => {
-    if (message.data && message.data.type === "ping") {
-      this.port.postMessage(message.data);
-    } else if (message.data.type === "start") {
-      this.started = true;
-    } else if (message.data.type === "pause") {
-      this.started = false;
-    } else if (message.data.type === "stop") {
-      this.started = false;
-    } else if (message.data.type === "bpm") {
-      this.bpm = message.data.value;
-      this.currentPulsePosition = currentTime;
-    } else if (message.data.type === "ppqn") {
-      this.ppqn = message.data.value;
-      this.currentPulsePosition = currentTime;
-    } else if (message.data.type === "nudge") {
-      this.nudge = message.data.value;
-    }
-  };
-
-  process(inputs, outputs, parameters) {
-    if (this.started) {
-      const adjustedCurrentTime = currentTime + this.nudge / 100;
-      const beatNumber = adjustedCurrentTime / (60 / this.bpm);
-      const currentPulsePosition = Math.ceil(beatNumber * this.ppqn);
-      if (currentPulsePosition > this.currentPulsePosition) {
-        this.currentPulsePosition = currentPulsePosition;
-        this.port.postMessage({ type: "bang", bpm: this.bpm });
-      }
-    }
-    return true;
-  }
-}
-
-registerProcessor("transport", TransportProcessor);

src/classes/AbstractEvents.ts

@@ -1,5 +1,11 @@
 import { type Editor } from "../main";
-import { freqToMidi, chord as parseChord, noteNameToMidi, resolvePitchBend, safeScale } from "zifferjs";
+import {
+  freqToMidi,
+  chord as parseChord,
+  noteNameToMidi,
+  resolvePitchBend,
+  safeScale,
+} from "zifferjs";
 import { SkipEvent } from "./SkipEvent";
 
 export type EventOperation<T> = (instance: T, ...args: any[]) => void;
@@ -311,16 +317,16 @@ export abstract class AudibleEvent extends AbstractEvent {
     return this;
   };
 
-  protected updateValue<T>(
+  protected updateValue<T>(key: string, value: T | T[] | null): this {
-    key: string,
-    value: T | T[] | null
-  ): this {
     if (value == null) return this;
     this.values[key] = value;
     return this;
   }
 
-  public note = (value: number | string | null, ...kwargs: number[]|string[]) => {
+  public note = (
+    value: number | string | null,
+    ...kwargs: number[] | string[]
+  ) => {
     if (typeof value === "string") {
       const parsedNote = noteNameToMidi(value);
       return this.updateValue("note", [parsedNote, ...kwargs].flat(Infinity));

src/classes/SoundEvent.ts

@@ -5,10 +5,7 @@ import {
   arrayOfObjectsToObjectWithArrays,
   objectWithArraysToArrayOfObjects,
 } from "../Utils/Generic";
-import {
+import { midiToFreq, noteFromPc } from "zifferjs";
-  midiToFreq,
-  noteFromPc,
-} from "zifferjs";
 
 import {
   superdough,
@@ -111,13 +108,13 @@ export class SoundEvent extends AudibleEvent {
       return self;
     },
     scope: function (self: SoundEvent) {
-      self.updateValue("analyze", true)
+      self.updateValue("analyze", true);
-      return self
+      return self;
     },
     debug: function (self: SoundEvent, callback?: Function) {
-      self.updateValue("debug", true)
+      self.updateValue("debug", true);
       if (callback) {
-        self.updateValue("debugFunction", callback)
+        self.updateValue("debugFunction", callback);
       }
       return self;
     },
@@ -467,16 +464,12 @@ export class SoundEvent extends AudibleEvent {
       }
       if (this.values["debug"]) {
         if (this.values["debugFunction"]) {
-          this.values["debugFunction"](filteredEvent)
+          this.values["debugFunction"](filteredEvent);
         } else {
-          console.log(filteredEvent)
+          console.log(filteredEvent);
         }
       }
-      superdough(
+      superdough(filteredEvent, this.app.clock.deadline, filteredEvent.dur);
-        filteredEvent,
-        this.nudge - this.app.clock.deviation,
-        filteredEvent.dur,
-      );
     }
   };
 }

src/documentation/more/oscilloscope.ts

@@ -13,7 +13,8 @@ ${makeExample(
   "Feeding a sine to the oscilloscope",
   `
 beat(1)::sound('sine').freq(200).ad(0, .2).scope().out()
-`, true
+`,
+  true,
 )}
 
 Here is a layout of the scope configuration options:

src/main.ts

@@ -246,20 +246,17 @@ export class Editor {
       "ui-known-universe-item-template",
     ) as HTMLTemplateElement;
     if (!itemTemplate) {
-      console.warn("Missing template #ui-known-universe-item-template");
       return;
     }
 
     let existing_universes = document.getElementById("existing-universes");
     if (!existing_universes) {
-      console.warn("Missing element #existing-universes");
       return;
     }
 
     let list = document.createElement("ul");
     list.className =
       "lg:h-80 lg:text-normal text-sm h-auto lg:w-80 w-auto lg:pb-2 lg:pt-2 overflow-y-scroll text-white lg:mb-4 border rounded-lg bg-neutral-800";
-
     list.append(
       ...Object.keys(this.universes).map((it) => {
         let item = itemTemplate.content.cloneNode(true) as DocumentFragment;

yarn.lock

@@ -3887,6 +3887,11 @@ zifferjs@^0.0.44:
   resolved "https://registry.yarnpkg.com/zifferjs/-/zifferjs-0.0.44.tgz#c6b425166488ec05e349867e3de2460b74204449"
   integrity sha512-Q+0affxeUZwl+oJpsa1nb4hqHV6V4VX+pkejCQq/e9+/0H6ooTpcDQ9IDopvrWBnhA8E11k0tbwUee5TJtE8UQ==
 
+zyklus@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/zyklus/-/zyklus-0.1.4.tgz#229b2966fd1126ef72c6004697269118762bdcd5"
+  integrity sha512-hbv2cyy4nOI7P8nL8b3ki1jswoLzkUzewPgCLDdDfABryDkV5iO8DAbU25OgO5ShRZHLjXJIylwv5PJQPl3Mpw==
+
 zzfx@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/zzfx/-/zzfx-1.2.0.tgz#021e5df8e1605f507e2dde15608eba22798b424b"