Objectifs:

• Canvas HTML5
• Les fonctions du contexte graphique
• La création d'objets graphiques et affichage dans le contexte graphique
• Gestion simple d'évènements et écriture de callbacks

Questions

1. Si vous n'avez jamais utilisé le canvas, vous devez commencer par un tutorial de base comme celui-ci par exemple: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
2. Contexte graphique, affichage d'objets et paramétrage des attibuts graphiques de base: en utilisant un canvas, créer et afficher cette scène. NB: vous pouvez remplacer l'image par l'image de votre choix.
3. Pour faire la question suivante vous avez peut-être besoin de regarder cette note technique qui donne un exemple de traceur (programme qui affiche une fonction mathématique) en utilisant le canvas HTML.
4. Créer un document HTML avec deux zones:
   • une zone de saisie/modification de la définition d'une fonction dont on veut tracer la courbe.
   • une zone de dessin pour mettre le canvas dans lequel est dessiné la courbe correspondant à la fonction saisie.
   Il s'agit pour cette question et les suivantes de faire une version très simplifiée de ce traceur.
5. Créer une fonction qui affiche la courbe correspondant à cos(x) ou x^2 selon le paramètre
6. Transformez la fonction écrite en 5. en une callback qui sera appelée si cos(x) ou x^2 est saisi dans la boite de saisie de texte suivi par 'enter'. Vous trouverez quelques exemples simples de callbacks ici.
7. Tracer davantage de fonctions:
   Il s'agit d'ajouter des composants comme dans cet exemple pour permettre de saisir et d'afficher plus de fonction.
   • Mettre à côté de la boite de saisie de texte un bouton 'autre fonction'.
   • Ecrire une callback qui ajoute une nouvelle boite de saisie pour saisir une autre fonction. Cette nouvelle boite de saisie doit avoir le même comportement que la précédente: la saisie de cos(x) ou de x^2 suivi d'enter a pour effet de dessiner la courbe correspondante dans le canvas.
8. Colorisation des fonctions:
   • Créer une petite palette de couleurs de votre choix. Vous pouvez utiliser un outils tel que Kuler pour obtenir une palettes de couleurs assorties selon des règles diverses.
   • Ecrire le code javascript utile pour qu'à chaque nouvelle création de courbe, la couleur de la nouvelle courbe soit différente et assortie aux précédentes.