M2202 - TP Séance 1
Durée : 2h00
Objectifs
- Utiliser la récursivité.
- Dessiner un cerisier en fleurs.
Au menu
- Consignes
- Principe du dessin récursif de l'arbre
- Amélioration du dessin de l'arbre
- Ajout des fleurs
L'objectif de ce TP est de dessiner un cerisier en fleurs
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.
question(); ?>Téléchargez le
fichier M2202-TP1.html qui contient
le code permettant de dessiner une maison, que nous avions
créé lors d'un TP précédent.
question(); ?>Compilez et exécutez ce code.
On retrouve dans ce code des fonctions déjà utilisées précédemment :
- nombreAleatoire qui prend deux
entiers comme paramètres d'entrée, et tire un entiers compris (au sens large)
entre ces deux entiers.
- dessineRectangle(g, abscisseCoin, ordonneeCoin, largeur, hauteur, couleur)
qui dessine dans un composant HTML dont l'identifiant est la chaîne de caractères g un rectangle vide dont le coin en haut à gauche a pour coordonnées (abscisseCoin,ordonneeCoin),
qui a pour largeur largeur et pour hauteur hauteur
et dont le code CSS de la couleur est couleur.
- dessineRectanglePlein(g, abscisseCoin, ordonneeCoin, largeur, hauteur, couleur),
qui dessine dans un composant HTML dont l'identifiant est la chaîne de caractères g un rectangle, dont le coin en haut à gauche a pour coordonnées (abscisseCoin,ordonneeCoin),
et qui a pour largeur largeur et pour hauteur hauteur
et dont le code CSS de la couleur de fond et de bordure est couleur.
- dessineLigne(g, abscisse1, ordonnee1, abscisse2, ordonnee2, couleur),
qui dessine dans un composant HTML dont l'identifiant est la chaîne de caractères g une ligne commençant au point de coordonnées
(abscisse1,ordonnee1), se terminant au point de coordonnées (abscisse2,ordonnee2)
et dont le code CSS de la couleur est couleur.
question(); ?>Créez une fonction dessineArbre qui prend en entrée un identifiant de composant HTML g,
deux entiers abscisseBas et ordonneeBas, un entier niveau,
et ne renvoie rien. Dans la suite de ce TP, nous allons remplir cette
fonction pour qu'elle dessine un arbre dans le composant HTML d'identifiant
g,
dont la base du tronc se situe au point de coordonnées
(
abscisseBas,
ordonneeBas), et dont le nombre de paliers (c'est-à-dire le nombre d'"étages" de branches successifs, sans compter le tronc)
est donné par l'entier
niveau.
question(); ?>Ajoutez une instruction à l'intérieur de la fonction dessineArbre
pour dessiner le tronc de l'arbre : une ligne verticale brune de 50 pixels
de hauteur (dessin 1 ci-dessous).
question(); ?>Appelez l'algorithme
dessineArbre pour que le tronc soit
effectivement ajouté au dessin. Réglez les coordonnées pour que le tronc soit
bien planté dans le gazon (la partie verte), comme dans le dessin 1
ci-dessous.
On passe maintenant au coeur de l'algorithme de dessin du haut de l'arbre
(la partie au-dessus du tronc), que l'on va gérer par un algorithme récursif.
Le principe est que pour construire le haut d'un
arbre de niveau
n, on va construire, en haut du point où
on vient d'arriver (le haut du tronc) deux branches, une vers la
gauche, une vers la droite, et en haut de chacune de ces branches
on va construire un arbre de niveau
n-1.
En suivant ce principe,
question(); ?>écrivez un algorithme récursif
dessineHautArbre, qui prend en entrée un identifiant de composant HTML g,
deux entiers abscisseBas et ordonneeBas, et un entier
n, et qui, en partant du point de coordonnées
(abscisseBas,ordonneeBas), dessine
deux branches :
- une vers la gauche (20 pixels vers la gauche, 50 pixels vers le haut)
- une vers la droite (20 pixels vers la droite, 50 pixels vers le haut)
puis, au-dessus de chaque branche, s'appelle lui-même pour dessiner
le haut d'un arbre de niveau
n-1.
Indication si vous bloquez : cette image
vous montre comment vous pouvez procéder en 4 étapes : la branche gauche en rose,
la branche droite en bleu clair, le haut d'arbre gauche en rouge, le haut d'arbre droit en bleu.
question(); ?>Appelez cet algorithme
dessineHautArbre dans l'algorithme dessineArbre
afin de dessiner un arbre de niveau 5 (dessin 2 ci-dessous).
La structure de l'arbre est trop régulière et les branches se touchent
et se recouvrent. Pour éviter cela,
question(); ?>au lieu de dessiner
des branches de hauteur 50, dessinez des branches de hauteur aléatoire
entre 10 et 50 (dessin 3 ci-dessous).
On va tenter d'améliorer le dessin de l'arbre pour le rendre plus
réaliste.
Afin de permettre de dessiner des branches d'épaisseur différente,
question(); ?>é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 de 1 pixel vers la droite.
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).
question(); ?>Utilisez 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.
On finira
au prochain TP les améliorations du dessin de l'arbre
(branches plus petites en haut, nombre de branches aléatoire
aux embranchements, etc.)...
On verra au prochain TP comment dessiner les fleurs en ajoutant
des petits ovales blancs et roses aux bons endroits.