Added some drawing methods

index.html

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

src/API.ts

@@ -2186,6 +2186,122 @@ 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 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();
+  }
+
   // =============================================================
   // OSC Functions
   // =============================================================

src/DomElements.ts

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

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

@@ -463,6 +463,16 @@ export abstract class AudibleEvent extends AbstractEvent {
     return this;
   }
 
+  public draw = (lambda: Function) => {
+    lambda(this.values);
+    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 = {
@@ -110,8 +111,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);
   };
 
   out = (): void => {

src/classes/SoundEvent.ts

@@ -5,6 +5,7 @@ import {
   filterObject,
   arrayOfObjectsToObjectWithArrays,
   objectWithArraysToArrayOfObjects,
+  maybeAtomic,
 } from "../Utils/Generic";
 import { midiToFreq, resolvePitchClass } from "zifferjs";
 
@@ -414,11 +415,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);
 
   };
 

src/documentation/patterns/generators.ts

@@ -0,0 +1,37 @@
+import { type Editor } from "../../main";
+import { makeExampleFactory } from "../../Documentation";
+
+export const generators = (application: Editor): string => {
+  const makeExample = makeExampleFactory(application);
+  return `
+# Generator functions
+
+
+${makeExample(
+  "More complex function generating chaotic frequencies",
+  `
+  function* strange(x = 0.1, y = 0, z = 0, rho = 28, beta = 8 / 3, zeta = 10) {
+    while (true) {
+      const dx = 10 * (y - x);
+      const dy = x * (rho - z) - y;
+      const dz = x * y - beta * z;
+  
+      x += dx * 0.01;
+      y += dy * 0.01;
+      z += dz * 0.01;
+  
+      const value = 300 + 30 * (Math.sin(x) + Math.tan(y) + Math.cos(z))
+      yield value;
+    }
+  }
+  
+  beat(0.25) :: sound("triangle")
+    .freq(cache("stranger",strange(3,5,2)))
+    .adsr(.15,.1,.1,.1)
+    .log("freq").out()
+  `,
+  true,
+)};
+
+`;
+};

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

@@ -123,6 +123,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) {