M2202 - TP Séance 2

Durée : 2h00




Objectifs




Au menu

  1. Consignes
  2. Amélioration du dessin de l'arbre
  3. Ajout des fleurs




A. Consignes (5 min) 0%

Lisez attentivement cet énoncé de TP 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.




B. Amélioration du dessin de l'arbre (70 min) 4%

On continue le TP1 dont l'objectif est de dessiner un cerisier en fleurs. Voici le corrigé de la précédente séance, jusqu'à la question B6. B1téléchargez-le et testez-le pour voir si tout fonctionne, ou gardez votre fichier si vous aviez atteint la fin de la question.

Si vous appelez la fonction dessineHautArbre dans la fonction fonctionPrincipale et pas dans la fonction dessineArbre, modifiez votre code afin que la fonction dessineHautArbre soit appelée dans la fonction dessineArbre. Ceci permettra de ne régler que les variables d'entrée de la fonction dessineArbre pour déplacer l'arbre, ou changer son niveau : il n'y aura pas besoin de modifier aussi les variables d'entrée de dessineHautArbre.

Afin de permettre de dessiner des branches d'épaisseur différente, B2écrivez une fonction dessineBranche qui prend les mêmes entrées que dessineLigne, avec une entrée supplémentaire : un entier epaisseur. Elle dessine alors pas seulement une ligne, mais epaisseur lignes décalées chacune de 1 pixel vers la droite par rapport à la précédente. Pour cela, vous pouvez utiliser soit une boucle qui répétera le dessin de chaque ligne constituant la branche, soit une fonction récursive qui dessinera une branche d'épaisseur epaisseur en dessinant d'abord une ligne, puis une branche d'épaisseur epaisseur-1.

Utilisez cette fonction dessineBranche, avec une épaisseur égale au niveau de l'arbre, afin de dessiner le tronc de l'arbre (dessin 4 ci-dessous).

B3Utilisez la fonction dessineBranche à l'intérieur de l'algorithme dessineHautArbre pour que l'épaisseur varie en fonction du niveau (dessin 5 ci-dessous) : à chaque fois que le niveau baisse de 1, l'épaisseur aussi.

Images de l'arbre en construction B5Modifiez la fonction dessineHautArbre pour changer le nombre de branches à chaque embranchement : il doit être tiré aléatoirement entre 1 et niveau+1, afin que l'arbre soit de plus en plus touffu vers le bas.


C. Ajout des fleurs (45 min) 62%

C1Ajoutez une fonction dessineFleur, qui prend en entrée l'identifiant g d'un composant HTML et les coordonnées du centre de la fleur, et qui dessine un disque blanc de 3 pixels de diamètre contenant un disque rose de 2 pixels de diamètre à ces coordonnées.

En appelant la fonction dessineFleur depuis dessineHautArbre, C2ajoutez une fleur en haut de chaque branche dessinée.

En appelant plusieurs fois la fonction dessineArbre, C3dessinez plusieurs arbres à l'écran. Attention à l'ordre de dessin en fonction de la position dans l'écran (arrière plan / premier plan).

Arbres en fleur