Lisez attentivement cet énoncé de TP/TD en suivant les instructions. En cas d'interrogation, faites appel à moi, que ce soit pour en savoir plus sur un des points abordés pendant le TP, ou pour savoir comment effectuer une des tâches demandées (numérotées pour pouvoir y faire référence simplement).
Surtout ne restez pas bloqué(e) sur une des questions. Entre parenthèses, à côté des titres de sous-sections, est indiqué le temps que vous avez dû passer à effectuer les étapes précédentes.
Au cours de ce TP, nous allons créer un programme qui permet tout d'abord de dessiner
des flèches, puis de dessiner des histogrammes.
Le résultat à la fin de la question C2 devrait ressembler à ça :
Pensez à remplir ce questionnaire avant de quitter la salle à la fin du TP :
Nous allons commencer par créer une base pour ce programme de saisie de note.
Créez un dossier dédié à ce TP5 (de la même manière que vous en aviez créé un dédié au TP4).
En utilisant le TP2, créez une base de fichier M1202-TP5.html que vous compléterez lors de ce TP. Cette base doit contenir en particulier un algorithme fonctionPrincipale qui sera exécuté au moment du lancement de la page, et comme vous aurez besoin des algorithmes dessineLigne et dessineRectanglePlein, je vous conseille de garder au moins des lignes où ces algorithmes sont appelés.
Pour rappel :
Écrivez un algorithme dessinePetiteFlecheDroite qui prend en entrée l'identifiant du composant HTML dans lequel il va dessiner, l'abscisse et l'ordonnée du point de départ de la flèche et le code CSS de la couleur de la flèche, et qui dessine une flèche orientée vers la droite, de 20 pixels, de la couleur voulue et aux coordonnées choisies. La « tête » de la flèche sera constituée de deux petites lignes allant de 10 pixels vers la gauche et de 5 pixels vers le haut ou vers le bas.
Dans l'algorithme fonctionPrincipale, utilisez l'algorithme dessinePetiteFlecheDroite pour dessiner, à partir du point (50,50) une petite flèche verte de 20 pixels vers la droite.
On veut maintenant pouvoir dessiner une flèche de n'importe quelle longueur, et donc pouvoir passer la longueur de la flèche en entrée de l'algorithme de dessin de la flèche.
En copiant et en collant le code de l'algorithme dessinePetiteFlecheDroite, écrivez un algorithme dessineFlecheDroite qui prend les mêmes entrées que dessinePetiteFlecheDroite et une entrée supplémentaire longueur qui indique la longueur en pixels de la flèche, et qui dessine la flèche orientée vers la droite, avec les longueur, couleur, et coordonnées indiquées en entrée.
Dans l'algorithme fonctionPrincipale, utilisez l'algorithme dessineFlecheDroite pour dessiner, à partir du point (70,70) une flèche bleue de 50 pixels vers la droite et à partir du point (70,80), une flèche bleu foncé de 30 pixels vers la droite.
En copiant et en collant le code de l'algorithme dessineFlecheDroite, écrivez un algorithme dessineFleche qui prend les mêmes entrées que dessineFlecheDroite et une entrée supplémentaire sens qui indique le sens de la flèche (gauche, haut, droite, bas), et qui dessine la flèche orientée dans le sens voulu, avec les longueur, couleur, et coordonnées indiquées en entrée.
Dans l'algorithme fonctionPrincipale, utilisez l'algorithme dessineFleche pour dessiner, à partir du point (100,100) une flèche rouge de 40 pixels vers la gauche et une flèche rouge de 40 pixels vers le bas.
On veut maintenant pouvoir dessiner des histogrammes représentant les valeurs fournies dans un tableau.
Écrivez un algorithme dessineHistogramme100 qui prend en entrée l'identifiant du composant HTML dans lequel il va dessiner, l'abscisse et l'ordonnée du point d'intersection des axes de l'histogramme le code CSS de la couleur des barres de l'histogramme, ainsi qu'un tableau de nombres et qui dessine un histogramme de 100 pixels de haut, avec des barres de 10 pixels de large de la couleur choisie, aux coordonnées choisies. Les axes seront représentés par deux flèches grises, l'une vers le haut de 112 pixels, l'une vers la droite d'une longueur en pixels égale à 12 + 10 fois le nombre de cases du tableau (pour que la tête de la flèche apparaisse bien à droite des barres de l'histogramme).
Testez l'algorithme dessineHistogramme100 sur le tableau [37.6,23.2,16.9,19.8,13.5,9.2] qui représente le nombre de milliers d'entrées hebdomadaires du film Parasite à sa sortie en France, pendant 6 semaines, en dessinant un histogramme avec des barres de couleur rose pâle.
Écrivez un algorithme dessineHistogramme qui prend en entrée, en plus des entrées de dessineHistogramme100, la largeur et la hauteur de l'histogramme voulu, et qui adapte le dessin de l'histogramme pour qu'il corresponde aux valeurs en entrée.
