Working on documentation

index.html

@@ -135,7 +135,7 @@
             <details class="" open=true>
               <summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
               <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_introduction" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Welcome </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>
@@ -167,8 +167,8 @@
               <summary class="font-semibold lg:text-xl pb-1 pt-1 text-orange-300">Patterns</summary>
               <div class="flex flex-col">
                 
-                <p rel="noopener noreferrer" id="docs_variables" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Variables</p>
+                <p rel="noopener noreferrer" id="docs_variables" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Global Variables</p>
-                <p rel="noopener noreferrer" id="docs_lfos" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">LFOs</p>
+                <p rel="noopener noreferrer" id="docs_lfos" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Low Freq Oscs.</p>
                 <p rel="noopener noreferrer" id="docs_probabilities" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Probabilities</p>
                 <p rel="noopener noreferrer" id="docs_chaining" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Chaining</p>
                 <p rel="noopener noreferrer" id="docs_functions" class="pl-2 pr-2 lg:text-xl text-sm hover:bg-neutral-800 py-1 my-1 rounded-lg">Functions</p>

src/documentation/mouse.ts

@@ -16,13 +16,16 @@ You can get the current position of the mouse on the screen by using the followi
 - <ic>mouseY()</ic>: the vertical position of the mouse on the screen (as a floating point number).
 	
 ${makeExample(
-    "FM Synthesizer controlled using the mouse",
+    "Vibrato controlled by mouse",
     `
 beat(.25) :: sound('sine')
-  .fmi(mouseX() / 100)
+  .note([0,4,5,10,11,15,16]
-  .fmh(mouseY() / 100)
+        .palindrome()
-  .vel(0.2)
+        .scale('pentatonic', 50).beat(.25)
-  .room(0.9).out()
+        + [-12, 0, 12].beat(0.25))
+  .vib(mouseX()/700).vibmod(mouseY()/200)
+  .pan(r(0, 1))
+  .room(0.35).size(4).out()
 `,
     true
   )}
@@ -36,15 +39,13 @@ Current mouse position can also be used to generate notes:
 	
 
 ${makeExample(
-    "The same synthesizer, with note control!",
+    "Using the mouse to output a note!",
     `
 beat(.25) :: sound('sine')
-  .fmi(mouseX() / 100)
+  .lpf(7000)
+  .delay(0.5).delayt(1/6).delayfb(0.2)
   .note(noteX())
-  .fmh(mouseY() / 100)
+  .room(0.35).size(4).out()`,
-  .vel(0.2)
-  .room(0.9).out()
-`,
     true
   )}
 

src/documentation/patterns.ts

@@ -15,7 +15,7 @@ ${makeExample(
 beat(1)::sound('kick').out()
 `,
     true
-)}
+  )}
 
 can be turned into something more interesting like this easily:
 
@@ -27,7 +27,7 @@ beat([1, 0.5, 0.25].dur(0.75, 0.25, 1) / c)::sound(['kick', 'fsoftsnare'].beat(0
   .ad(0, .25).shape(usine(1/2)*0.5).speed([1, 2, 4].beat(0.5)).out()
 `,
     true
-)}
+  )}
 
 
 **Topos** comes with a lot of array methods to deal with musical patterns of increasing complexity. Some knowledge of patterns and how to use them will help you to break out of simple loops and repeating structures.  The most basic JavaScript data structure is the [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array). Topos is extending it with custom methods to describe patterns that evolve over time. These methods can often be chained to compose more complex expressions: <ic>[1, 2, 3].repeatOdd(5).palindrome().beat()</ic>.
@@ -45,7 +45,7 @@ beat([0.5, 1].beat(4)) :: sound('kick').out()
 beat(2)::snd('snare').shape(.5).out()
 `,
     true
-)}
+  )}
 ${makeExample(
     "Using beat to create arpeggios",
     `
@@ -63,7 +63,7 @@ beat([.5, .25].beat(0.5)) :: sound('sine')
   .out()
 `,
     false
-)}
+  )}
 ${makeExample(
     "Cool ambiance",
     `
@@ -74,7 +74,7 @@ flip(4)::beat(2)::snd('pad').n(2).shape(.5)
   .orbit(2).room(0.9).size(0.9).release(0.5).out()
 `,
     false
-)}
+  )}
 
 - <ic>bar(value: number = 1)</ic>: returns the next value every bar (if <ic>value = 1</ic>). Using a larger value will return the next value every <ic>n</ic> bars.
 
@@ -89,7 +89,7 @@ beat([1/4, 1/2].dur(1.5, 0.5))::sound(['jvbass', 'fikea'].bar())
   .out()
 `,
     true
-)}
+  )}
 
 ${makeExample(
     "Using beat and bar in the same example",
@@ -102,7 +102,7 @@ beat([1, 0.5].beat()) :: sound(['bass3'].bar())
   .speed([1,2,3].beat())
   .out()
 `
-)}
+  )}
 
 - <ic>dur(...list: numbers[])</ic> : keeps the same value for a duration of <ic>n</ic> beats corresponding to the <ic>nth</ic> number of the list you provide.
 
@@ -118,7 +118,7 @@ beat(1)::sound(['kick', 'fsnare'].dur(3, 1))
   .n([0,3].dur(3, 1)).out()
   `,
     true
-)}
+  )}
 
 ## Manipulating notes and scales
 
@@ -128,13 +128,13 @@ beat(1)::sound(['kick', 'fsnare'].dur(3, 1))
 ${makeExample(
     "Converting a list of integers to pitch classes using key and scale",
     `
-    beat(0.25) :: snd('sine')
+beat(0.25) :: snd('sine')
   .pitch([0,1,2,3,4,6,7,8].beat(0.125))
   .key(["F4","F3"].beat(2.0))
-    .scale("minor").out()
+  .scale("minor").ad(0, .25).out()
 `,
     true
-)}
+  )}
 
   - <ic>scale(scale: string, base note: number)</ic>: Map each element of the list to the closest note of the slected scale. [0, 2, 3, 5 ].scale("major", 50) returns [50, 52, <ic>54</ic>, 55]. You can use western scale names like (Major, Minor, Minor pentatonic ...) or [zeitler](https://ianring.com/musictheory/scales/traditions/zeitler) scale names. Alternatively you can also use the integers as used by Ian Ring in his [study of scales](https://ianring.com/musictheory/scales/).
 
@@ -146,7 +146,7 @@ beat(1) :: snd('gtr')
   .out()
 `,
     true
-)}
+  )}
 
 - <ic>scaleArp(scale: string, mask: number)</ic>: extrapolate a custom-masked scale from each list elements. [0].scale("major", 3) returns [0,2,4]. <ic>scaleArp</ic> supports the same scales as <ic>scale</ic>.
 
@@ -158,7 +158,7 @@ beat(1) :: snd('gtr')
   .out()
 `,
     true
-)}
+  )}
 
 ## Iteration using the mouse
 
@@ -174,7 +174,7 @@ beat(0.25)::sound('wt_piano')
   .ad(0, .2).out()
 `,
     true
-)}
+  )}
 
 ## Simple data operations
 
@@ -192,7 +192,7 @@ beat([1,.5,.25].beat()) :: snd('wt_stereo')
   .lpad(4, 0, .25).sustain(0.125).out()
 `,
     true
-)}
+  )}
 
 - <ic>random(index: number)</ic>: pick a random element in the given list.
 - <ic>rand(index: number)</ic>: shorter alias for the same method.
@@ -211,7 +211,7 @@ beat([.5, 1].rand() / 2) :: snd(
   .end(0.5).out()
 `,
     true
-)}
+  )}
 
 - <ic>pick()</ic>: pick a random element in the list.
 
@@ -223,7 +223,7 @@ beat(0.25)::sound(['ftabla', 'fwood'].pick())
   .room(0.5).size(1).out()
   `,
     true
-)}
+  )}
 
 - <ic>degrade(amount: number)</ic>: removes _n_% of the list elements. Lists can be degraded as long as one element remains. The amount of degradation is given as a percentage.
 
@@ -234,7 +234,7 @@ ${makeExample(
 beat(.25)::snd('amencutup').n([1,2,3,4,5,6,7,8,9].degrade(20).loop($(1))).out()
 `,
     true
-)}
+  )}
 
 - <ic>repeat(amount: number)</ic>: repeat every list elements _n_ times.
 - <ic>repeatEven(amount: number)</ic>: repeat every pair element of the list _n_ times.
@@ -246,7 +246,7 @@ ${makeExample(
 beat(.25)::sound('amencutup').n([1,2,3,4,5,6,7,8].repeat(4).beat(.25)).out()
 `,
     true
-)}
+  )}
 
 - <ic>loop(index: number)</ic>: loop takes one argument, the _index_. It allows you to iterate over a list using an iterator such as a counter. This is super useful to control how you are accessing values in a list without relying on a temporal method such as <ic>.beat()</ic> or </ic>.bar()</ic>.
 
@@ -256,7 +256,7 @@ ${makeExample(
 beat(1) :: sound('numbers').n([1,2,3,4,5].loop($(3, 10, 2))).out()
 `,
     true
-)}
+  )}
 
 - <ic>shuffle(): this</ic>: shuffles a list! Simple enough!
 
@@ -266,7 +266,7 @@ ${makeExample(
 beat(1) :: sound('numbers').n([1,2,3,4,5].shuffle().loop($(1)).out()
 `,
     true
-)}
+  )}
 
 - <ic>rotate(steps: number)</ic>: rotate a list to the right _n_ times. The last value become the first, rinse and repeat.
 
@@ -284,7 +284,7 @@ beat(.25) :: snd('sine').fmi([1.99, 2])
   .out()
 `,
     true
-)}
+  )}
 
 ## Filtering
 
@@ -297,7 +297,7 @@ ${makeExample(
 beat(1)::snd('sine').sustain(0.1).freq([100,100,100,100,200].unique().beat()).out()
 `,
     true
-)}
+  )}
 
 ## Simple math operations
 

src/documentation/variables.ts

@@ -7,7 +7,9 @@ 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. **However**, everybody knows that global variables are cool and should be used everywhere. This is an incredibely powerful tool to use for radically altering a composition in a few lines of code.
+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.
+
+**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.