Projet mooc lecjoa version Montpel'libre 2

Comment générer un instrument de musique (image et sons)

Scénario :

semaine 1 :

semaine 2 :

semaine 3 :

Objectif :

Publique visé :

Cours :

Cours semaine 1 jour 1 :

• Installation de firefox :

  1. Allumer votre ordinateur.
  2. Ouvrir votre navigateur internet.
  3. Dans la bare de recherche indiquer le terme Firefox.
  4. Dans les réponses proposées, cliquer sur une commençant par :
     https://www.mozilla.org
  5. Suiver les instruction pour installer firefox.

• Installation de Lecjoa :

  1. Au premier démarrage de Firefox, cliquer en haut à droite sur les trois barres horizontales et choisissez Modules.
  2. Dans l'onglet qui s'ouvre , dans la barre de recherche, entrer le terme Lecjoa.
  3. Dans les réponses proposées, cliquer sur le boutton installer de Lecjoa.

• Création du répertoire de travail :

  1. Sous windows appuyer sur les touches
     Ctrl + Maj + N
     puis renommer le dossier créé
  2. Sous linux ouvrir un terminal et écrire
     mkdir Lecjoa
     pour créer le répertoire nommé Lecjoa
  3. Sous mac appuyer sur les touches
     Shift (↑), ⌘ et n
     Entrer le nom de votre dossier et valider.

• Vidéo d'accompagnement :

Cours semaine 1 jour 2 :

• Téléchargement des fichiers :

  1. Sous windows cliquer sur le lien : Download Lecjoa
     Enregitrer le fichier dans le répertoire de travail créé.
     Dézipper le fichier en restant dans le répertoire de travail
  2. Sous linux ouvrir un terminal et se rendre dans le répertoire créé :
     cd Lecjoa
     entrer dans le terminal :
     wget -c https://www.letime.net/HowToLecjoa/lecjoa.zip
     valider, puis entrer dans le terminal
     unzip lecjoa.zip
  3. Sous mac cliquer sur le lien : Download Lecjoa
     Enregitrer le fichier dans le répertoire de travail créé.
     Dézipper le fichier en restant dans le répertoire de travail

• Créer son extensions Firefox :

  1. Avec le navigateur de fichier se rendre dans répertoire de travail, il doit s'y trouver le fichier dézippé :
  2. Ouvrir avec son éditeur de texte le fichier:
     manifest.json
  3. remplacer le terme lecjoa dans ("id": "lecjoa@mozilla.org") par votre nom sans accent
     en exemple si le nom est lelibre : "id": "lelibre@mozilla.org"
  4. remplacer le terme lecjoa dans ("name": "Lecjoa",) par votre nom ("name": "lelibre",)
  5. remplacer le terme lecjo.html dans ("page": "lecjo.html") par ("page": "PianoBaul.html")
  6. enregistrer le fichier et se rendre dans le répertoire page-scripts
  7. Ouvrir avec son éditeur de texte le fichier:
     background.js
  8. remplacer le terme lecjo.html dans ("url": chrome.extension.getURL("lecjo.html")") par ("url": chrome.extension.getURL("PianoBaul.html"))
  9. enregistrer le fichier et ouvrir Firefox
  10. Dans firefox, cliquer en haut à droite sur les trois barres horizontales (open menu)
  11. Dans le menu déroulant qui s'ouvre, cliquer sur Add-ons
  12. Cliquer sur la petite flèche, juste avant la barre de recherche des Add-ons (Tools for all Add-ons)
  13. Dans le menu déroulant qui s'ouvre, cliquer sur Debugs Add-ons
  14. Cliquer sur le bouton Load temporary Add-on
  15. Dans le navigateur de fichier qui s'ouvre, se rendre dans le répertoire de travail et sélectionner le fichier manifest.json (celui que vous avez modifié précédement)
  16. Cliquer sur le bouton Open. Si tout c'est bien passé vous devez voir apparaitre une icone qui affiche votre nom, quand vous placez le curseur de votre souris dessus.
  17. Cliquer sur l'icone se trouvant dans la barre des taches et un clavier basique doit apparaitre.
  18. Fermer entièrement firefox, reprendre le tutoriel pour modifier votre nom et éventuellement l'icone dans le répertoire page-scripts et faire à nouveau un test. Reprendre à plusieurs reprises en s'aidant si besoin de Documentation manifest.json

• Vidéo d'accompagnement :

  1. Documentation vidéo

Cours semaine 1 jour 3 :

• Web Extension :

• Reprendre le lien Documentation manifest.json du deuxième jour, et modifier le nom, le numéro de version, le nom de l'icone, jusqu'à être familiarisé avec l'extension firefox qui ouvrira l'instrument de musique.

• Vidéo d'accompagnement :

  1. Video semaine 1 jour 2

Cours semaine 1 jour 4 :

• L'instrument de musique:

  1. Suivre le cours du quatrième jour, et modifier l'instrument de musique selon instructions
  2. L'instrument de musique nous apparait sous forme d'image à l'écran
  3. Différentes zones de cette image possèdent une identité. Chaque identité est attaché à une note de musique en javascript.
  4. Dans cette partie du cours, nous étudions comment dessiner une image en css, et comment donner une identité à une forme dessiner.
  5. A étudier en premier, les forme de bases en css
  6. Nous ouvrons avec l'éditeur de texte le fichier adresse.css, qui se trouve dans le répertoire PianoBaul
  7. le fichier adresse.css est composé d'une liste de noms aux propriétés génératrices différentes chacun
     Ces noms permettent au html d'appeler ses propriétés
  8. Comme première manipulation, nous allons changer les couleurs en les remplaçant par des couleurs à l'aspect dégradé par rapport à un bord
  9. Nous avons comme première propriété :
     .place1{
     position:absolute;
     background-color: red;
     width:13%;
     height:13%;
     }
     Nous remplaçons : background-color: red;
     par : background: -moz-linear-gradient(red, yellow);
  10. Nous avons comme deuxième propriété :
      .place2{
      position:absolute;
      background-color: blue;
      margin-left :14%;
      width:13%;
      height:13%;
      }
      Nous remplaçons : background-color: blue;
      par : background: -moz-linear-gradient(#0000ff, #ffff00);
      Nous remarquons que nous obtenons exactement le même dessin en utilisant un autre code couleur, il n'y a que la position qui change
      Le dégradé passe du haut vers le bas, de la couleur principale par la couleur jaune
  11. Nous avons comme troisième propriété :
      background-color: blue;
      Nous remplaçons : background-color: blue;
      par : background: -moz-linear-gradient( 45deg,#0000ff, #ffff00);
      Nous remarquons que nous obtenons un dégradé bleu partant du bas à gauche, allant a jaune en haut à droite
  12. Nous avons comme troisième propriété :
      background-color: red;
      si nous le remplaçons par
      background: -webkit-linear-gradient(left,#990033,#ff5050,#ff9966,#ffcc00,#99cc00,#00cc00,#009999);
      nous obtenons une suite de couleurs selon les indices des codes couleurs indiqués de la gauche vers la droite
  13. Indicateur video de code couleur
  14. En s'inspirant du cours et des différents exemples, construire sa propre forme d'instrument de musique
• Document vidéo

Cours semaine 1 jour 5 :

• Envoyer un mail contenant l'instrument de musique à contact@montpel-libre.fr avec pour sujet lecjoa semaine 1 mooc 2

Cours semaine 2 jour 1 :

• Exemples :

  1. Forme de piano
     css du piano
  2. Forme guitare électrique
     css guitare électrique
  3. Forme banjo
     css banjo
  4. Forme flute
     css flute

Cours semaine 2 jour 2 :

• Les notes :

  1. Les notes sont composées de plusieurs dimensions, chaque dimension est piloté par une valeur dans une lettre indicée
     
  2. De manière à simplifier l'écriture, j'utilise souvent pour un instrument de musique, une base contenant toutes les dimensions auquel j'ajoute un tableau du nombre de note pour ne faire varier qu'une valeur quand je génère toutes les notes lors de l'ouverture de la page HTML
  3. Les notes de musiques sont au format audio abadie.adn
  4. Le fichier qui contient les notes se nomme adn1.js et il se trouve dans le répertoire PianoBaul
  5. Si nous analysons le fichier, nous trouvons en premier la déclaration des variables:
     var m={0:[],1:[],2:[],3:[],4:[],5:[],6:[],7:[],8:[],9:[],10:[],11:[],12:[],13:[],14:[],15:[],16:[],17:[]
     ,18:[],19:[],20:[],21:[],22:[],23:[],24:[],25:[],26:[],27:[],28:[],29:[],30:[],31:[],32:[]
     ,33:[],34:[],35:[],36:[],37:[],38:[],39:[],40:[],41:[],42:[],43:[],44:[],45:[],46:[],47:[],48:[]};
     
  6. nous trouvons la forme générale qui met en équilibre les différentes dimensions acoustiques:
     var val1 = [1, 175, 14, 4, 0, 0, 0, 0, 0, 85,
     50, 4, 0, 0, 0, 0, 0, 0, 220, 200,
     0, 0, 0, 0, 0, 0, 0, 85, 14, 0,
     0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
     0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
     0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
     0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
     0, 30, 0, 0, 49];
     C'est à cette en droit que nous retouchons pour modifier la forme de base de toutes les notes
     adressage des dimensions
  7. nous trouvons les tableaux de variation en fonction des notes de musique:
     var val = [57, 56, 55, 54, 53, 52, 51, 50, 49, 48, 47, 46,
     45, 44, 43, 42, 41, 40, 39, 38, 37, 36, 35, 34,
     33, 32, 31, 30, 29, 28, 27, 26, 25, 24, 23, 22,
     21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9];
     var val2 = [57, 56, 55, 54, 53, 52, 51, 50, 49, 48, 47, 46,
     45, 44, 43, 42, 41, 40, 39, 38, 37, 36, 35, 34,
     33, 32, 31, 30, 29, 28, 27, 26, 25, 24, 23, 22,
     21, 20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9];
     var val3 = [114, 112, 110, 108, 106, 104, 102, 100, 98, 96, 94, 92,
     90, 88, 86, 84, 82, 80, 78, 76, 74, 72, 70, 68,
     66, 64, 62, 60, 58, 56, 54, 52, 50, 48, 46, 44,
     42, 40, 38, 36, 34, 32, 30, 28, 26, 24, 22, 20, 18];
  8. nous trouvons l'adressage des tableaux pour construire les notes:
     for(var b1= 0; b1 < 49; b1++)
     {
     for(var b2= 0; b2 < 75; b2++)
     {
     m[b1][b2]=val1[b2];
     }
     m[b1][2]=val[b1];
     m[b1][10]= val[b1];
     m[b1][28]= val2[b1];
     m[b1][19]= val3[b1];
     }
  9. Le reste du fichier sert au nombre de notes générées et à la génération
  10. Pour modifier les notes de notre premier instrument de musique créé,
      nous allons utiliser la documentation du lien (adressage des dimensions) au dessus,
      et chercher un modèle grossier de voix humaine.
      Le son est une variation de pression de l'air dans le temps
      Pour cette première approche, sans faire de biologie, pour émettre un son,
      nous nous appercevons qu'il faut souffler et aussi avoir un mouvement vers la bouche.
      Ce qui se traduit par une variation de pression à laquelle vient s'ajouter une déformation par une autre variation.
      Nous allons donc pour ce premier instrument utiliser 4 fronts, 2 fronts pour le souffle et 2 fronts pour la déformation
      Dans la documentation nous trouvons que la 11ème valeur, en 12ème position (puisqu'il existe la position 0) dans la variable val1, indique le nombre de fronts de la forme acoustique générée, nous allons donc écrire la valeur 4 en 12ème position dans val1
      
  11. A partir d'ici, je ne parle plus que de position dans le tableau, sans utiliser le nom, pour éviter les confusions
  12. Ensuite, nous allons écrire les deux variations qui se répètent plus rapidement car ce sont celles qui semblent le plus atténuées en première approche
      Nous trouvons dans la documentation que la valeur maximale supérieur (surpression) est en 2ème position avec sa durée en 3ème position
      Et nous trouvons dans la documentation que la valeur maximale inférieur (dépression) est en 10ème position et sa durée en 11ème position.
      Avec aux extrèmes les valeurs 150 et 30 et une durée de 28 pour le premier front et 56 pour le second
  13. Ce qui nous donne en plaçant les 4 valeurs de fronts, plus la valeur du nombre de fronts, avec toutes les autres valeurs de la forme à 0:
      var val1 = [0, 150, 28, 0, 0, 0, 0, 0, 0, 30,
      56, 4, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0];
  14. La variation est plus rapide, ce qui se traduit par plus de front. Dans la documentation pour répéter une paire de front il est indiqué que c'est la quatrième position. Pour répéter 4 fois, nous allons entrer la valeur 4. Ce qui donne:
      var val1 = [0, 150, 28, 4, 0, 0, 0, 0, 0, 30,
      56, 4, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0];
  15. Le troisième front s'écrit avec les positions 18 et 19, le quatrième front avec les positions 27 et 28.
      C'est ici le soufle forte variation donc nous plaçons uneamplitude haute à 220 et une amplitude basse à 30. Pour les durées, nous plaçons l'amplitude haute à 200 et l'amplitude basse à 56 pour reprendre les valeurs du 2ème front. Ce qui donne
      var val1 = [0, 150, 28, 4, 0, 0, 0, 0, 0, 30,
      56, 4, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 220, 200,
      0, 0, 0, 0, 0, 0, 0, 0, 30, 56,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0];
  16. Nous devons indiquer combien de fois, cette forme acoustique est répété, pour qu'elle devienne audible (loi d'une des 2 dimensions des forces)
      La position qui permet d'indiquer la force par répétition générale est la position 72, pour une répétition de 10, cela donne :
      var val1 = [0, 150, 28, 4, 0, 0, 0, 0, 0, 30,
      56, 4, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 220, 200,
      0, 0, 0, 0, 0, 0, 0, 0, 30, 56,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 10, 0, 0, 0];
  17. Installer l'extension créé et faire un test. Normalement dans l'instrument de musique créé, nous ne devons pas avoir de son audible, sur les dernières touches du clavier an bas à droite. Reprendre la forme en plaçant la valeur 30 dans la position 72. La création d'un tableau pour corriger les durées sera vu plus tard
  18. Maintenant que la forme générale de la note est créée, nous allons nous occuper de créer les différence entre les notes.
      Les différences entre les notes sont générées avec les tableaux val, val2, val3 ... autant que necesaire. Ici dans l'exemple nous avons 4 fronts donc 8 tableaux potentiel, plus les tableaux annexes comme la force sur un paire de fronts ou la force générale.
  19. Chaque tableau est composé du nombre de notespossibles, donc ici 49
      Pour l'exercice nous allons faire varier qu'une seule valeur, et nous allons utiliser le tableau val pour écrire cette valeur.
      Prenons le cas de la durée du front élevé en amplitude, le 3ème front
  20. Nous écrivons val en décrémentant d'une durée 4
      var val = [200, 196, 192, 188, 182, 178, 174, 172, 168, 164, 160, 156,
      152, 148, 144, 140, 136, 132, 128, 124, 120, 116, 112, 108,
      104, 100, 96, 92, 88, 84, 80, 76, 72, 68, 64, 60,
      56, 52, 48, 44, 40, 36, 32, 28, 24, 20, 16, 12, 8];
      
  21. Ensuite nous reprenons la boucle génératrice pour qu'elle ne remplace que la valeur de la position 11 par la valeur se trouvant dans le tableau val. Attention, il ne faut pas oublier que la position est à + 1, d'ou c'est la valeur 10 qu'il faut entrer en indice pous obtenir la position 11
      for(var b1= 0; b1 < 49; b1++)
      {
      for(var b2= 0; b2 < 75; b2++)
      {
      m[b1][b2]=val1[b2];
      }
      m[b1][10]=val[b1];
      }
  22. Faire un test de l'extension firefox, puis s'exercer en créant des notes

Cours semaine 2 jour 3 :

• Préparation :

  1. Décider combien de notes vont pouvoir être générées par l'extension
  2. Si besoin modifier le fichier adn1.js en conséquence
  3. Si besoin modifier la fin du fichier back1.js, en modifiant le nombre de notes dans le tableau pour et dans la boucle juste au dessous
  4. Décider si les notes vont avoir une fome commune ou si plusieurs formes vont être utilisées
  5. Si besoin modifier le fichier adn1.js en conséquence
  6. Ajuster le clavier actuel au nombre de notes et lancer l'extension pour tester le son
  7. Décider de la forme générale de l'instrument de musique et quelles sont les formes qui vont être active (jouer un son au clique)
  8. Une fois les notes ajustées, et les formes décidées, nous ouvrons avec l'éditeur de texte la page PianoBaul.html et dans un nouvel onglet la page adresse.css
  9. Les dessins sont dans la page adresse.css, chaque dessin est nommé place avec un indice. C'est un peu comme une banque d'images, il peu y en avoir trop, cela ne gène pas. Nous pouvons changer le nom des images, cela ne gène pas dans la mesure ou la page html appelle le bon nom. Nous reviendrons après sur ce fichier.
  10. Dans la page HTML, nous trouvons dans une série de div, une identité qui permet de jouer le son associé à une image qui délimite ou le son est joué :
      id="b1v" class="place1"
  11. Dans un premier temps, nous supprimons tout les class="..." de manière à obtenir une image vierge
  12. Nous identifions la forme utile qui va servir de support à notre première note de musique à l'aide de :
      A étudier en premier, les forme de bases en css
      et nous entrons les valeurs dans .place1 qui se trouve dans le fichier adresse.css
      Nous retournons avec l'éditeur de texte dans PianoBaul.html et nous restituons place1 au premier dic (id="b1v" class="place1")
      Nous pouvons très bien inclure des dessins dans le dessin(des div dans le div), le son sera joué sur tous les dessins car il sera en héritage
  13. Une fois le premier dessin créé, lancer votre extension, pour vérifier que votre dessin correspond à ce que vous avez prévu, et tester en cliquant sur le dessin pour s'assurer que le son est bien joué
  14. Reprendre la dernière action autant de fois qu'il y a de notes dans votre instrument de musique
  15. Faire la finition du dessin de votre instrument en incluant des div sans identité, qui se contentent d'appeler des images dans adresse.css
      Pour que les div de décors soient en fond, il faut les placer en premier dans la page html

Cours semaine 2 jour 4 :

• entrainement :

  1. modifier le nombre de notes de l'instrument

Cours semaine 2 jour 5 :

• Envoyer un mail contenant l'instrument de musique à contact@montpel-libre.fr avec pour sujet lecjoa semaine 2 mooc 2

Cours semaine 3 jour 1 :

• document 1
  document 2
  document 3
  Dessiner son instrument en s'inspirant des documentations

Cours semaine 3 jour 2 :

• document 1
  document 2
  document 3
  Dessiner son instrument en s'inspirant des documentations

Cours semaine 3 jour 3 :

• Dessiner et tester son instrument de musique final

Cours semaine 3 jour 4 :

• Envoyer un mail contenant l'instrument de musique à contact@montpel-libre.fr avec pour sujet lecjoa semaine 3 mooc 2