Animation pédagogique interactive en HTML5 et JavaScript, Etude

Animation pédagogique
interactive en HTML5 et
JavaScript, Etude
prospective.
Projet n° 20
Réalisé par :
 Olivier Fauvel-Jaeger
 Frédéric Guégan
 Giacomo Rombaut
Professeurs encadrants :
 Peter Sander
 Jean-Paul Stromboni
Projet n° 20 – 22/01/2013
Page 1
Sommaire
Introduction ................................................................................................ 3
1.
Evolution de l’animation web, de Flash à HTML5 .............................................. 4
2.
Objectifs et contraintes ............................................................................ 5
3.
Réalisation d’une animation JavaScript. Pourquoi ? ........................................... 6
a.
Box2D une bibliothèque puissante ............................................................. 7
b.
Réalisation d’une animation JavaScript à l’aide de Box2D ................................ 8
c.
Réalisation d’une animation JavaScript sans bibliothèque externe ..................... 10
d.
« Avec ou sans Box2D » une question de goût .............................................. 12
4.
Organisation du travail ............................................................................. 13
5.
Conclusion et retour sur expérience............................................................. 14
Références ................................................................................................. 15
Projet n° 20 – 22/01/2013
Page 2
Introduction
Dans le cadre de la Quatrième année du cursus Science Informatique, un projet
réalisé en janvier, par groupe de 3 ou 4 élève, permet d'assimiler, en les utilisant de façon
personnelle et originale, les savoirs et des savoir-faire des cours et des TD/TP.
Dans le cadre du cours SI4 "Introduction à la Commande par Ordinateur", les étudiants
sont amenés à travailler avec la technologie Flash. Dans le cadre de l'évolution des standards
du web cette technologie est amenée à disparaitre en profit du html5.
Projet n° 20 – 22/01/2013
Page 3
1. Evolution de l’animation web, de Flash à HTML5
De son invention à son déclin, le Flash a largement évolué, voyons comment HTML5 tend à
remplacer cette technologie.
Depuis sa création en 1991 le web connecte le monde, mais malgré l’évolution des
technologies les pages web restent tristement statique. C’est flash le premier qui apporte
du mouvement dans nos page web en proposant pour la première fois ce que l’on appelle
aujourd’hui une application internet riche.
En 1998, flash est découvert par le grand public, c’est à partir de ce moment que
commence son expansion sur nos ordinateurs. Ce logiciel permet de manipuler des
graphiques vectoriels, de bitmaps et de scripts ActionScript qui sont utilisés pour les
applications web, les jeux et les vidéos.
Au fil des années, la technologie Flash est devenue une des méthodes les plus
populaires pour ajouter des animations et des objets interactifs à une page web ; en
effet, aujourd’hui flash est installé sur 96 % des ordinateurs dans le monde.
Utilisateurs de Flash
14%
4%
1%
81%
Version 11.x
Projet n° 20 – 22/01/2013
Version 10.x
Non installé
Autre version
Page 4
Il faudra attendre 2008 pour qu’une alternative se présente et le w3c qui intervient
en proposant HTML5 et la balise <canvas> qui offre un espace de dessin et d’animation.
Aujourd’hui plus de 88% des utilisateurs possèdent un navigateur compatible html5,
et se chiffre est en hausse. Face à la bataille d’Apple contre la technologie Flash, Adobe a
abandonné l’application Flash pour mobile est se concentre aujourd’hui sur la technologie
html5.
En un an le nombre de site utilisant Flash est passé de 28% à 24% et se nombre ne
cesse de baisser. Html5 est en bonne voie pour remplacer Flash dans le domaine de
l’animation web.
2. Objectifs et contraintes
C’est pourquoi, suite à ce déclin de flash, nous nous demandons dans quelle mesure
est-il possible de simuler en html5 des processus physiques, chimiques, scientifiques,
techniques… à des fins pédagogiques, voir par exemple les 'phets' que l'on trouve sur le site
de l'université de Boulders Colorado (cf. références).
Pour répondre à cette question, nous avons comme objectif de refaire l’animation
Flash ‘Lunar Lander’ du cours « Introduction à la commande par ordinateur » en se limitant
aux technologies HTML5 et JavaScript.
Projet n° 20 – 22/01/2013
Page 5
Au cours de notre étude préliminaire nous avons découvert la bibliothèque JavaScript
Box2D spécialisée dans les jeux qui simule un moteur physique. Suite à l’apparente
simplicité de cette bibliothèque nous avons donc décidé de réaliser ce jeu pédagogique à
la fois à l’aide de cette bibliothèque mais aussi sans celle-ci, et de comparé la facilité de
développement, la qualité du rendu ainsi que l’intérêt pédagogique des deux solutions.
Un autre de nos objectifs et de reprendre les équations différentielles du second degré
de l’application ‘Lunar Lander’ en flash afin de pouvoir reproduire les mêmes mouvements
et obtenir une simulation physique réaliste.
Enfin, pour aider les étudiants et les professeurs à développer des animations à l’aide
des technologies HTML5 et JavaScript, nous avons décidé de réaliser deux tutoriels sur
l’introduction à l’animation en HTML5 et JavaScript dont un à l’aide de la bibliothèque
Box2D. De plus, en complément du tutoriel cette bibliothèque, nous ajoutons un espace de
développement simplifié adapté aux animations JavaScript comprenant certaines fonctions
de bases pour l’animation réalisées en JavaScript.
3. Réalisation d’une animation JavaScript. Pourquoi ?
Comme nous l’avons dit précédemment, flash vient à disparaître, c’est pourquoi nous
réalisons cette animation avec JavaScript.
En effet, aujourd’hui, 88 % des utilisateurs d’internet ont accès à cette technologie et ce
chiffre est en hausse. Voici par exemple l’ensemble des navigateurs étant compatible avec
De plus, HTML5 et JavaScript sont les seules technologies pouvant rivalisées face à flash.
Un autre avantage conséquent est le fait que cette technologie est libre d’accès
contrairement aux logiciels Adobe payants permettant de développer avec flash.
Projet n° 20 – 22/01/2013
Page 6
a. Box2D une bibliothèque puissante
Pour réaliser cette animation, nous avons décidé de la réaliser selon deux façons, l’une
sans l’aide d’une bibliothèque externe, l’autre à l’aide d’une bibliothèque JavaScript :
Box2D.
Box2D est un moteur physique open source développé par Erin Catto et mis à jour par une
large communauté
Ce moteur physique permet de se rapprocher d’une vrai simulation physique, en effet
celui-ci permet de définir des objets ayant des propriétés physiques avec des unités réelles
(mètres, kilogrammes, secondes) mais aussi comme de nombreux moteur physique, Box2D
est appelé pour effectuer une simulation sur un certain laps de temps en prenant compte
de la vitesse actuelle des objets, de leurs positions, des forces qu’ils subissent (contact,
gravité, friction, etc). Le programme principal peut alors se servir des coordonnées et
angles calculés pour afficher les objets à l'écran.
A la base écrit en C++, ce moteur physique a été traduit par la communauté en de
nombreux autres langages tels que Flash, Java, Flex et particulièrement en JavaScript sous
le nom de Box2DWeb.
De plus, on retrouve cette technologie dans le jeu Angry Birds qui lui aussi a été réalisé en
HTML5 à l’aide de Box2DWeb.
Projet n° 20 – 22/01/2013
Page 7
b. Réalisation d’une animation JavaScript à l’aide de Box2D
Voici notre application ‘Lunar Lander’ réalisé entièrement en JavaScript et HTML5 avec
l’aide de la bibliothèque JavaScript Box2DWeb :
http://users.polytech.unice.fr/~fauvelja/projet_si4/version1/
Animation ‘Lunar Lander’ en HTML5 et JavaScript à l’aide de la bibliothèque JavaScript Box2D
Comme on le remarque ici, Box2D permet donc de simuler un système de corps rigides sur
un plan.
Ce système est représenté par un monde qui sera défini avec une gravité, c'est ce monde
qui va gérer le fait d'ajouter les différents corps ainsi qu'à chaque étape de calculer les
nouvelles positions des objets, leur vitesse, les forces appliquées etc...
Physiquement, un corps rigide peut être simulé par un point (le centre de gravité) avec
une position, un angle, une vitesse et une rotation, c'est à ce corps que l'on pourra
appliquer des forces soit définies par nous-même soit internes telles que la gravité ou des
impulsions (contacts, …).
Chaque corps simulé peut avoir une forme, limité soit à un assemblage de cercles, de
polygones convexes (triangle, rectangle…) ou de formes définies par l'utilisateur. C'est à
ces formes que l'on donnera la densité, la friction et la restitution.
La forme d'un corps peut également servir à calculer la masse et le moment d'inertie du
corps rigide.
Des contraintes peuvent exister entre ces corps, pour représenter une liaison (un pivot, un
coulissement… éventuellement avec une résistance ou une force motrice) ou un contact
temporaire.
Projet n° 20 – 22/01/2013
Page 8
De plus, afin de calculer les contacts entre ces corps, Box2D fournit un détecteur de
collision. En cas de collision on peut alors ajouter des contacts entre les corps et aussi
préciser des frottements, une élasticité… voire tout autre code qui serait nécessaire.
Tout ceci est détaillé et expliqué avec du code JavaScript dans le tutoriel (Tutoriel
[Box2D].docx) que nous fournissons afin que n’importe quel étudiant ou professeur puisse
refaire une animation totalement en JavaScript et HTML5 à l’aide de cette bibliothèque.
De plus ; un espace de développement est fourni afin de pouvoir commencer à développer
avec les fichiers de base.
Projet n° 20 – 22/01/2013
Page 9
c. Réalisation d’une animation JavaScript sans bibliothèque
externe
Voici à présent une image de notre animation de « lunar lander » réalisé en HTML5 &
JavaScript avec l’aide de librairie externe. Vous pouvez retrouver cette animation à
l’adresse suivante : http://users.polytech.unice.fr/~fauvelja/projet_si4/version3/
Comme nous pouvons le voir sur l’image, nous avons essayé de refaire l’application
de « lunar lander ». Même si au niveau de graphisme notre application reste assez éloigné
elle s’en rapproche sur le point de vue de la physique. En effet nous avons appliqué une
accélération négative constante sur l’axe des x afin de représenter l’attraction lunaire sur
la fusée. Cette attraction lunaire ainsi que notre paramètre comme la poussée des réacteurs,
la masse du vaisseau ou son carburant on des ordres de grandeur réel.
De plus la gestion de la position, de la vitesse et l’accélération de du vaisseau sont
régit par une équation différentiel du second ordre permettant d’avoir une trajectoire se
rapprochant au plus de la réalité.
Nous avons rajouté des petite bande son afin d’avoir un jeu de simulation plus
attrayant. Nous avons donc un bruit de réacteur quand ces derniers sont en route ou encore
un bruit d’explosion quand l’alunissage s’est passé.
Nous avons dans la partie supérieure droite un certain nombre d’information
concernant le vaisseau tel que sa vitesse horizontal, son altitude ou la quantité de carburant
restant.
Projet n° 20 – 22/01/2013
Page 10
Nous avons aussi créés un certain nombre de triangle de façon aléatoire dans la partie
inférieure. Ils permettent de représenter un décor. Cependant la gestion des collisions entre
le vaisseau et ce décor n’est pas gérer car très complexe sans librairie externe.
Nous avons gérer les collisions entre notre navette et les bords de l’écran que ce soit
en haut ou sur les côtés afin qu’il ne puisse pas sortir du champ de vision. Le but du jeu est
donc de posé la fusée le plus doucement possible afin de ne pas endommager la navette et
son équipage. Deux facteurs entre en compte pour un alunissage correct. Le fait de touché
le sol et la vitesse d’atterrissage.
Projet n° 20 – 22/01/2013
Page 11
d. « Avec ou sans Box2D » une question de goût
Voici notre tableau de comparaison entre un développement avec et sans cet outil.
Il s’agit d’un tableau comparatif que nous avons mis au point en développant l’animation
et de nos ressentis par rapport à ces deux méthodes.
Avec Box2D
Création de forme géométrique
Sans Box2D
Précision de simulation
Gestion des collisions
Code final beaucoup plus léger
Gestion de la physique
Plus grande liberté de développement
Tableau comparatif entre un développement avec et sans la librairie Box2D.
Aux vues de ce tableau au peut clairement dire que les différences de
développement ne seront pas destiné aux mêmes utilisations. En effet en développant
avec l’aide de la librairie Box2D, l’animation sera plus facile à appréhender, la création
d’objet physique (tel que des carrés, triangle, cercle…) est déjà intégré. De plus, la
gestion des collisions entre les différent objets, ce qui n’est pas du tout quelque chose
dévident est aussi intégré. Enfin la gestion de la physique comme par exemple une
attraction terrestre est elle aussi facile à mettre en place.
En revanche, si vous souhaitez avoir une plus grande précision dans votre code final
et maitriser vraiment vous-même toutes les interactions que ce soit entre les objets ou
avec l’utilisateur, il est préférable de développer sans librairie externe. Sans librairie votre
code sera aussi plus léger car il y aura moins de méthode « superflus » et ainsi qu’une plus
grande précision des calculs.
Enfin, il est utile de préciser qu’un développement avec Box2D aura une meilleure
compatibilité sur les différents navigateurs étant donné qu’elle prend en charge par défaut
la gestion des différents navigateurs.
Projet n° 20 – 22/01/2013
Page 12
4. Organisation du travail
La première semaine de projet a été consacrée à l’étude du projet. Au cours de
cette semaine nous nous sommes familiarisés avec JavaScript et l’animation HTML5. Nous
nous sommes aussi introduits à Box2d. A la fin de cette semaine nous avons réalisé un
cahier des charges.
Pour la deuxième semaine nous somme séparé, Fréderic travaillant seul sur
l’animation avec Box2d et d’autre part Giacomo et Olivier travaillant sur l’animation sans
Box2d . Cette semaine a été interrompue par deux jours de simulation d’entreprise.
La troisième semaine a été consacrée à la finalisation des animations, ainsi que la
rédactions des tutoriel et du rapport, et nous a permis de nous préparer à la soutenance
finale.
Projet n° 20 – 22/01/2013
Page 13
5. Conclusion et retour sur expérience
A la fin de ce projet nous avons atteint les objectifs fixés. Nous sommes satisfait de
notre travail, notamment de nos tutoriels et de notre environnement de développement
qui nous pensons seront très utiles à des personnes désireuses de réaliser une animation
JavaScript.
Dans le cadre du cours « Commande par ordinateur » nous pensons que la solution la
plus intéressante est de réaliser l’animation sans Box2d, en effet la liberté et la
transparence de cette solution augmente sont intérêt pédagogique.
A la suite de ce projet nous maitrisons parfaitement JavaScript alors que nous n’avions
jamais travaillé avec ce langage auparavant. Et le travail en équipe qui implique la
répartition des tâches et la satisfaction de tous a été une expérience enrichissante.
Notre travail reste améliorable, et beaucoup de travail peut encore être réalisé. Nous
pensons notamment a l’apparence globale de l’application qui gagnerai a être amélioré
ainsi que des fonctionnalités de jeux qui rendraient le programme plus intéressant comme
le fait de pouvoir faire pivoter la navette ou la possibilité de zoomer.
Nous somme globalement satisfait de notre travail, de l’entente dans le groupe et du
sujet choisit.
Projet n° 20 – 22/01/2013
Page 14
Références
Phets de l'université de Boulders Colorado :
http://phet.colorado.edu/en/simulation/electric-hockey
Cours de commande par ordinateur :
http://cours.polytech.unice.fr/intcom
Tutoriel expliquant les bases de Box2D en JavaScript
http://aniruddhaloya.blogspot.fr/2012/11/box2d-javascript-part-2.html
Site officiel de Box2D
http://www.box2d.org/
Google code du projet Box2D Web
http://code.google.com/p/box2dweb/
Projet n° 20 – 22/01/2013
Page 15