delete unused var

docs (tonnetz-generators)

.github/workflows/deploy.yml

@@ -47,9 +47,6 @@ jobs:
         with:
           path: "main"
 
-      - name: Copy favicon folder
-        run: cp -r main/favicon ./dist/
-
       - name: Deploy to GitHub Pages
         uses: peaceiris/actions-gh-pages@v3
         with:

README.md

@@ -19,52 +19,53 @@
 
 ---
 
-Topos is a web based live coding environment. Topos is capable of many things:
+Topos is a web based live coding environment designed to be installation-free, independant and fun. Topos is loosely based on the [Monome Teletype](https://monome.org/docs/teletype/). The application follows the same operating principle, but adapts it to the rich multimedia context offered by web browsers. Topos is capable of many things:
 
-- it is a music sequencer made for improvisation and composition alike
-- it is a synthesizer capable of additive, substractive, FM and wavetable
-  synthesis, backed up by a [powerful web based audio engine](https://www.npmjs.com/package/superdough)
-- it can also generate video thanks to [Hydra](https://hydra.ojack.xyz/) and
-  custom oscilloscopes, frequency visualizers and image sequencing capabilities
-- it can be used to sequence other MIDI devices (and soon.. OSC!)
+- it is a generative/algorithmic music sequencer made for **improvisation** and **composition** alike
+- it is a synthesizer capable of _additive_, _substractive_, _FM_ and _wavetable
+  synthesis_, backed up by a [powerful web based audio engine](https://www.npmjs.com/package/superdough)
+- it can also generate video thanks to [Hydra](https://hydra.ojack.xyz/), 
+  oscilloscopes, frequency visualizers and image/canvas sequencing capabilities
+- it can be used to sequence other MIDI and OSC devices (the latter using a **NodeJS** script)
 - it is made to be used without the need of installing anything, always ready at
   [https://topos.live](https://topos.live)
-- Topos is also an emulation and personal extension of the [Monome Teletype](https://monome.org/docs/teletype/)
 
 ---
 
-![Screenshot](https://github.com/Bubobubobubobubo/Topos/blob/main/img/topos_gif.gif)
+![Screenshot](https://github.com/Bubobubobubobubo/Topos/blob/main/src/assets/topos_gif.gif)
 
 ## Disclaimer
 
-**Topos** is still a young project developed by two hobbyists :) Contributions are welcome! We wish to be as inclusive and welcoming as possible to your ideas and suggestions! The software is working quite well and we are continuously striving to improve it.
+**Topos** is still a young and experimental project developed by two hobbyists :) Contributions are welcome! We wish to be as inclusive and welcoming as possible to your ideas and suggestions! The software is working quite well and we are continuously striving to improve it. Note that most features are rather experimental and that we don't really have any classical training in web development.
 
-## Installation (for devs and contributors)
+## Local Installation (for devs and contributors)
 
 To run the application, you will need to install [Node.js](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/en/). Then, clone the repository and run:
 
 - `yarn install`
 - `yarn run dev`
 
-To build the application for production, you will need to install [Node.js](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/en/). Then, clone the repository and run:
+You are good to go. The application will update itself automatically with every change to the codebase. To test the production version of the applicationn, you will need to install [Node.js](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/en/). Then, clone the repository and run:
 
 - `yarn run build`
 - `yarn run start`
 
-Always run a build before committing to check for compiler errors. The automatic deployment on the `main` branch will not accept compiler errors!
+If the build passes, you can be sure that it will also pass our **CI** pipeline that deploys the application to [https://topos.live](https://topos.live). Always run a build before committing to check for compiler errors. The automatic deployment on the `main` branch will not accept compiler errors!
 
-To build a standalone browser application using [Tauri](https://tauri.app/), you will need to have [Node.js](https://nodejs.org/en/), [Yarn](https://yarnpkg.com/en/) and [Rust](https://www.rust-lang.org/) installed. Then, clone the repository and run:
+## Tauri version
+
+Topos can also be compiled as a standalone application using [Tauri](https://tauri.app/). You will need [Node.js](https://nodejs.org/en/), [Yarn](https://yarnpkg.com/en/) and [Rust](https://www.rust-lang.org/) to be installed on your computer. Then, clone the repository and run:
 
 - `yarn tauri build`
 - `yarn tauri dev`
 
-The `tauri` version is only here to quickstart future developments but nothing has been done yet.
+The `tauri` version has never been fleshed out. It's a template for later developments if Topos ever wants to escape from the web :)
 
 ## Docker
 
-### Run the application
+To run the **Docker** version, run the following command:
 
-`docker run -p 8001:80 yassinsiouda/topos:latest`
+`docker run -p 8001:80 bubobubobubo/topos:latest`
 
 ### Build and run the prod image
 
@@ -72,8 +73,7 @@ The `tauri` version is only here to quickstart future developments but nothing
 
 ### Build and run the dev image
 
-**First installation**
-First you need to map node_modules to your local machine for your ide intellisense to work properly
+First you need to map `node_modules` to your local machine for your IDE IntelliSense to work properly :
 
 ```bash
 docker compose --profile dev up -d
@@ -81,8 +81,21 @@ docker cp topos-dev:/app/node_modules .
 docker compose --profile dev down
 ```
 
-**Then**
+then run the following command:
 
 ```bash
 docker compose --profile dev up
 ```
+
+Note that a Docker version of Topos is automatically generated everytime a commit is done on the `main` branch.
+
+## Credits
+
+- Felix Roos for the [SuperDough](https://www.npmjs.com/package/superdough) audio engine.
+- Frank Force for the [ZzFX](https://github.com/KilledByAPixel/ZzFX) synthesizer.
+- Kristoffer Ekstrand for the [AKWF](https://www.adventurekid.se/akrt/waveforms/adventure-kid-waveforms/) waveforms.
+- Ryan Kirkbride for some of the audio samples in the [Dough-Fox](https://github.com/Bubobubobubobubo/Dough-Fox) sample pack, taken from [here](https://github.com/Qirky/FoxDot/tree/master/FoxDot/snd).
+- Adel Faure for the [JGS](https://adelfaure.net/https://adelfaure.net/) font.
+- Raphaël Bastide for the [Steps Mono](https://github.com/raphaelbastide/steps-mono/) font.
+
+Many thanks to all the contributors and folks who tried the software already :)

favicon/site.webmanifest

@@ -1,19 +0,0 @@
-{
-  "name": "",
-  "short_name": "",
-  "icons": [
-    {
-      "src": "/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone"
-}

index.html

@@ -1,13 +1,14 @@
   <!doctype html>
 <html lang="en">
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Topos is a live coding environment inspired by the Monome Teletype.">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Topos</title>
+    <meta name="description" content="Topos is a live coding environment inspired by the Monome Teletype.">
     <meta charset="UTF-8" />
-    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
+    <link rel="icon" href="/favicon/favicon.ico" sizes="48x48" ><!-- REVISED (Aug 11, 2023)! -->
+    <link rel="icon" href="/favicon/favicon.svg" sizes="any" type="image/svg+xml"><!-- REVISED (Aug 11, 2023)! -->
+    <link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png"/>
+    <link rel="manifest" href="/manifest.webmanifest" />
     <link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
@@ -237,6 +238,7 @@
               <div class="flex flex-col">
                 <a rel="noopener noreferrer" id="docs_synchronisation" class="doc_subheader">Synchronisation</a>
                 <a rel="noopener noreferrer" id="docs_oscilloscope" class="doc_subheader">Oscilloscope</a>
+                <a rel="noopener noreferrer" id="docs_visualization" class="doc_header">Visualization</a>
                 <a rel="noopener noreferrer" id="docs_bonus" class="doc_header">Bonus/Trivia</a>
                 <a rel="noopener noreferrer" id="docs_about" class="doc_header">About Topos</a>
               </div>
@@ -560,6 +562,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>

manifest.webmanifest

@@ -1,24 +0,0 @@
-{
-  "name": "Topos",
-  "short_name": "Topos",
-  "description": "Live coding environment",
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
-  "display": "standalone",
-  "scope": "/",
-  "start_url": "/",
-  "icons": [
-    {
-      "src": "./favicon/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "purpose": "any maskable"
-    },
-    {
-      "src": "./favicon/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "any maskable"
-    }
-  ]
-}

package.json

@@ -14,7 +14,7 @@
     "typescript": "^5.2.2",
     "vite": "^4.4.5",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-pwa": "^0.16.7"
+    "vite-plugin-pwa": "^0.17.4"
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.1.9",

public/favicon/favicon.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="48.000000pt" height="48.000000pt" viewBox="0 0 48.000000 48.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M163 470 c-13 -5 -23 -12 -23 -15 0 -3 46 -5 102 -5 80 0 99 3 90 12
+-15 15 -139 21 -169 8z"/>
+<path d="M91 391 c-16 -16 -19 -32 -18 -84 1 -53 -2 -69 -18 -87 -15 -16 -20
+-38 -22 -83 0 -33 2 -56 5 -50 9 13 44 13 39 -1 -2 -6 -18 -11 -34 -11 -39 0
+-50 -10 -33 -30 8 -10 30 -15 60 -15 26 0 64 -7 83 -15 43 -18 125 -20 164 -3
+15 6 57 14 93 17 73 7 87 24 51 60 -12 12 -21 17 -21 13 0 -4 5 -13 12 -20 8
+-8 8 -12 1 -12 -18 0 -25 34 -9 45 10 7 12 16 6 25 -5 8 -7 24 -4 35 3 13 -2
+28 -15 39 -12 11 -21 27 -21 36 0 9 -5 21 -11 27 -8 8 -8 17 0 31 17 32 13 56
+-12 80 -31 29 -63 28 -91 -3 -16 -17 -34 -25 -56 -25 -22 0 -40 8 -56 25 -28
+30 -67 32 -93 6z m89 -16 c19 -23 5 -29 -24 -10 -16 10 -33 14 -47 10 -14 -5
+-19 -4 -15 4 10 16 72 13 86 -4z m211 -7 c12 -22 11 -22 -8 -5 -25 21 -41 22
+-65 0 -22 -19 -36 -10 -18 12 20 24 77 19 91 -7z m-264 -30 c-3 -7 -5 -2 -5
+12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m229 -5 c-11 -11 -19 6 -11 24 8 17 8 17
+12 0 3 -10 2 -21 -1 -24z m-80 -8 c4 -8 10 -12 15 -9 5 3 9 0 9 -6 0 -14 60
+-40 77 -33 7 3 13 -2 13 -11 0 -13 -6 -15 -27 -9 -36 9 -210 9 -245 0 -22 -6
+-28 -4 -28 9 0 8 6 14 13 11 6 -2 25 2 40 10 15 8 32 11 37 8 6 -4 7 1 3 11
+-4 12 -3 15 5 10 7 -4 15 -1 18 8 8 21 63 21 70 1z m83 -91 c10 -9 -37 -33
+-77 -39 -55 -8 -117 2 -155 26 l-30 18 54 4 c56 4 201 -2 208 -9z m-286 -30
+c-15 -7 21 -44 42 -44 8 0 15 -4 15 -10 0 -16 -33 -11 -59 9 -25 19 -24 52 1
+50 9 0 10 -2 1 -5z m355 -21 c2 -14 -4 -23 -17 -28 -12 -3 -21 -13 -21 -21 0
+-19 -16 -18 -24 1 -5 15 -31 16 -53 2 -8 -5 -13 -4 -13 2 0 6 5 12 10 12 6 1
+15 3 20 4 6 1 18 3 28 4 25 1 66 37 52 44 -6 3 -5 4 2 3 7 -1 14 -12 16 -23z
+m-255 -37 c4 -10 1 -13 -9 -9 -7 3 -14 9 -14 14 0 14 17 10 23 -5z m42 -6 c3
+-5 1 -10 -4 -10 -6 0 -11 5 -11 10 0 6 2 10 4 10 3 0 8 -4 11 -10z m35 0 c0
+-5 -4 -10 -10 -10 -5 0 -10 5 -10 10 0 6 5 10 10 10 6 0 10 -4 10 -10z m-170
+-10 c0 -5 -5 -10 -11 -10 -5 0 -7 5 -4 10 3 6 8 10 11 10 2 0 4 -4 4 -10z
+m215 -39 c-6 -5 -25 10 -25 20 0 5 6 4 14 -3 8 -7 12 -15 11 -17z m45 8 c0
+-14 -16 -11 -29 5 -10 12 -8 13 8 9 12 -3 21 -9 21 -14z m-220 1 c0 -5 -5 -10
+-11 -10 -5 0 -7 5 -4 10 3 6 8 10 11 10 2 0 4 -4 4 -10z m40 0 c0 -5 -4 -10
+-10 -10 -5 0 -10 5 -10 10 0 6 5 10 10 10 6 0 10 -4 10 -10z m215 0 c3 -5 2
+-10 -4 -10 -5 0 -13 5 -16 10 -3 6 -2 10 4 10 5 0 13 -4 16 -10z m43 -10 c7
+-11 10 -20 6 -20 -7 0 -34 27 -34 34 0 13 16 5 28 -14z m-160 -17 c-10 -2 -26
+-2 -35 0 -10 3 -2 5 17 5 19 0 27 -2 18 -5z m99 1 c-3 -3 -12 -4 -19 -1 -8 3
+-5 6 6 6 11 1 17 -2 13 -5z m40 0 c-3 -3 -12 -4 -19 -1 -8 3 -5 6 6 6 11 1 17
+-2 13 -5z"/>
+</g>
+</svg>

public/manifest.webmanifest

@@ -0,0 +1,37 @@
+{
+  "name": "Topos",
+  "short_name": "Topos",
+  "icons": [
+    {
+      "src": "favicon/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "favicon/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "display": "standalone",
+  "start_url": "/",
+  "scope": "/",
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "description": "Topos is a web based live coding platform",
+  "screenshots": [
+    {
+      "src": "favicon/screenshot_miniature.png",
+      "sizes": "640x320",
+      "type": "image/gif",
+      "form_factor": "wide",
+      "label": "Topos application"
+    },
+    {
+      "src": "favicon/topos_code.png",
+      "sizes": "1280x768",
+      "type": "image/gif",
+      "label": "Topos code"
+    }
+  ]
+}

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/Documentation.ts

@@ -17,6 +17,7 @@ import { oscilloscope } from "./documentation/more/oscilloscope";
 import { synchronisation } from "./documentation/more/synchronisation";
 import { about } from "./documentation/more/about";
 import { bonus } from "./documentation/more/bonus";
+import { visualization } from "./documentation/more/visualization";
 import { chaining } from "./documentation/patterns/chaining";
 import { interaction } from "./documentation/basics/interaction";
 import { time } from "./documentation/learning/time/time";
@@ -74,6 +75,47 @@ export const makeExampleFactory = (application: Editor): Function => {
   return make_example;
 };
 
+export const documentation_pages = [
+  "introduction",
+  "sampler",
+  "amplitude",
+  "audio_basics",
+  "filters",
+  "effects",
+  "interface",
+  "interaction",
+  "code",
+  "time",
+  "linear",
+  "cyclic",
+  "longform",
+  "synths",
+  "chaining",
+  "patterns",
+  "ziffers_basics",
+  "ziffers_scales",
+  "ziffers_rhythm",
+  "ziffers_algorithmic",
+  "ziffers_tonnetz",
+  "ziffers_syncing",
+  "midi",
+  "osc",
+  "functions",
+  "generators",
+  "lfos",
+  "probabilities",
+  "variables",
+  "synchronisation",
+  "mouse",
+  "shortcuts",
+  "about",
+  "bonus",
+  "oscilloscope",
+  "sample_list",
+  "loading_samples",
+  "visualization"
+];
+
 export const documentation_factory = (application: Editor) => {
   /**
    * Creates the documentation for the given application.
@@ -117,6 +159,7 @@ export const documentation_factory = (application: Editor) => {
     audio_basics: audio_basics(application),
     synchronisation: synchronisation(application),
     bonus: bonus(application),
+    visualization: visualization(application),
     sample_list: sample_list(application),
     sample_banks: sample_banks(application),
     loading_samples: loading_samples(application),
@@ -179,7 +222,10 @@ export const updateDocumentationContent = (app: Editor, bindings: any) => {
       auto_detection: false
     }), ...bindings],
   });
-  console.log(app.currentDocumentationPane);
+ 
+  if(Object.keys(app.docs).length === 0) {
+    app.docs = documentation_factory(app);
+  }
 
   function _update_and_assign(callback: Function) { 
     const converted_markdown = converter.makeHtml(

src/DomElements.ts

@@ -56,6 +56,7 @@ export const singleElements = {
   error_line: "error_line",
   hydra_canvas: "hydra-bg",
   feedback: "feedback",
+  drawings: "drawings",
   scope: "scope",
 };
 
@@ -82,7 +83,7 @@ export const createDocumentationStyle = (app: Editor) => {
     p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
     warning:
       "animate-pulse lg:text-2xl font-bold text-brightred lg:mx-6 mx-2 my-4 leading-normal",
-    a: "lg:text-2xl text-base text-white",
+    a: "lg:text-2xl text-base text-brightred",
     code: `lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden`,
     icode:
       "lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",

src/EditorSetup.ts

@@ -20,7 +20,7 @@ import {
   HighlightStyle,
 } from "@codemirror/language";
 import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
-import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
+import { highlightSelectionMatches } from "@codemirror/search";
 import {
   autocompletion,
   closeBrackets,
@@ -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]) => {
@@ -262,7 +259,7 @@ export const editorSetup: Extension = (() => [
   highlightActiveLine(),
   highlightSelectionMatches(),
   keymap.of([
-    ...searchKeymap,
+    // ...searchKeymap,
     ...closeBracketsKeymap,
     ...defaultKeymap,
     ...historyKeymap,

src/InterfaceLogic.ts

@@ -4,6 +4,7 @@ import { type Editor } from "./main";
 import colors from "./colors.json";
 import {
   documentation_factory,
+  documentation_pages,
   hideDocumentation,
   showDocumentation,
   updateDocumentationContent,
@@ -23,19 +24,11 @@ import { tryEvaluate } from "./Evaluator";
 import { inlineHoveringTips } from "./documentation/inlineHelp";
 import { lineNumbers } from "@codemirror/view";
 import { jsCompletions } from "./EditorSetup";
-import { createDocumentationStyle } from "./DomElements";
 import { saveState } from "./WindowBehavior";
 import { registerSamplesFromDB, samplesDBConfig, uploadSamplesToDB } from "./IO/SampleLoading";
 
 export const installInterfaceLogic = (app: Editor) => {
   // Initialize style
-  const documentationStyle = createDocumentationStyle(app);
-  const bindings = Object.keys(documentationStyle).map((key) => ({
-    type: "output",
-    regex: new RegExp(`<${key}([^>]*)>`, "g"),
-    //@ts-ignore
-    replace: (match, p1) => `<${key} class="${documentationStyle[key]}" ${p1}>`,
-  }));
 
   (app.interface.line_numbers_checkbox as HTMLInputElement).checked =
     app.settings.line_numbers;
@@ -537,60 +530,24 @@ export const installInterfaceLogic = (app: Editor) => {
 
   tryEvaluate(app, app.universes[app.selected_universe.toString()].init);
 
-  [
-    "introduction",
-    "sampler",
-    "amplitude",
-    "audio_basics",
-    "filters",
-    "effects",
-    "interface",
-    "interaction",
-    "code",
-    "time",
-    "linear",
-    "cyclic",
-    "longform",
-    "synths",
-    "chaining",
-    "patterns",
-    "ziffers_basics",
-    "ziffers_scales",
-    "ziffers_rhythm",
-    "ziffers_algorithmic",
-    "ziffers_tonnetz",
-    "ziffers_syncing",
-    "midi",
-    "osc",
-    "functions",
-    "generators",
-    "lfos",
-    "probabilities",
-    "variables",
-    "synchronisation",
-    "mouse",
-    "shortcuts",
-    "about",
-    "bonus",
-    "oscilloscope",
-    "sample_list",
-    "loading_samples",
-  ].forEach((e) => {
+  documentation_pages.forEach((e) => {
     let name = `docs_` + e;
 
     // Check if the element exists
     let element = document.getElementById(name);
     if (element) {
       element.addEventListener("click", async () => {
-        if (name !== "docs_sample_list") {
+        // Clear query params & set id as hash paremeter for uri
+        window.history.replaceState({}, "", window.location.pathname);
+        window.location.hash = e;
+        app.docs = documentation_factory(app);
         app.currentDocumentationPane = e;
-          updateDocumentationContent(app, bindings);
+        if (name !== "docs_sample_list") {
+          updateDocumentationContent(app, app.bindings);
         } else {
           console.log("Loading samples!");
           await loadSamples().then(() => {
-            app.docs = documentation_factory(app);
-            app.currentDocumentationPane = e;
-            updateDocumentationContent(app, bindings);
+            updateDocumentationContent(app, app.bindings);
           });
         }
       });

src/KeyActions.ts

@@ -105,6 +105,7 @@ export const registerOnKeyDown = (app: Editor) => {
     if (event.key === "Enter" && event.shiftKey && event.ctrlKey) {
       event.preventDefault();
       app.currentFile().candidate = app.view.state.doc.toString();
+      app.api.onceEvaluator = true;
       tryEvaluate(app, app.currentFile());
       app.flashBackground("#404040", 200);
     }
@@ -114,6 +115,7 @@ export const registerOnKeyDown = (app: Editor) => {
       event.preventDefault();
       app.api.clearPatternCache();
       app.currentFile().candidate = app.view.state.doc.toString();
+      app.api.onceEvaluator = true;
       tryEvaluate(app, app.currentFile());
       app.flashBackground("#404040", 200);
     }

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/assets/favicon.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="48.000000pt" height="48.000000pt" viewBox="0 0 48.000000 48.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,48.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M163 470 c-13 -5 -23 -12 -23 -15 0 -3 46 -5 102 -5 80 0 99 3 90 12
+-15 15 -139 21 -169 8z"/>
+<path d="M91 391 c-16 -16 -19 -32 -18 -84 1 -53 -2 -69 -18 -87 -15 -16 -20
+-38 -22 -83 0 -33 2 -56 5 -50 9 13 44 13 39 -1 -2 -6 -18 -11 -34 -11 -39 0
+-50 -10 -33 -30 8 -10 30 -15 60 -15 26 0 64 -7 83 -15 43 -18 125 -20 164 -3
+15 6 57 14 93 17 73 7 87 24 51 60 -12 12 -21 17 -21 13 0 -4 5 -13 12 -20 8
+-8 8 -12 1 -12 -18 0 -25 34 -9 45 10 7 12 16 6 25 -5 8 -7 24 -4 35 3 13 -2
+28 -15 39 -12 11 -21 27 -21 36 0 9 -5 21 -11 27 -8 8 -8 17 0 31 17 32 13 56
+-12 80 -31 29 -63 28 -91 -3 -16 -17 -34 -25 -56 -25 -22 0 -40 8 -56 25 -28
+30 -67 32 -93 6z m89 -16 c19 -23 5 -29 -24 -10 -16 10 -33 14 -47 10 -14 -5
+-19 -4 -15 4 10 16 72 13 86 -4z m211 -7 c12 -22 11 -22 -8 -5 -25 21 -41 22
+-65 0 -22 -19 -36 -10 -18 12 20 24 77 19 91 -7z m-264 -30 c-3 -7 -5 -2 -5
+12 0 14 2 19 5 13 2 -7 2 -19 0 -25z m229 -5 c-11 -11 -19 6 -11 24 8 17 8 17
+12 0 3 -10 2 -21 -1 -24z m-80 -8 c4 -8 10 -12 15 -9 5 3 9 0 9 -6 0 -14 60
+-40 77 -33 7 3 13 -2 13 -11 0 -13 -6 -15 -27 -9 -36 9 -210 9 -245 0 -22 -6
+-28 -4 -28 9 0 8 6 14 13 11 6 -2 25 2 40 10 15 8 32 11 37 8 6 -4 7 1 3 11
+-4 12 -3 15 5 10 7 -4 15 -1 18 8 8 21 63 21 70 1z m83 -91 c10 -9 -37 -33
+-77 -39 -55 -8 -117 2 -155 26 l-30 18 54 4 c56 4 201 -2 208 -9z m-286 -30
+c-15 -7 21 -44 42 -44 8 0 15 -4 15 -10 0 -16 -33 -11 -59 9 -25 19 -24 52 1
+50 9 0 10 -2 1 -5z m355 -21 c2 -14 -4 -23 -17 -28 -12 -3 -21 -13 -21 -21 0
+-19 -16 -18 -24 1 -5 15 -31 16 -53 2 -8 -5 -13 -4 -13 2 0 6 5 12 10 12 6 1
+15 3 20 4 6 1 18 3 28 4 25 1 66 37 52 44 -6 3 -5 4 2 3 7 -1 14 -12 16 -23z
+m-255 -37 c4 -10 1 -13 -9 -9 -7 3 -14 9 -14 14 0 14 17 10 23 -5z m42 -6 c3
+-5 1 -10 -4 -10 -6 0 -11 5 -11 10 0 6 2 10 4 10 3 0 8 -4 11 -10z m35 0 c0
+-5 -4 -10 -10 -10 -5 0 -10 5 -10 10 0 6 5 10 10 10 6 0 10 -4 10 -10z m-170
+-10 c0 -5 -5 -10 -11 -10 -5 0 -7 5 -4 10 3 6 8 10 11 10 2 0 4 -4 4 -10z
+m215 -39 c-6 -5 -25 10 -25 20 0 5 6 4 14 -3 8 -7 12 -15 11 -17z m45 8 c0
+-14 -16 -11 -29 5 -10 12 -8 13 8 9 12 -3 21 -9 21 -14z m-220 1 c0 -5 -5 -10
+-11 -10 -5 0 -7 5 -4 10 3 6 8 10 11 10 2 0 4 -4 4 -10z m40 0 c0 -5 -4 -10
+-10 -10 -5 0 -10 5 -10 10 0 6 5 10 10 10 6 0 10 -4 10 -10z m215 0 c3 -5 2
+-10 -4 -10 -5 0 -13 5 -16 10 -3 6 -2 10 4 10 5 0 13 -4 16 -10z m43 -10 c7
+-11 10 -20 6 -20 -7 0 -34 27 -34 34 0 13 16 5 28 -14z m-160 -17 c-10 -2 -26
+-2 -35 0 -10 3 -2 5 17 5 19 0 27 -2 18 -5z m99 1 c-3 -3 -12 -4 -19 -1 -8 3
+-5 6 6 6 11 1 17 -2 13 -5z m40 0 c-3 -3 -12 -4 -19 -1 -8 3 -5 6 6 6 11 1 17
+-2 13 -5z"/>
+</g>
+</svg>

src/assets/safari-pinned-tab.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="850.000000pt" height="850.000000pt" viewBox="0 0 850.000000 850.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,850.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 4250 l0 -3770 4250 0 4250 0 0 3770 0 3770 -4250 0 -4250 0 0
+-3770z"/>
+</g>
+</svg>

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/classes/ZPlayer.ts

@@ -408,8 +408,7 @@ export class Player extends AbstractEvent {
   }
 
   sync(value: string | Function, manualSync: boolean = true) {
-    
-    if(typeof value === "string") {
+    if(typeof value === "string" && manualSync) {
       if(manualSync) {
         const cueTime = this.app.api.cueTimes[value];
         if(cueTime) {
@@ -420,11 +419,11 @@ export class Player extends AbstractEvent {
       }
       return this;
     }
-
     if (this.atTheBeginning() && this.notStarted()) {
       const origin = this.app.clock.pulses_since_origin;
       if (origin > 0) {
-        const syncPattern = this.app.api.patternCache.get(value.name) as Player;
+        const syncName = typeof value === "function" ? value.name : value;
+        const syncPattern = this.app.api.patternCache.get(syncName) as Player;
         if (syncPattern) {
           const syncPatternDuration = syncPattern.ziffers.duration;
           const syncPatternStart = syncPattern.startCallTime;

src/documentation/learning/audio_engine/synths.ts

@@ -415,6 +415,8 @@ beat(2) :: sound('zzfx').zzfx([3.62,,452,.16,.1,.21,,2.5,,,403,.05,.29,,,,.17,.3
 
 Topos can also speak using the [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API). There are two ways to use speech synthesis:
 
+Speech synthesis API can crash your browser if you use it too much. To avoid crashing the calls should be limited using methods like beat() or run it only once using once().
+
 - <ic>speak(text: string, lang: string, voice: number, rate: number, pitch: number, volume: number)</ic>
   - <ic>text</ic>: the text you would like to synthesize (_e.g_ <ic>"Wow, Topos can speak!"</ic>).
   - <ic>lang</ic>: language code, for example <ic>en</ic> for English, <ic>fr</ic> for French or with the country code for example British English <ic>en-GB</ic>. See supported values from the [list](https://cloud.google.com/speech-to-text/docs/speech-to-text-supported-languages).
@@ -426,7 +428,7 @@ Topos can also speak using the [Web Speech API](https://developer.mozilla.org/en
 ${makeExample(
   "Hello world!",
   `
-beat(4) :: speak("Hello world!")
+once() && speak("Hello world!")
   `,
   true,
 )}
@@ -434,7 +436,7 @@ beat(4) :: speak("Hello world!")
 ${makeExample(
   "Let's hear people talking about Topos",
   `
-beat(2) :: speak("Topos!","fr",irand(0,5))
+beat(2) && speak("Topos!","fr",irand(0,5))
   `,
   true,
 )}
@@ -445,7 +447,7 @@ You can also use speech by chaining methods to a string:
 ${makeExample(
   "Foobaba is the real deal",
   `
-  onbeat(4) :: "Foobaba".voice(irand(0,10)).speak()
+  onbeat(4) && "Foobaba".voice(irand(0,10)).speak()
   `,
   true,
 )}
@@ -458,7 +460,7 @@ ${makeExample(
   const object = ["happy","sad","tired"].pick()
   const sentence = subject+" "+verb+" "+" "+object
     
-  beat(6) :: sentence.pitch(0).rate(0).voice([0,2].pick()).speak()
+  beat(6) && sentence.pitch(0).rate(0).voice([0,2].pick()).speak()
   `,
   true,
 )}
@@ -474,7 +476,7 @@ ${makeExample(
     "Flamboyant", "Cosmique", "Croissant!"
   ];
   
-  onbeat(4) :: croissant.bar()
+  onbeat(4) && croissant.bar()
       .lang("fr")
       .volume(rand(0.2,2.0))
       .rate(rand(.4,.6))

src/documentation/more/visualization.ts

@@ -0,0 +1,227 @@
+import { type Editor } from "../../main";
+import { key_shortcut, makeExampleFactory } from "../../Documentation";
+
+export const visualization = (application: Editor): string => {
+  const makeExample = makeExampleFactory(application);
+
+  return `
+# Vizualisation
+
+While Topos is mainly being developed as a live coding environment for algorithmic music composition, it also includes some features for live code visualizations. This section will introduce you to these features.
+
+## Hydra Visual Live Coding
+
+<div class="mx-12 bg-neutral-600 rounded-lg flex flex-col items-center justify-center">
+<warning>⚠️ This feature can generate flashing images that could trigger photosensitivity or epileptic seizures. ⚠️ </warning>
+</div>
+
+[Hydra](https://hydra.ojack.xyz/?sketch_id=mahalia_1) is a popular live-codable video synthesizer developed by [Olivia Jack](https://ojack.xyz/) and other contributors. It follows an analog synthesizer patching metaphor to encourage live coding complex shaders. Being very easy to use, extremely powerful and also very rewarding to use, Hydra has become a popular choice for adding visuals into a live code performance.
+
+${makeExample(
+  "Hydra integration",
+  `beat(4) :: hydra.osc(3, 0.5, 2).out()`,
+  false,
+)}
+
+Close the documentation to see the effect: ${key_shortcut(
+    "Ctrl+D",
+  )}! **Boom, all shiny!**
+
+Be careful not to call <ic>hydra</ic> too often as it can impact performances. You can use any rhythmical function like <ic>beat()</ic> function to limit the number of function calls. You can write any Topos code like <ic>[1,2,3].beat()</ic> to bring some life and movement in your Hydra sketches.
+
+Stopping **Hydra** is simple:
+
+${makeExample(
+  "Stopping Hydra",
+  `
+beat(4) :: stop_hydra()     // this one
+beat(4) :: hydra.hush() // or this one
+`,
+  false,
+)}
+
+### Changing the resolution
+
+You can change Hydra resolution using this simple method:
+
+${makeExample(
+  "Changing Hydra resolution",
+  `hydra.setResolution(1024, 768)`,
+  false,
+)}
+
+### Hydra documentation
+
+I won't teach Hydra. You can find some great resources directly on the [Hydra website](https://hydra.ojack.xyz/):
+  - [Hydra interactive documentation](https://hydra.ojack.xyz/docs/)
+  - [List of Hydra Functions](https://hydra.ojack.xyz/api/)
+  - [Source code on GitHub](https://github.com/hydra-synth/hydra)
+
+### The Hydra namespace
+
+In comparison with the basic Hydra editor, please note that you have to prefix all Hydra functions with <ic>hydra.</ic> to avoid conflicts with Topos functions. For example, <ic>osc()</ic> becomes <ic>hydra.osc()</ic>.
+
+${makeExample("Hydra namespace", `hydra.voronoi(20).out()`, true)}
+
+## GIF player
+
+Topos embeds a small <ic>.gif</ic> picture player with a small API. GIFs are automatically fading out after the given duration. Look at the following example:
+
+${makeExample(
+  "Playing many gifs",
+  `
+beat(0.25)::gif({
+  url:v('gif')[$(1)%6], // Any URL will do!
+  opacity: r(0.5, 1), // Opacity (0-1)
+  size:"300px", // CSS size property
+  center:false, // Centering on the screen?
+  filter:'none', // CSS Filter
+  dur: 2, // In beats (Topos unit)
+  rotation: ir(1, 360), // Rotation (in degrees)
+  posX: ir(1,1200), // CSS Horizontal Position
+  posY: ir(1, 800), // CSS Vertical Position
+`,
+  false,
+)}
+
+## Canvas live coding
+
+Documentation in progress! Copy the example and run it separately (Showing visualization examples in the documentation not implemented yet).
+
+Canvas live coding is a feature that allows you to draw musical events to the canvas. Canvas can be used to create complex visualizations. The feature is based on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API" target="_blank">Canvas API</a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D" target="_blank">CanvasRenderingContext2D</a> interface. The feature is still in development and more functions will be added in the future.
+
+In addition to the standard Canvas API, Topos also includes some pre-defined shapes for convenience. See the Shapes section below for more info.
+
+* <ic>draw(f: Function)</ic> - Draws to a canvas with the given function.
+
+${makeExample(
+  "Drawing to canvas",
+  `
+beat(0.5) && clear() && draw(context => {
+    context.fillStyle = 'red';
+
+    // Begin the path for the heart shape
+    context.beginPath();
+    const x = wc();
+    const y = hc();
+    context.fillStyle = 'red';
+
+    // Begin the path for the heart shape
+    context.beginPath();
+
+    context.moveTo(x + 125, y + 50);
+    context.bezierCurveTo(x + 75, y, x, y + 75, x + 125, y + 175);
+    context.bezierCurveTo(x + 250, y + 75, x + 175, y, x + 125, y + 50);
+
+    // Fill the heart with red color
+    context.fill();
+})
+`,
+  false,
+)}
+
+${makeExample(
+"Using draw with events and shapes",
+`
+beat(0.25) && sound("bass1:5").pitch(rI(1,6)).draw(x => {
+donut(x.pitch)
+}).out()
+`,
+false,
+)}  
+
+
+${makeExample(
+"Using draw with ziffers and shapes",
+`
+z1("1/8 (0 2 1 4)+(2 1)").sound("sine").ad(0.05,.25).clear()
+.draw(x => {
+pie({slices:7,eaten:(7-x.pitch-1),fillStyle:"green", rotate: 250})
+}).log("pitch").out()
+`,
+false,
+)}
+
+* <ic<image(url, x, y, width, height, rotation)</ic> - Draws an image to a canvas.
+
+${makeExample(
+    "Image to canvas",
+    `
+    beat(0.5) && clear() && image("http://localhost:8000/topos_frog.svg",200,200+epulse()%15)
+    `,
+    false,
+    )}
+
+* <ic>clear()</ic> - Clears the canvas.
+* <ic>background(fill: string)</ic> - Sets the background color, image or gradient.
+* <ic>w()</ic> - Returns the canvas width.
+* <ic>h()</ic> - Returns the canvas height.
+* <ic>wc()</ic> - Returns the center of the canvas width.
+* <ic>hc()</ic> - Returns the center of the canvas height.
+
+### Text to canvas
+
+Text can be drawn to canvas using the <ic>drawText()</ic> function. The function can take any unicode characters including emojis. The function can also be used to draw random characters from a given unicode range. Different filters can also be applied using the **filter** parameter. See filter in <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter" target="_blank">canvas documentation</a> for more info.
+
+* <ic>drawText(text, fontSize, rotation, font, x, y)</ic> - Draws text to a canvas.
+
+${makeExample(
+"Writing to canvas",
+`
+beat(0.5) && clear() && drawText("Hello world!", 100, 0, "Arial", 100, 100)
+`,
+false,
+)}
+
+* <ic>randomChar(number, min, max)</ic> - Returns a number of random characters from given unicode range.
+
+${makeExample(
+"Drawing random characters to canvas",
+`
+beat(0.5) && clear() && drawText(randomChar(10,1000,2000),30)
+`,
+false,
+)}
+
+* <ic>emoji(size)</ic> - Returns a random emojis as text.
+
+* <ic>animals(size)</ic> - Returns a random animal emojis as text.
+
+* <ic>food(size)</ic> - Returns a random food emojis as text.
+
+${makeExample(
+    "Drawing food emojis to canvas",
+    `
+beat(0.5) && clear() && drawText({x: 10, y: epulse()%700, text: food(50)})
+`,
+    false,
+    )}
+
+* <ic>expression(size)</ic> - Returns a random expression emojis as text.
+
+### Shapes
+
+In addition to supporting drawing to canvas directly, Topos also include some pre-defined shapes for convenience. Every shape can be defined by either by inputting one object as parameter or by inputting the parameters separately.
+
+The predefined shapes are:
+
+* <ic>smiley(happiness, radius, eyes, fill, rotate, x, y)</ic>
+* <ic>ball(radius,fill,x,y)</ic>
+* <ic>box(width, height, fill, rotate)</ic>
+* <ic>pointy(width, height, fill, rotate, x, y)</ic>
+* <ic>equilateral(radius, fill, rotate, x, y)</ic>
+* <ic>star(points, radius, fill rotate, outerRadius, x, y</ic>
+* <ic>pie(slices, eaten, radius, fill, secondary, stroke, rotate, x, y</ic>
+* <ic>donut(slices, eaten, radius, hole, fill, secondary, stroke, rotate, x, y</ic>
+* <ic>balloid(petals, radius, curve, fill, secondary, x, y)</ic>
+* <ic>stroke(width, stroke, rotate, x1, y1, x2, y2)</ic>
+
+### Gradients
+
+* <ic>linearGradient(x1, y1, x2, y2, ...stops)</ic> - Creates a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient">linear gradient</a>.
+* <ic>radialGradient(x1, y1, r1, x2, y2, r2, ...stops)</ic> - Creates a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient">radial gradient</a>.
+* <ic>conicGradient(x, y, angle, ...stops)</ic> - Creates a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createConicGradient">conic gradient</a>.
+
+
+`;
+};

src/documentation/patterns/generators.ts

@@ -46,6 +46,8 @@ ${makeExample(
 true,
 )};
 
+When you want to dance with a dynamical system in controlled musical chaos, Topos is waiting for you:
+
 ${makeExample(
   "Truly scale free chaos inspired by Lorentz attractor",
   `
@@ -72,6 +74,58 @@ ${makeExample(
   true,
 )};
 
+${makeExample(
+    "Henon and his discrete music",
+    `
+  function* henonMap(x = 0, y = 0, a = 1.4, b = 0.3) {
+    while (true) {
+      const newX = 1 - a * x ** 2 + y;
+      const newY = b * x;
+      const fusionPoint = newX + newY
+      yield fusionPoint * 300;
+      [x, y] = [newX, newY]
+    }
+  }
+
+  beat(0.25) :: sound("sawtooth")
+    .semitones(1,1,2,2,2,1,2,1)
+    .freq(cache("Hénon Synth", henonMap()))
+    .adsr(0, 0.1, 0.1, 0.5).out()
+
+  z0('1 {-2}').octave(-2).sound('bd').out()
+  z1('e. 1 s 3!2 e 3!2 s 9 8 1')
+    .sound('dr').gain(0.3).octave(-5).out()
+    `,
+    true,
+  )};
+
+${makeExample(
+  "1970s fractal dream",
+  `
+  function* rossler(x = 0.1, y = 0.1, z = 0.1, a = 0.2, b = 0.2, c = 5.7) {
+    while (true) {
+      const dx = - y - z;
+      const dy = x + (a * y);
+      const dz = b + (x * z) - (c * z);
+
+      x += dx * 0.01;
+      y += dy * 0.01;
+      z += dz * 0.01;
+
+      const value = 250 * (Math.cosh(x*z) + Math.sinh(y*z))
+      yield value % 120 + 100;
+    }
+  }
+
+  beat(0.25) :: sound("triangle")
+    .freq(cache("Rössler attractor", rossler(3,4,1)))
+    .adsr(0,.1,.1,.1)
+    .log("freq").out()
+  `,
+  true,
+)};
+
+
 ## OEIS integer sequences
 
 To find some inspiration - or to enter into the void - one can visit <a href="https://oeis.org/" target="_blank">The On-Line Encyclopedia of Integer Sequences (OEIS)</a> to find some interesting integer sequences.

src/documentation/patterns/patterns.ts

@@ -120,6 +120,19 @@ beat(1)::sound(['kick', 'fsnare'].dur(3, 1))
   true,
 )}
 
+## Iterating over lists
+
+- <ic>counter(name,limit?,step?)</ic>: return the next value on the list based on counter value. The limit is optional and defaults to the length of the list. The step is optional and defaults to 1. Setting / changing limit will reset the counter.
+- <ic>$(name,limit?,step?)</ic>: shorter alias for the counter.
+
+${makeExample(
+  "Using counter to iterate over a list",
+  `
+  beat(0.5) :: sound("bd").gain(line(0,1,0.01).$("ramp")).out()
+  `,
+  true,
+)}
+
 ## Manipulating notes and scales
 
 - <ic>pitch()</ic>: convert a list of integers to pitch classes
@@ -152,7 +165,7 @@ ${makeExample(
   "Play pitches from scale created from cent intervals",
   `
   rhythm([0.5,0.25].beat(1),14,16) :: sound('pluck')
-  .stretch(r(1,5)).pitch(r(0,6)).key(57)
+  .stretch(iR(1,5)).pitch(iR(0,6)).key(57)
 .cents(120,270,540,670,785,950,1215).out()
 `,
   true,

src/documentation/patterns/probabilities.ts

@@ -54,6 +54,7 @@ By default chance operators will be evaluated 48 times within a beat. You can ch
 - <ic>frequently(beats?: number)</ic>: returns true 90% of the time in given number of beats
 - <ic>almostAlways(beats?: number)</ic>: returns true 99% of the time in given number of beats
 - <ic>always(beats?: number)</ic>: returns true. Can be handy when switching between different probabilities
+- <ic>once()</ic>: returns true once, then false until the code is force evaluated (Shift+Ctrl+Enter)
 	
 Examples:
 

src/documentation/patterns/variables.ts

@@ -7,20 +7,15 @@ export const variables = (application: Editor): string => {
 
 # Variables
 
-By default, each script is independant from each other. Scripts live in their own bubble and you cannot get or set variables affecting a script from any other script.
+By default, each script is independant from each other. The variables defined in **script 1** are not available in **script 2**, etc. Moreover, they are overriden everytime the file is evaluated. It means that you cannot store any state or share information. However, you can use global variables to make that possible.
 
-**However**, everybody knows that global variables are cool and should be used everywhere. Global variables are an incredibely powerful tool to radically alter a composition in a few lines of code.
-	
-- <ic>variable(a: number | string, b?: any)</ic>: if only one argument is provided, the value of the variable will be returned through its name, denoted by the first argument. If a second argument is used, it will be saved as a global variable under the name of the first argument.
-	- <ic>delete_variable(name: string)</ic>: deletes a global variable from storage.
-	- <ic>clear_variables()</ic>: clear **ALL** variables. **This is a destructive operation**!
-	
-**Note:** since this example is running in the documentation, we cannot take advantage of the multiple scripts paradigm. Try to send a variable from the global file to the local file n°6.
+There is a <ic>global</ic> object that you can use to store and retrieve information. It is a simple key/value store. You can store any type of data in it:
 	
 ${makeExample(
   "Setting a global variable",
   `
-v('my_cool_variable', 2)
+// This is script n°3
+global.my_variable = 2
 `,
   true,
 )}
@@ -28,12 +23,13 @@ v('my_cool_variable', 2)
 ${makeExample(
   "Getting that variable back and printing!",
   `
-// Note that we just use one argument
-log(v('my_cool_variable'))
+// This is script n°4
+log(global.my_variable)
 `,
-  false,
+  true,
 )}
 
+Now your scripts can share information with each other!
 
 ## Counter and iterators
 

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/extensions/ArrayExtensions.ts

@@ -33,6 +33,8 @@ declare global {
     gen(min: number, max: number, times: number): number[];
     sometimes(func: Function): number[];
     apply(func: Function): number[];
+    counter(name: string | number, limit?: number, step?: number): number[]
+    $(name: string | number, limit?: number, step?: number): number[];
   }
 }
 
@@ -398,8 +400,31 @@ export const makeArrayExtensions = (api: UserAPI) => {
     return this[Math.floor(api.randomGen() * this.length)];
   };
   Array.prototype.rand = Array.prototype.random;
+
+  Array.prototype.counter = function(
+    name: string | number,
+    limit?: number,
+    step?: number) {
+    /**
+     * @param n - Returns next item in array until the end, then returns the last value.
+     *
+     * @returns the shifted array
+     */
+    const idx = api.counter(name,limit,step);
+    if(limit) {
+      return this[idx % this.length];
+    } else if(idx < this.length) {
+      return this[idx];
+    } else {
+      return this[this.length - 1];
+    }
+  };
+  Array.prototype.$ = Array.prototype.counter;
+
 };
 
+
+
 Array.prototype.scale = function (
   scale: string = "major",
   base_note: number = 0,

src/main.ts

@@ -12,10 +12,10 @@ import {
   Universe,
   loadUniverserFromUrl,
 } from "./FileManagement";
-import { singleElements, buttonGroups, ElementMap } from "./DomElements";
+import { singleElements, buttonGroups, ElementMap, createDocumentationStyle } from "./DomElements";
 import { registerFillKeys, registerOnKeyDown } from "./KeyActions";
 import { installEditor } from "./EditorSetup";
-import { documentation_factory } from "./Documentation";
+import { documentation_factory, documentation_pages, showDocumentation, updateDocumentationContent } from "./Documentation";
 import { EditorView } from "codemirror";
 import { Clock } from "./Clock";
 import { loadSamples, UserAPI } from "./API";
@@ -31,13 +31,12 @@ import { makeStringExtensions } from "./extensions/StringExtensions";
 import { installInterfaceLogic } from "./InterfaceLogic";
 import { installWindowBehaviors } from "./WindowBehavior";
 import { makeNumberExtensions } from "./extensions/NumberExtensions";
-// @ts-ignore
-import { registerSW } from "virtual:pwa-register";
 import colors from "./colors.json";
+// @ts-ignore
+const images = import.meta.glob("./assets/*")
+
+
 
-if ("serviceWorker" in navigator) {
-  registerSW();
-}
 
 export class Editor {
   // Universes and settings
@@ -87,6 +86,8 @@ export class Editor {
     mode: "scope",
     size: 1,
   };
+  bindings: any[] = [];
+  documentationStyle: any = {};
 
   // UserAPI
   api: UserAPI;
@@ -127,6 +128,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) {
@@ -218,6 +220,24 @@ export class Editor {
       this.settings.theme = "Everblush";
       this.readTheme(this.settings.theme);
     }
+
+    this.documentationStyle = createDocumentationStyle(this);
+    this.bindings = Object.keys(this.documentationStyle).map((key) => ({
+      type: "output",
+      regex: new RegExp(`<${key}([^>]*)>`, "g"),
+      //@ts-ignore
+      replace: (match, p1) => `<${key} class="${this.documentationStyle[key]}" ${p1}>`,
+    }));
+
+     // Get documentation id from hash parameter
+     const document_id = window.location.hash.slice(1);
+      if(document_id && document_id !== "" && documentation_pages.includes(document_id)) {
+       this.currentDocumentationPane = document_id
+       updateDocumentationContent(this, this.bindings);
+       showDocumentation(this);
+     }
+
+
   }
 
   private getBuffer(type: string): any {

vite.config.js

@@ -4,15 +4,16 @@ import viteCompression from "vite-plugin-compression";
 
 const vitePWAconfiguration = {
   devOptions: {
-    enabled: true,
+    enabled: false,
     suppressWarnings: true,
   },
-
   workbox: {
     sourcemap: false,
     cleanupOutdatedCaches: false,
+    maximumFileSizeToCacheInBytes: 10000000,
     globPatterns: [
       "**/*.{js,js.gz,css,html,gif,png,json,woff,woff2,json,ogg,wav,mp3,ico,png,svg}",
+      "favicon/*.{js,js.gz,css,html,gif,png,json,woff,woff2,json,ogg,wav,mp3,ico,png,svg}",
     ],
     runtimeCaching: [
       {
@@ -35,14 +36,9 @@ const vitePWAconfiguration = {
       },
     ],
   },
-  includeAssets: [
-    "favicon/favicon.icon",
-    "favicon/apple-touch-icon.png",
-    "mask-icon.svg",
-  ],
-  manifest: "manifest.webmanifest",
+  manifest: false,
   registerType: "autoUpdate",
-  injectRegister: "auto",
+  injectRegister: "script-defer",
 };
 
 export default defineConfig(({ command, mode, ssrBuild }) => {
@@ -54,6 +50,13 @@ export default defineConfig(({ command, mode, ssrBuild }) => {
         port: 8000,
         strictPort: true,
       },
+      build: {
+        outDir: "dist",
+        emptyOutDir: true,
+        cssCodeSplit: true,
+        cssMinify: true,
+        minify: true,
+      }
     };
   } else {
     return {

yarn.lock

@@ -2203,7 +2203,7 @@ fast-glob@^3.2.12:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-glob@^3.3.1:
+fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -3774,13 +3774,13 @@ vite-plugin-markdown@^2.1.0:
     htmlparser2 "^6.0.0"
     markdown-it "^12.0.0"
 
-vite-plugin-pwa@^0.16.7:
-  version "0.16.7"
-  resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.16.7.tgz#3dcacc342766ff3598472ac7d5e0782d14e2853e"
-  integrity sha512-4WMA5unuKlHs+koNoykeuCfTcqEGbiTRr8sVYUQMhc6tWxZpSRnv9Ojk4LKmqVhoPGHfBVCdGaMo8t9Qidkc1Q==
+vite-plugin-pwa@^0.17.4:
+  version "0.17.4"
+  resolved "https://registry.yarnpkg.com/vite-plugin-pwa/-/vite-plugin-pwa-0.17.4.tgz#be3b3714d4148681bc73e8e0b1e6ce1a71fa79f2"
+  integrity sha512-j9iiyinFOYyof4Zk3Q+DtmYyDVBDAi6PuMGNGq6uGI0pw7E+LNm9e+nQ2ep9obMP/kjdWwzilqUrlfVRj9OobA==
   dependencies:
     debug "^4.3.4"
-    fast-glob "^3.3.1"
+    fast-glob "^3.3.2"
     pretty-bytes "^6.1.1"
     workbox-build "^7.0.0"
     workbox-window "^7.0.0"