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

@@ -101,44 +101,6 @@ beat(1) :: script(1, 3, 5)
 
 
 	
-## 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. 

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

@@ -827,6 +827,7 @@ export class Editor {
     [
       "introduction",
       "interface",
+      "interaction",
       "code",
       "time",
       "sound",