Add temporary workshop documentation

index.html

@@ -174,6 +174,7 @@
               <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="doc_header">Welcome </p>
+                <p rel="noopener noreferrer" id="docs_atelier" class="doc_header">Atelier (FR)</p>
                 <p rel="noopener noreferrer" id="docs_interface" class="doc_header">Interface</p>
                 <p rel="noopener noreferrer" id="docs_interaction" class="doc_header">Interaction</p>
                 <p rel="noopener noreferrer" id="docs_shortcuts" class="doc_header">Keyboard</p>

src/Documentation.ts

@@ -1,6 +1,7 @@
 import { type Editor } from "./main";
 // Basics
 import { introduction } from "./documentation/basics/welcome";
+import { atelier } from "./documentation/basics/atelier";
 import { loading_samples } from "./documentation/learning/samples/loading_samples";
 import { amplitude } from "./documentation/learning/audio_engine/amplitude";
 import { effects } from "./documentation/learning/audio_engine/effects";
@@ -77,6 +78,7 @@ export const makeExampleFactory = (application: Editor): Function => {
 
 export const documentation_pages = [
   "introduction",
+  "atelier",
   "sampler",
   "amplitude",
   "audio_basics",
@@ -126,6 +128,7 @@ export const documentation_factory = (application: Editor) => {
 
   return {
     introduction: introduction(application),
+    atelier: atelier(application),
     interface: software_interface(application),
     interaction: interaction(application),
     code: code(application),
@@ -218,28 +221,28 @@ export const updateDocumentationContent = (app: Editor, bindings: any) => {
     moreStyling: true,
     backslashEscapesHTMLTags: true,
     extensions: [showdownHighlight({
-      pre: true, 
+      pre: true,
       auto_detection: false
     }), ...bindings],
   });
- 
-  if(Object.keys(app.docs).length === 0) {
+
+  if (Object.keys(app.docs).length === 0) {
     app.docs = documentation_factory(app);
   }
 
-  function _update_and_assign(callback: Function) { 
+  function _update_and_assign(callback: Function) {
     const converted_markdown = converter.makeHtml(
       app.docs[app.currentDocumentationPane],
     );
-     callback(converted_markdown)
+    callback(converted_markdown)
   }
-  _update_and_assign((e: string)=> { 
+  _update_and_assign((e: string) => {
     let display_content = e === undefined ? loading_message : e;
-    document.getElementById("documentation-content")!.innerHTML = display_content; 
+    document.getElementById("documentation-content")!.innerHTML = display_content;
   })
   if (document.getElementById("documentation-content")!.innerHTML.replace(/"/g, "'") == loading_message.replace(/"/g, "'")) {
     setTimeout(() => {
       updateDocumentationContent(app, bindings);
     }, 100);
   }
-}
+}

src/documentation/basics/atelier.ts

@@ -0,0 +1,140 @@
+import { type Editor } from "../../main";
+import { makeExampleFactory } from "../../Documentation";
+
+export const atelier = (application: Editor): string => {
+  const makeExample = makeExampleFactory(application);
+  return `
+# Atelier (06 mars 2024)
+
+
+## Découverte
+
+<br>
+
+${makeExample(
+    "Percussions", `
+tempo(120) // Changer le tempo
+beat(1)::sound('kick').out()
+beat(2)::sound('snare').out()
+beat(.5)::sound('hh').out()
+`, true,)}
+
+- Qu'est-ce qu'il se passe si je change un nombre ?
+- Qu'est-ce qu'il se passe si je change un nom ? 
+  - Essayez par exemple <ic>"sid"</ic> ou <ic>"trump"</ic>.
+- Qu'est-ce qu'il se passe si j'enlève <ic>.out()</ic> ?
+- Est-il possible de jouer un rythme très rapide ou très lent ?
+
+
+### Ajout d'une basse
+
+<br>
+
+${makeExample(
+      "Une basse", `
+// Aucun changement dans le code
+beat(1)::sound('kick').out()
+beat(2)::sound('snare').out()
+beat(.5)::sound('hh').out()
+
+// Une nouvelle partie
+beat([0.25,0.5].beat(1))::sound("pluck")
+  .note([40,45].beat(2)).out()
+`, true,)}
+
+- Qu'est-ce que le son <ic>"pluck"</ic> ?
+
+- Que signifie <ic>.note([40,45].beat(2))</ic> ?
+
+- Que se passe-t-il si je change la valeur dans <ic>.beat(2)</ic> ?
+
+- Que se passe-t-il lorsque j'ajoute de nouveaux nombres dans <ic>[40, 45]</ic> ?
+
+### Ajout d'une mélodie
+
+<br>
+
+${makeExample(
+        "Le morceau complet", `
+// Aucun changement dans le code
+beat(1)::sound('kick').out()
+beat(2)::sound('snare').out()
+beat(.5)::sound('hh').out()
+beat([0.25,0.5].beat(1))::sound("pluck")
+  .note([40,45].beat(2)).out()
+
+// Nouvelle partie mélodique
+beat([0.25,0.5].beat())::sound("pluck")
+  .note([0,7,5,8,2,9,0].scale("Major",60).beat(1))
+  .vib(8).vibmod(1/4)
+  .delay(0.5).room(1.5).size(0.5)
+  .out()
+`, true,)}
+
+Ici, on ajoute une nouvelle mélodie mais il s'agit aussi d'un nouvel instrument. C'est pour cela que le code est plus long. Quand on fait du <em>live coding</em>, on code tout en même temps : notes, rythmes, mélodies, sons. C'est beaucoup de choses ! C'est pour cela que le code est court, on essaie de tout taper très vite en jouant !
+
+- Que signifie selon vous <ic>vib</ic>, <ic>delay</ic>, <ic>room</ic> ou <ic>size</ic> ?
+
+- Que se passe-t-il si je change les valeurs dans <ic>vib</ic>, <ic>delay</ic>, <ic>room</ic> ou <ic>size</ic> ?
+
+**Exercices :**
+
+- Transformer <ic>vib(8)</ic> en <ic>vib([2,4,8].beat(1))</ic>.
+- Transformer <ic>"pluck"</ic> en <ic>["pluck", "clap"].beat(1)</ic>.
+
+Vous pouvez aussi utiliser la fonction <ic>rhythm</ic> pour jouer rapidement des rythmes.
+
+${makeExample(
+          "Rythmes rythmes rythmes", `
+rhythm(0.5, 3, 8)::sound('bd').out()
+rhythm(0.5, 3, 8)::sound('clap').out()
+rhythm(0.5, 6, 8)::sound('hat').out()
+rhythm(0.25, 6, 8)::sound('hat')
+  .vel(0.3).speed(2).out()
+rhythm(0.5, 2, 8)::sound('sd').out()
+`, true)};
+
+## Créer un instrument
+
+<br>
+
+Nous allons créer un nouvel instrument à partir d'un son de base. Voici un premier son :
+
+${makeExample("Notre son de base", `beat(2)::sound('sine').note(50).ad(0, .5).out()`, true)};
+
+Ce son est assez ennuyeux. Nous allons ajouter quelques paramètres :
+
+${makeExample("Beaucoup mieux !", `beat(2)::sound('sine').note(50).fmi(2).fmh(2).ad(0, .5).out()`, true)};
+
+Nous allons aussi ajouter quelques effets intéressants :
+
+${makeExample("Ajout d'un écho", `beat(2)::sound('sine').note(50)
+  .fmi(2).fmh(2).ad(1/16, 1.5)
+  .delay(0.5).delayt(0.75).out()`,
+            true)}
+
+Nous pouvons utiliser plusieurs techniques pour rendre le son plus dynamique :
+- générer des valeurs aléatoires pour les paramètres
+- utiliser des générateurs de valeurs (comme <ic>usine</ic>)
+- utiliser la souris ou un autre contrôleur pour changer les valeurs en temps réel
+
+${makeExample("Plus dynamique encore", `
+beat(2)::sound('sine').note([50,55,57,62,66, 69, 74].mouseX())
+  .fmi(usine(1/4)).fmh([1,2,0.5].beat())
+  .ad(1/16, 1.5).delay(0.5).delayt(0.75)
+  .out()`, true)}
+
+
+Un exemple final, le plus complexe jusqu'à présent :
+
+${makeExample("Un instrument de musique complet", `
+beat(2)::sound('triangle')
+  .note([50,55,57,62,66, 69, 74].mouseX())
+  .fmi(usine(1/4)).fmh([1,2,0.5].beat())
+  .ad(1/16, 1.5).delay(0.5).delayt(0.75)
+  .room(0.5).size(8).lpf(usine(1/3)*4000)`, true)}
+
+`
+};
+
+