adding interaction page in documentation

index.html

@@ -127,6 +127,7 @@
               <div class="flex flex-col">
                 <p rel="noopener noreferrer" id="docs_introduction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Introduction </p>
                 <p rel="noopener noreferrer" id="docs_interface" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interface</p>
+                <p rel="noopener noreferrer" id="docs_interaction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Interaction</p>
                 <p rel="noopener noreferrer" id="docs_shortcuts" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Keyboard</p>
                 <p rel="noopener noreferrer" id="docs_code" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Coding</p>
 							</div>

src/Documentation.ts

@@ -3,6 +3,7 @@ import { introduction } from "./documentation/introduction";
 import { samples } from "./documentation/samples";
 import { chaining } from "./documentation/chaining";
 import { software_interface } from "./documentation/interface";
+import { interaction } from "./documentation/interaction";
 import { time } from "./documentation/time";
 import { midi } from "./documentation/midi";
 import { code } from "./documentation/code";
@@ -53,6 +54,7 @@ export const documentation_factory = (application: Editor) => {
   return {
     introduction: introduction(application),
     interface: software_interface(application),
+    interaction: interaction(application),
     code: code(application),
     time: time(application),
     sound: sound(application),

src/documentation/functions.ts

@@ -22,7 +22,7 @@ ${makeExample(
 v('my_cool_variable', 2)
 `,
     true
-)}
+  )}
 
 ${makeExample(
     "Getting that variable back and printing!",
@@ -31,7 +31,7 @@ ${makeExample(
 log(v('my_cool_variable'))
 `,
     false
-)}
+  )}
 
 
 ## Counter and iterators
@@ -55,7 +55,7 @@ ${makeExample(
 rhythm(.25, 6, 8) :: sound('dr').n($(1)).end(.25).out()
 `,
     true
-)}
+  )}
 
 ${makeExample(
     "Using a more complex counter",
@@ -64,7 +64,7 @@ ${makeExample(
 rhythm(.25, 6, 8) :: sound('dr').n($(1, 20, 5)).end(.25).out()
 `,
     false
-)}
+  )}
 
 ${makeExample(
     "Calling the drunk mechanism",
@@ -73,7 +73,7 @@ ${makeExample(
 rhythm(.25, 6, 8) :: sound('dr').n(drunk()).end(.25).out()
 `,
     false
-)}
+  )}
 
 ## Scripts
 	
@@ -89,7 +89,7 @@ ${makeExample(
 beat(1) :: script(1)
 `,
     true
-)}
+  )}
 
 ${makeExample(
     "Calling mutliple scripts at the same time.",
@@ -97,48 +97,10 @@ ${makeExample(
 beat(1) :: script(1, 3, 5)
 `,
     false
-)}
+  )}
 
 
 	
-## Mouse
-	
-You can get the current position of the mouse on the screen by using the following functions:
-	
-- <ic>mouseX()</ic>: the horizontal position of the mouse on the screen (as a floating point number).
-- <ic>mouseY()</ic>: the vertical position of the mouse on the screen (as a floating point number).
-	
-${makeExample(
-  "FM Synthesizer controlled using the mouse",
-  `
-beat(.25) :: sound('sine')
-  .fmi(mouseX() / 100)
-  .fmh(mouseY() / 100)
-  .vel(0.2)
-  .room(0.9).out()
-`,
-  true
-)}
-
-Current mouse position can also be used to generate notes:
-	
-- <ic>noteX()</ic>: returns a MIDI note number (0-127) based on the horizontal position of the mouse on the screen.
-- <ic>noteY()</ic>: returns a MIDI note number (0-127) based on the vertical position of the mouse on the screen.
-	
-
-${makeExample(
-  "The same synthesizer, with note control!",
-  `
-beat(.25) :: sound('sine')
-  .fmi(mouseX() / 100)
-  .note(noteX())
-  .fmh(mouseY() / 100)
-  .vel(0.2)
-  .room(0.9).out()
-`,
-  true
-)}
-
 ## Low Frequency Oscillators
 	
 Low Frequency Oscillators (_LFOs_) are an important piece in any digital audio workstation or synthesizer. Topos implements some basic waveforms you can play with to automatically modulate your paremeters. 
@@ -150,7 +112,7 @@ ${makeExample(
     "Modulating the speed of a sample player using a sine LFO",
     `beat(.25) && snd('cp').speed(1 + usine(0.25) * 2).out()`,
     true
-)};
+  )};
 
 - <ic>triangle(freq: number = 1, offset: number= 0): number</ic>: returns a triangle oscillation between <ic>-1</ic> and <ic>1</ic>.
 - <ic>utriangle(freq: number = 1, offset: number= 0): number</ic>: returns a triangle oscillation between <ic>0</ic> and <ic>1</ic>. The <ic>u</ic> stands for _unipolar_.
@@ -160,7 +122,7 @@ ${makeExample(
     "Modulating the speed of a sample player using a triangle LFO",
     `beat(.25) && snd('cp').speed(1 + utriangle(0.25) * 2).out()`,
     true
-)}
+  )}
 	
 - <ic>saw(freq: number = 1, offset: number= 0): number</ic>: returns a sawtooth-like oscillation between <ic>-1</ic> and <ic>1</ic>.
 - <ic>usaw(freq: number = 1, offset: number= 0): number</ic>: returns a sawtooth-like oscillation between <ic>0</ic> and <ic>1</ic>. The <ic>u</ic> stands for _unipolar_.
@@ -170,7 +132,7 @@ ${makeExample(
     "Modulating the speed of a sample player using a saw LFO",
     `beat(.25) && snd('cp').speed(1 + usaw(0.25) * 2).out()`,
     true
-)}
+  )}
 	
 - <ic>square(freq: number = 1, offset: number= 0, duty: number = .5): number</ic>: returns a square wave oscillation between <ic>-1</ic> and <ic>1</ic>. You can also control the duty cycle using the <ic>duty</ic> parameter.
 - <ic>usquare(freq: number = 1, offset: number= 0, duty: number = .5): number</ic>: returns a square wave oscillation between <ic>0</ic> and <ic>1</ic>. The <ic>u</ic> stands for _unipolar_. You can also control the duty cycle using the <ic>duty</ic> parameter.
@@ -179,7 +141,7 @@ ${makeExample(
     "Modulating the speed of a sample player using a square LFO",
     `beat(.25) && snd('cp').speed(1 + usquare(0.25, 0, 0.25) * 2).out()`,
     true
-)};
+  )};
 	
 - <ic>noise()</ic>: returns a random value between -1 and 1.
 	
@@ -187,7 +149,7 @@ ${makeExample(
     "Modulating the speed of a sample player using noise",
     `beat(.25) && snd('cp').speed(1 + noise() * 2).out()`,
     true
-)};
+  )};
 	
 ## Probabilities
 
@@ -202,7 +164,7 @@ ${makeExample(
 rhythm(0.125, 10, 16) :: sound('sid').n(4).note(50 + irand(50, 62) % 8).out()
 `,
     true
-)}
+  )}
 
 
 - <ic>prob(p: number)</ic>: return <ic>true</ic> _p_% of time, <ic>false</ic> in other cases.
@@ -217,7 +179,7 @@ prob(60) :: script(2);
 prob(80) :: script(toss() ? script(3) : script(4))
 `,
     true
-)}
+  )}
 
 - <ic>seed(val: number|string)</ic>: sets the seed of the random number generator. You can use a number or a string. The same seed will always return the same sequence of random numbers.
 
@@ -249,7 +211,7 @@ ${makeExample(
   rarely(8) :: sound('east').out(); // Rarely in 8 beats is even less
   `,
     true
-)}
+  )}
 
 ${makeExample(
     "Using chance with other operators",
@@ -259,7 +221,7 @@ ${makeExample(
   sometimes() :: onbeat(1,3) :: sound('snare').out();
   `,
     true
-)}
+  )}
 
 ${makeExample(
     "Using chance with chaining",
@@ -276,7 +238,7 @@ ${makeExample(
   .out()
   `,
     true
-)}
+  )}
 
 ## Math functions
 	
@@ -297,7 +259,7 @@ beat(.5) :: delay(usine(.125) * 80, () => sound('east').out())
 beat(.5) :: delay(50, () => sound('east').out())
 `,
     true
-)}
+  )}
 
 - <ic>delayr(ms: number, nb: number, func: Function): void</ic>: Delays the execution of a function by a given number of milliseconds, repeated a given number of times.
 
@@ -308,6 +270,6 @@ beat(1) :: delayr(50, 4, () => sound('east').speed([0.5,.25].beat()).out())
 flip(2) :: beat(2) :: delayr(150, 4, () => sound('east').speed([0.5,.25].beat() * 4).out())
 `,
     true
-)};
+  )};
 `;
 };

src/documentation/interaction.ts

@@ -0,0 +1,54 @@
+import { type Editor } from "../main";
+import { makeExampleFactory } from "../Documentation";
+
+// @ts-ignore
+export const interaction = (application: Editor): string => {
+  const makeExample = makeExampleFactory(application);
+  return `
+# Interaction
+
+Topos can interact with the physical world or react to events coming from outside the system (_MIDI_, physical control, etc).
+
+
+## Mouse
+	
+You can get the current position of the mouse on the screen by using the following functions:
+	
+- <ic>mouseX()</ic>: the horizontal position of the mouse on the screen (as a floating point number).
+- <ic>mouseY()</ic>: the vertical position of the mouse on the screen (as a floating point number).
+	
+${makeExample(
+    "FM Synthesizer controlled using the mouse",
+    `
+beat(.25) :: sound('sine')
+  .fmi(mouseX() / 100)
+  .fmh(mouseY() / 100)
+  .vel(0.2)
+  .room(0.9).out()
+`,
+    true
+  )}
+
+Current mouse position can also be used to generate notes:
+	
+- <ic>noteX()</ic>: returns a MIDI note number (0-127) based on the horizontal position of the mouse on the screen.
+- <ic>noteY()</ic>: returns a MIDI note number (0-127) based on the vertical position of the mouse on the screen.
+	
+
+${makeExample(
+    "The same synthesizer, with note control!",
+    `
+beat(.25) :: sound('sine')
+  .fmi(mouseX() / 100)
+  .note(noteX())
+  .fmh(mouseY() / 100)
+  .vel(0.2)
+  .room(0.9).out()
+`,
+    true
+  )}
+
+
+
+`
+}

src/main.ts

@@ -37,7 +37,7 @@ import { makeStringExtensions } from "./StringExtensions";
 localStorage.openpages = Date.now();
 window.addEventListener(
   "storage",
-  function (e) {
+  function(e) {
     if (e.key == "openpages") {
       // Listen if anybody else is opening the same page!
       localStorage.page_available = Date.now();
@@ -827,6 +827,7 @@ export class Editor {
     [
       "introduction",
       "interface",
+      "interaction",
       "code",
       "time",
       "sound",