diff --git a/index.html b/index.html index ec2af08..80dfea5 100644 --- a/index.html +++ b/index.html @@ -174,6 +174,7 @@ Basics

Welcome

+

Atelier (FR)

Interface

Interaction

Keyboard

diff --git a/src/Documentation.ts b/src/Documentation.ts index 8c83cec..75ab410 100644 --- a/src/Documentation.ts +++ b/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); } -} \ No newline at end of file +} diff --git a/src/documentation/basics/atelier.ts b/src/documentation/basics/atelier.ts new file mode 100644 index 0000000..c12ae7a --- /dev/null +++ b/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 + +
+ +${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 "sid" ou "trump". +- Qu'est-ce qu'il se passe si j'enlève .out() ? +- Est-il possible de jouer un rythme très rapide ou très lent ? + + +### Ajout d'une basse + +
+ +${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 "pluck" ? + +- Que signifie .note([40,45].beat(2)) ? + +- Que se passe-t-il si je change la valeur dans .beat(2) ? + +- Que se passe-t-il lorsque j'ajoute de nouveaux nombres dans [40, 45] ? + +### Ajout d'une mélodie + +
+ +${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 live coding, 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 vib, delay, room ou size ? + +- Que se passe-t-il si je change les valeurs dans vib, delay, room ou size ? + +**Exercices :** + +- Transformer vib(8) en vib([2,4,8].beat(1)). +- Transformer "pluck" en ["pluck", "clap"].beat(1). + +Vous pouvez aussi utiliser la fonction rhythm 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 + +
+ +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 usine) +- 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)} + +` +}; + +