punctuation is more readable

Import samples

index.html

@@ -560,6 +560,7 @@
             <canvas id="scope" class="fullscreencanvas"></canvas>
             <canvas id="hydra-bg" class="fullscreencanvas"></canvas>
             <canvas id="feedback" class="fullscreencanvas"></canvas>
+            <canvas id="drawings" class="fullscreencanvas"></canvas>
 					</div>
           <p id="error_line" class="hidden w-screen bg-background font-mono absolute bottom-0 pl-2 py-2">Hello kids</p>
         </div>

src/API.ts

@@ -2187,6 +2187,291 @@ export class UserAPI {
     }, real_duration * 1000);
   };
 
+  // =============================================================
+  // Canvas Functions
+  // =============================================================
+
+  public clear = (): void => {
+    /**
+     * Clears the canvas after a given timeout.
+     * @param timeout - The timeout in seconds
+     */
+    const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+      const ctx = canvas.getContext("2d")!;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+  }
+
+  public width = (): number => {
+    /**
+     * Returns the width of the canvas.
+     * @returns The width of the canvas
+     */
+    const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+    return canvas.width;
+  }
+
+  public height = (): number => {
+    /**
+     * Returns the height of the canvas.
+     * @returns The height of the canvas
+     */
+    const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+    return canvas.height;
+  }
+
+  public background = (color: string|number, ...gb:number[]): void => {
+    /**
+     * Set background color of the canvas.
+     * @param color - The color to set. String or 3 numbers representing RGB values.
+     */
+    const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d")!;
+    if(typeof color === "number") color = `rgb(${color},${gb[0]},${gb[1]})`;
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+
+  public linearGradient = (x1: number, y1: number, x2: number, y2: number, ...stops: (number|string)[]) => {
+    /**
+     * Set linear gradient on the canvas.
+     * @param x1 - The x-coordinate of the start point
+     * @param y1 - The y-coordinate of the start point
+     * @param x2 - The x-coordinate of the end point
+     * @param y2 - The y-coordinate of the end point
+     * @param stops - The stops to set. Pairs of numbers representing the position and color of the stop.
+     */
+    const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d")!;
+    const gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+    // Parse pairs of values from stops
+    for(let i=0; i<stops.length; i+=2) {
+      let color = stops[i+1];
+      if(typeof color === "number") color = `rgb(${color},${stops[i+2]},${stops[i+3]})`;
+      gradient.addColorStop((stops[i] as number), color);
+    }
+    return gradient;
+  }
+
+  public radialGradient = (x1: number, y1: number, r1: number, x2: number, y2: number, r2: number, ...stops: (number|string)[]) => {
+    /**
+     * Set radial gradient on the canvas.
+     * @param x1 - The x-coordinate of the start circle
+     * @param y1 - The y-coordinate of the start circle
+     * @param r1 - The radius of the start circle
+     * @param x2 - The x-coordinate of the end circle
+     * @param y2 - The y-coordinate of the end circle
+     * @param r2 - The radius of the end circle
+     * @param stops - The stops to set. Pairs of numbers representing the position and color of the stop.
+     */
+    const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d")!;
+    const gradient = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
+    for(let i=0; i<stops.length; i+=2) {
+      let color = stops[i+1];
+      if(typeof color === "number") color = `rgb(${color},${stops[i+2]},${stops[i+3]})`;
+      gradient.addColorStop((stops[i] as number), color);
+    }
+    return gradient;
+  }
+
+  public conicGradient = (x: number, y: number, angle: number, ...stops: (number|string)[]) => {
+    /**
+     * Set conic gradient on the canvas.
+     * @param x - The x-coordinate of the center of the gradient
+     * @param y - The y-coordinate of the center of the gradient
+     * @param angle - The angle of the gradient, in radians
+     * @param stops - The stops to set. Pairs of numbers representing the position and color of the stop.
+     */
+    const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d")!;
+    const gradient = ctx.createConicGradient(x, y, angle);
+    for(let i=0; i<stops.length; i+=2) {
+      let color = stops[i+1];
+      if(typeof color === "number") color = `rgb(${color},${stops[i+2]},${stops[i+3]})`;
+      gradient.addColorStop((stops[i] as number), color);
+    }
+    return gradient;
+  }
+
+  public draw = (func: Function): void => {
+    /**
+     * Draws on the canvas.
+     * @param func - The function to execute
+     */
+    const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d")!;
+    func(ctx);
+  }
+
+  public circle = (
+    x: number,
+    y: number,
+    radius: number,
+    fillStyle: string,
+  ): void => {
+    const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d")!;
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, 2 * Math.PI);
+    ctx.fillStyle = fillStyle;
+    ctx.fill();
+  };
+
+  public triangular = (
+    x: number,
+    y: number,
+    radius: number,
+    fillStyle: string,
+    rotate: number
+  ): void => {
+    const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d")!;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate((rotate * Math.PI) / 180);
+    ctx.beginPath();
+    ctx.moveTo(0, -radius);
+    ctx.lineTo(radius, radius);
+    ctx.lineTo(-radius, radius);
+    ctx.closePath();
+    ctx.fillStyle = fillStyle;
+    ctx.fill();
+    ctx.restore();
+  }
+
+  public star = (
+    x: number,
+    y: number,
+    radius: number,
+    points: number = 5,
+    fillStyle: string = "white",
+    outerRadius: number = 1.0,
+    rotate: number = 0,
+  ): void => {
+     const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+     if(points<1) return this.circle(x, y, radius+outerRadius, fillStyle);
+     if(points==1) return this.triangular(x, y, radius, fillStyle, 0);
+     const ctx = canvas.getContext("2d")!;
+      ctx.save();
+      ctx.translate(x, y);
+      ctx.rotate((rotate * Math.PI) / 180);
+      ctx.beginPath();
+      ctx.moveTo(0, -radius);
+      for (let i = 0; i < points; i++) {
+        ctx.rotate(Math.PI / points);
+        ctx.lineTo(0, -(radius * outerRadius));
+        ctx.rotate(Math.PI / points);
+        ctx.lineTo(0, -radius);
+      }
+      ctx.closePath();
+      ctx.fillStyle = fillStyle;
+      ctx.fill();
+      ctx.restore();
+  };
+
+  public stroke = (
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    fillStyle: string,
+    width: number = 1,
+  ): void => {
+    const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d")!;
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.strokeStyle = fillStyle;
+    ctx.lineWidth = width;
+    ctx.stroke();
+  };
+
+  public rectangle = (
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    fillStyle: string,
+    rotate: number = 0,
+  ): void => {
+    const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d")!;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate((rotate * Math.PI) / 180);
+    ctx.fillStyle = fillStyle;
+    ctx.fillRect(0, 0, width, height);
+    ctx.restore();
+  }
+
+  public smiley = (
+    x: number,
+    y: number,
+    radius: number,
+    fillStyle: string,
+    eyeSize: number = 1.0,
+    happiness: number = 0.0,
+    rotation: number = 0
+  ): void => {
+    const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
+    const ctx = canvas.getContext("2d")!;
+    // Map the rotation value to an angle within the range of -PI to PI
+    const rotationAngle = rotation/100 * Math.PI;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate(rotationAngle);
+
+    // Draw face
+    ctx.beginPath();
+    ctx.arc(0, 0, radius, 0, 2 * Math.PI);
+    ctx.fillStyle = fillStyle;
+    ctx.fill();
+    ctx.lineWidth = radius / 20;
+    ctx.strokeStyle = "black";
+    ctx.stroke();
+
+    // Draw eyes
+    const eyeY = -radius / 5;
+    const eyeXOffset = radius / 2.5;
+    const eyeRadiusX = radius / 8;
+    const eyeRadiusY = eyeSize * radius / 10;
+
+    ctx.beginPath();
+    ctx.ellipse(-eyeXOffset, eyeY, eyeRadiusX, eyeRadiusY, 0, 0, 2 * Math.PI);
+    ctx.fillStyle = "black";
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.ellipse(eyeXOffset, eyeY, eyeRadiusX, eyeRadiusY, 0, 0, 2 * Math.PI);
+    ctx.fillStyle = "black";
+    ctx.fill();
+
+    // Draw mouth with happiness number -1.0 to 1.0. 0.0 Should be a straight line.
+    const mouthY = radius / 2;
+    const mouthLength = radius * 0.9;
+    const smileFactor = 0.25; // Adjust for the smile curvature
+  
+    let controlPointX = 0;
+    let controlPointY = 0;
+  
+    if (happiness >= 0) {
+      controlPointY = mouthY + happiness * smileFactor * radius / 2;
+    } else {
+      controlPointY = mouthY + happiness * smileFactor * radius / 2;
+    }
+  
+    ctx.beginPath();
+    ctx.moveTo(-mouthLength / 2, mouthY);
+    ctx.quadraticCurveTo(controlPointX, controlPointY, mouthLength / 2, mouthY);
+    ctx.lineWidth = 10;
+    ctx.strokeStyle = "black";
+    ctx.stroke();
+    ctx.restore();
+
+  }
+
+
   // =============================================================
   // OSC Functions
   // =============================================================
@@ -2196,7 +2481,7 @@ export class UserAPI {
       address: address,
       port: port,
       args: args,
-      timetag: Math.round(Date.now() + this.app.clock.deadline),
+      timetag: Math.round(Date.now() + (this.app.clock.nudge - this.app.clock.deviation)),
     } as OSCMessage);
   };
 

src/Clock.ts

@@ -1,11 +1,7 @@
+// @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 {
   /**
@@ -22,29 +18,35 @@ 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 - main application instance
-   * @param clock - zyklus clock
-   * @param ctx - current AudioContext used by app
-   * @param bpm - current beats per minute value
-   * @param time_signature - time signature
-   * @param time_position - current time position
-   * @param ppqn - pulses per quarter note
-   * @param tick - current tick since origin
+   * @param app - The main application instance
+   * @param ctx - The current AudioContext used by app
+   * @param transportNode - The TransportNode helper
+   * @param bpm - The current beats per minute value
+   * @param time_signature - The time signature
+   * @param time_position - The current time position
+   * @param ppqn - The pulses per quarter note
+   * @param tick - The 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;
-  timeviewer: HTMLElement;
-  deadline: number;
+  lastPauseTime: number;
+  lastPlayPressTime: number;
+  totalPauseTime: number;
 
   constructor(
     public app: Editor,
@@ -56,59 +58,31 @@ export class Clock {
     this.tick = 0;
     this._bpm = 120;
     this._ppqn = 48;
+    this.transportNode = null;
     this.ctx = ctx;
     this.running = true;
-    this.deadline = 0;
-    this.timeviewer = document.getElementById("timeviewer")!;
-    this.clock = getAudioContext().createClock(
-      this.clockCallback,
-      this.pulse_duration,
-    );
+    this.lastPauseTime = 0;
+    this.lastPlayPressTime = 0;
+    this.totalPauseTime = 0;
+    ctx.audioWorklet
+      .addModule(TransportProcessor)
+      .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 time position.
-     *
-     * @param ticks - ticks to convert
-     * @returns TimePosition
+     * Converts ticks to a TimePosition object.
+     * @param ticks The number of ticks to convert.
+     * @returns The TimePosition object representing the converted ticks.
      */
+
     const beatsPerBar = this.app.clock.time_signature[0];
     const ppqnPosition = ticks % this.app.clock.ppqn;
     const beatNumber = Math.floor(ticks / this.app.clock.ppqn);
@@ -119,9 +93,10 @@ export class Clock {
 
   get ticks_before_new_bar(): number {
     /**
-     * Calculates the number of ticks before the next bar.
+     * This function returns the number of ticks separating the current moment
+     * from the beginning of the next bar.
      *
-     * @returns number - ticks before the next bar
+     * @returns number of ticks until next bar
      */
     const ticskMissingFromBeat = this.ppqn - this.time_position.pulse;
     const beatsMissingFromBar = this.beats_per_bar - this.time_position.beat;
@@ -130,9 +105,10 @@ export class Clock {
 
   get next_beat_in_ticks(): number {
     /**
-     * Calculates the number of ticks before the next beat.
+     * This function returns the number of ticks separating the current moment
+     * from the beginning of the next beat.
      *
-     * @returns number - ticks before the next beat
+     * @returns number of ticks until next beat
      */
     return this.app.clock.pulses_since_origin + this.time_position.pulse;
   }
@@ -140,8 +116,6 @@ 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];
   }
@@ -150,7 +124,7 @@ export class Clock {
     /**
      * Returns the number of beats since the origin.
      *
-     * @returns number - beats since the origin
+     * @returns number of beats since origin
      */
     return Math.floor(this.tick / this.ppqn);
   }
@@ -159,7 +133,7 @@ export class Clock {
     /**
      * Returns the number of pulses since the origin.
      *
-     * @returns number - pulses since the origin
+     * @returns number of pulses since origin
      */
     return this.tick;
   }
@@ -167,112 +141,119 @@ 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 given bpm.
-     *
-     * @param bpm - bpm to calculate the pulse duration for
-     * @returns number - duration of a pulse in seconds
+     * Returns the duration of a pulse in seconds at a specific bpm.
      */
     return 60 / bpm / this.ppqn;
   }
 
   get bpm(): number {
-    /**
-     * Returns the current bpm.
-     * @returns number - current bpm
-     */
     return this._bpm;
   }
 
-  get tickDuration(): number {
-    /**
-     * Returns the duration of a tick in seconds.
-     * @returns number - duration of a tick in seconds
-     */
-    return 1 / this.ppqn;
+  set nudge(nudge: number) {
+    this.transportNode?.setNudge(nudge);
   }
 
   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.clock.setDuration(() => (this.tickDuration * 60) / this.bpm);
+      this.logicalTime = this.realTime;
     }
   }
 
   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 {
     /**
-     * Start the clock
+     * Starts the TransportNode (starts 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.clock.start();
+    this.lastPlayPressTime = this.app.audioContext.currentTime;
+    this.totalPauseTime += this.lastPlayPressTime - this.lastPauseTime;
+    this.transportNode?.start();
   }
 
   public pause(): void {
     /**
-     * Pause the clock.
+     * Pauses the TransportNode (pauses 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.clock.pause();
+    this.lastPauseTime = this.app.audioContext.currentTime;
+    this.logicalTime = this.realTime;
   }
 
   public stop(): void {
     /**
-     * Stops the clock.
+     * Stops the TransportNode (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.clock.stop();
+    this.transportNode?.stop();
   }
 }

src/DomElements.ts

@@ -56,6 +56,7 @@ export const singleElements = {
   error_line: "error_line",
   hydra_canvas: "hydra-bg",
   feedback: "feedback",
+  drawings: "drawings",
   scope: "scope",
 };
 

src/EditorSetup.ts

@@ -81,8 +81,8 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
       },
       "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
         {
-          backgroundColor: selection_foreground,
-          border: `0.5px solid ${selection_background}`,
+          backgroundColor: brightwhite,
+          border: `1px solid ${brightwhite}`,
         },
       ".cm-panels": {
         backgroundColor: selection_background,
@@ -98,18 +98,15 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
         backgroundColor: red,
       },
       ".cm-activeLine": {
-        // backgroundColor: highlightBackground
-        backgroundColor: `${selection_foreground}`,
+        backgroundColor: `rgba(${(parseInt(selection_background.slice(1,3), 16))}, ${(parseInt(selection_background.slice(3,5), 16))}, ${(parseInt(selection_background.slice(5,7), 16))}, 0.25)`,
       },
       ".cm-selectionMatch": {
-        backgroundColor: yellow,
-        outline: `1px solid ${red}`,
+        backgroundColor: `rgba(${(parseInt(selection_background.slice(1,3), 16))}, ${(parseInt(selection_background.slice(3,5), 16))}, ${(parseInt(selection_background.slice(5,7), 16))}, 0.25)`,
+        outline: `1px solid ${brightwhite}`,
       },
       "&.cm-focused .cm-matchingBracket": {
-        color: yellow,
-        // outline: `1px solid ${base02}`,
+        color: `rgba(${(parseInt(selection_background.slice(1,3), 16))}, ${(parseInt(selection_background.slice(3,5), 16))}, ${(parseInt(selection_background.slice(5,7), 16))}, 0.25)`,
       },
-
       "&.cm-focused .cm-nonmatchingBracket": {
         color: yellow,
       },
@@ -153,9 +150,9 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
     { tag: t.keyword, color: yellow },
     { tag: [t.name, t.deleted, t.character, t.macroName], color: red, },
     { tag: [t.function(t.variableName)], color: blue },
-    { tag: [t.labelName], color: red },
+    { tag: [t.labelName], color: brightwhite },
     { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: cyan, },
-    { tag: [t.definition(t.name), t.separator], color: magenta },
+    { tag: [t.definition(t.name), t.separator], color: brightwhite },
     { tag: [t.brace], color: white },
     { tag: [t.annotation], color: blue, },
     { tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: yellow, },
@@ -229,7 +226,7 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
 //     pointerEvents: "none",
 //   },
 // });
-
+// 
 // const debugHighlightStyle = HighlightStyle.define(
 //   // @ts-ignore
 //   Object.entries(t).map(([key, value]) => {

src/TransportNode.js

@@ -0,0 +1,65 @@
+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;
+          this.timeviewer.innerHTML = `${zeroPad(futureTimeStamp.bar, 2)}:${futureTimeStamp.beat + 1
+            }:${zeroPad(futureTimeStamp.pulse, 2)} / ${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

@@ -0,0 +1,47 @@
+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/Utils/Generic.ts

@@ -69,6 +69,15 @@ export function arrayOfObjectsToObjectWithArrays<T extends Record<string, any>>(
   );
 }
 
+export function maybeAtomic<T>(value: T): T | T[] {
+  /*
+    * Returns first value of array if array of length 1, otherwise returns value
+    * @param {any} value - Value to check
+    * @returns {any} Value or array
+    */
+  return Array.isArray(value) && value.length === 1 ? value[0] : value;
+}
+
 export function filterObject(
   obj: Record<string, any>,
   filter: string[],

src/WindowBehavior.ts

@@ -44,6 +44,9 @@ export const installWindowBehaviors = (
   window.addEventListener("resize", () =>
     handleResize(app.interface.feedback as HTMLCanvasElement),
   );
+  window.addEventListener("resize", () =>
+  handleResize(app.interface.drawings as HTMLCanvasElement),
+);
   window.addEventListener("beforeunload", (event) => {
     event.preventDefault();
     saveBeforeExit(app);

src/classes/AbstractEvents.ts

@@ -467,6 +467,16 @@ export abstract class AudibleEvent extends AbstractEvent {
     return this;
   }
 
+  public draw = (lambda: Function) => {
+    lambda(this.values, (this.app.interface.drawings as HTMLCanvasElement).getContext("2d"));
+    return this;
+  }
+
+  public clear = () => {
+    this.app.api.clear();
+    return this;
+  }
+
   freq = (value: number | number[], ...kwargs: number[]): this => {
     /*
      * This function is used to set the frequency of the Event.

src/classes/MidiEvent.ts

@@ -6,6 +6,7 @@ import {
   filterObject,
   arrayOfObjectsToObjectWithArrays,
   objectWithArraysToArrayOfObjects,
+  maybeAtomic,
 } from "../Utils/Generic";
 
 export type MidiParams = {
@@ -109,8 +110,8 @@ export class MidiEvent extends AudibleEvent {
 
     const newArrays = arrayOfObjectsToObjectWithArrays(events) as MidiParams;
     
-    this.values.note = newArrays.note;
-    if (newArrays.bend) this.values.bend = newArrays.bend;
+    this.values.note = maybeAtomic(newArrays.note);
+    if (newArrays.bend) this.values.bend = maybeAtomic(newArrays.bend);
     return this;
   };
 

src/classes/SoundEvent.ts

@@ -5,6 +5,7 @@ import {
   filterObject,
   arrayOfObjectsToObjectWithArrays,
   objectWithArraysToArrayOfObjects,
+  maybeAtomic,
 } from "../Utils/Generic";
 import { midiToFreq, resolvePitchClass } from "zifferjs";
 
@@ -413,11 +414,11 @@ export class SoundEvent extends AudibleEvent {
 
     const newArrays = arrayOfObjectsToObjectWithArrays(events) as SoundParams;
 
-    this.values.note = newArrays.note;
-    this.values.freq = newArrays.freq;
-    this.values.pitch = newArrays.pitch;
-    this.values.octave = newArrays.octave;
-    this.values.pitchOctave = newArrays.pitchOctave;
+    this.values.note = maybeAtomic(newArrays.note);
+    this.values.freq = maybeAtomic(newArrays.freq);
+    this.values.pitch = maybeAtomic(newArrays.pitch);
+    this.values.octave = maybeAtomic(newArrays.octave);
+    this.values.pitchOctave = maybeAtomic(newArrays.pitchOctave);
     return this;
   };
 
@@ -436,7 +437,11 @@ export class SoundEvent extends AudibleEvent {
       if (filteredEvent.freq) {
         delete filteredEvent.note;
       }
-      superdough(filteredEvent, this.app.clock.deadline, filteredEvent.dur);
+      superdough(
+        filteredEvent,  
+        this.nudge - this.app.clock.deviation,
+        filteredEvent.dur
+      );
     }
   };
 
@@ -460,7 +465,7 @@ export class SoundEvent extends AudibleEvent {
         address: oscAddress,
         port: oscPort,
         args: event,
-        timetag: Math.round(Date.now() + this.app.clock.deadline),
+        timetag: Math.round(Date.now() + (this.nudge - this.app.clock.deviation)),
       } as OSCMessage);
     }
   };

src/documentation/patterns/ziffers/ziffers_basics.ts

@@ -190,7 +190,7 @@ ${makeExample(
   )}
   
   ${makeExample(
-    "Chord transposition with roman numerals",
+    "Chord inversions with roman numerals",
     `
   z1('i i v%-4 v%-2 vi%-5 vi%-3 iv%-2 iv%-1')
     .sound('triangle').adsr(1/16, 1/5, 0.1, 0)
@@ -201,7 +201,7 @@ ${makeExample(
   )}
   
   ${makeExample(
-    "Chord transposition with named chords",
+    "Chord inversion with named chords",
     `
   z1('1/4 Cmin!3 Fmin!3 Fmin%-1 Fmin%-2 Fmin%-1')
     .sound("sine").bpf(500 + usine(1/4) * 2000)

src/main.ts

@@ -127,6 +127,7 @@ export class Editor {
     this.initializeButtonGroups();
     this.setCanvas(this.interface.feedback as HTMLCanvasElement);
     this.setCanvas(this.interface.scope as HTMLCanvasElement);
+    this.setCanvas(this.interface.drawings as HTMLCanvasElement);
     try {
       this.loadHydraSynthAsync();
     } catch (error) {