Master IFI - WebSciences - 2017/2018

S'inscrire aux trois MOOCS precedents, on va s'y referer souvent.

Outils

• NodeJS : l'installer et verifier que les commandes node et npm sont dans votre PATH
• Si vous etes sous windows: un bon terminal, git terminal, cmder, bash for windows etc.
• Un bon editeur de code comme Visual Studio Code, Sublime Text ou equivalent.

Exercices / live coding

Exercice 1 : coder une simple animation a 60 images par seconde a l'aide du canvas HTML5

• Cours Weeks 3 et 4 du MOOC HTML5 Coding essentials and best practices + Week 2 du MOOC HTML5 Apps and Games

Exercice 2 : gestion d'evenements souris / clavier

Exercice 3 : generation de sons

• Quelques rappels: https://pudding.cool/2018/02/waveforms/
• ex de generateur de son en WebAudio : http://jsbin.com/qelavukiba/edit?htm...console,output

Exercice 4 : JavaScript oriente objet

Exercice 5 : noeuds WebAudio interessants, visualiser la forme d'onde d'un son, les frequences

A RENDRE POUR SEMAINE SUIVANTE

• Exercice 6 : synchroniser l'animation sur de la musique
  
  
  • Voir les exemples expliques dans la Week 1 du MOOC HTML5 Apps and Games partie WebAudio. Les explications concernant le dessin d'une waveform, des frequences et d'un vu-metre y sont, avec video de live coding et code source.
     
  • Voir aussi cet exemple plus complique, qui montre comment utiliser l'API de SoundCloud pour prendre des musiques par genre au hasard, et utiliser des animations avancees, avec effets de symetrie, dans un canvas. Le fichier canvas.js est particulierement interessant.