TD : Affichage graphique

Option Informatique
TD - Affichage Graphique
Lundi 14 Octobre
TD : Affichage graphique
A rendre par email au plus tard le samedi 2 novembre
1) Le module Graphics
OCaml fonctionne avec un système de modules : lorsque vous travaillez sur un domaine précis, vous
pouvez charger le « module » correspondant, c’est-à-dire un certain nombre de fonctions associées
à ce domaine.
Ces fonctions ne sont pas disponibles par défaut (pour éviter de surcharger inutilement la mémoire).
C’est à vous d’indiquer quelles sont les modules que vous souhaitez utiliser.
Pour obtenir un affichage graphique, on utilise le module Graphics. Pour charger ce module,
utilisez l’instruction #load "graphics.cma";; (n’oubliez pas le symbole dièse au début).
Question 1. Exécutez cette instruction et vérifiez qu’il n’y a pas d’erreur.
2) La fenêtre graphique
i)
Ouverture
Pour ouvrir la fenêtre graphique, on utilise l’instruction Graphics.open_graph "";;
Question 2. Ouvrez une fenêtre graphique.
ii) Repère et dimensions
La fenêtre graphique est un espace en deux dimensions sur lequel deux axes sont définis :

L’axe x est l’axe horizontal, orienté de gauche à droite

L’axe y est l’axe vertical, orienté de bas en haut
L’origine du repère, c’est-à-dire le point de coordonnées (0,0), est donc le point situé en bas à
gauche de la fenêtre.
1
Option Informatique
TD - Affichage Graphique
Lundi 14 Octobre
Il est possible de récupérer les dimensions actuelles de la fenêtre graphique grâce aux fonctions
Graphics.size_x et Graphics.size_y, qui sont toutes deux de types unit -> int.
Question 3. Modifiez les dimensions de votre fenêtre graphique et observez les conséquences sur
les résultats renvoyés par les fonctions susmentionnées.
iii) Fermeture
Pour fermer la fenêtre graphique, on utilise la commande Graphics.close_graph () ;;
3) Des points et des traits
i)
Le point courant
Une idée importante dans l’affichage graphique en OCaml est la notion de point courant : à partir
du moment où l’on ouvre une fenêtre graphique, Caml stocke en permanence les coordonnées
d’un « point courant », qui est en quelque sorte la « position du stylo dans la fenêtre ».
On peut à tout moment obtenir les coordonnées de ce point courant en utilisant la fonction
Graphics.current_point (de type unit -> int * int)
Il existe également deux fonctions Graphics.moveto et Graphics.rmoveto (de type int > int -> int) qui permettent de déplacer ce point courant.
Question 4. En utilisant les trois fonctions évoquées ci-dessus, expliquez la différence entre les
fonctions Graphics.moveto et Graphics.rmoveto
ii) Tracer des traits
Comme vous avez pu le remarquer à la question précédente, par défaut, « le stylo est levé » : ce
n’est pas parce qu’on déplace le point courant qu’un trait apparait sur la fenêtre graphique.
Pour tracer un trait, on dispose des fonctions Graphics.lineto et Graphics.rlineto (de
type int -> int -> unit).
Question 5. Quelle est la différence entre Graphics.lineto et Graphics.rlineto ?
Question 6. Où se situe le point courant lorsqu’on a tracé un trait ?
iii) Nettoyer la fenêtre graphique
Pour nettoyer la fenêtre graphique, utilisez l’instruction Graphics.clear_graph () ;;
Attention, cela aura pour effet d’effacer tout le contenu de la fenêtre graphique : il n’existe pas de
méthode de base pour n’effacer qu’une partie de cette fenêtre.
Question 7. Tracez un carré dans la fenêtre graphique (après l’avoir nettoyée si besoin est).
Question 8. Tracez un triangle dans la fenêtre à l’intérieur de ce carré.
2
Option Informatique
TD - Affichage Graphique
Lundi 14 Octobre
4) Un peu de couleur
Le « stylo » de la fenêtre graphique est en fait multicolore : il suffit de spécifier avec quelle couleur
on veut écrire. On utilise pour cela la fonction Graphics.set_color, de type color -> unit.
Ce type color est un type propre au module Graphics. Pour obtenir une telle « couleur », le
plus simple est d’utiliser l’une des couleurs prédéfinies (Graphics.black, Graphics.blue,
Graphics.red, etc.)
Question 9. Tracez une ligne rouge qui coupe en deux la fenêtre graphique dans le sens de la
hauteur, et une ligne bleue qui coupe en deux cette fenêtre dans le sens de la largeur.
Il est également possible de créer une couleur en utilisant la fonction Graphics.rgb (de type int
-> int -> int -> color)
Question 10. Créez différentes couleurs avec la fonction Graphics.rgb en prenant pour
arguments des entiers compris entre 0 et 255, et déduisez-en le sens de ces différents arguments.
5) Dessins et formes
Le module Graphics met également à votre disposition un certain nombre de fonctions plus
avancées qui vous permettront de dessiner rapidement des formes simples.
Pour commencer :

l’instruction draw_rect x0 y0 l_rect h_rect trace un rectangle de largeur l_rect,
de hauteur h_rect, et dont le coin inférieur gauche a pour coordonnées (x0,y0).

l’instruction draw_circle x0 y0 r trace un cercle de rayon r centré sur le point de
coordonnées (x0,y0).
l_rect
r
h_rect
(x0,y0)
(x0,y0)
Remarque : Ces fonctions ne tiennent pas comptent du point courant.
Question 11. Utilisez ces fonctions pour tracer le dessin suivant :
3
Option Informatique
TD - Affichage Graphique
Lundi 14 Octobre
S’il souhaite obtenir des formes remplies et non simplement des contours, on utilisera plutôt les
fonctions Graphics.fill_rect (avec les mêmes arguments que Graphics.draw_rect) et
Graphics.fill_circle (avec les mêmes arguments que Graphics.draw_circle).
Remarque : Toutes ces fonctions utiliseront la couleur définie par Graphics.set_color
Question 12. Utilisez les fonctions vues jusque-là pour tracer les éléments ci-dessous :
Question 13. Créer une fonction tracer_grille de type int -> int -> int telle que
tracer_grille largeur hauteur taille_case trace dans la fenêtre graphique une
grille de largeur cases de large et hauteur cases de haut, chaque case étant un carré de côté
taille_case.
Astuce : Une grille peut être décomposée en un certain nombre de traits.
Question 14 . Créer une fonction tracer_grille_optimisee de type int -> int telle
que tracer_grille_optimisee largeur hauteur trace dans la fenêtre graphique une
grille de largeur cases de large et de hauteur cases de haut, en calculant automatiquement la
taille des cases pour occuper un maximum d’espace.
Question 15. Utilisez les notions vues dans ce TD pour créer une fonction d’affichage graphique dans
le projet MasterMind.
4