Sommaire
Introduction
Couleurs
Fonctions de base
Point courant, lignes et textes
Formes géométriques
   Rectangle
   Cercle et ellipse
   Arc
   Polygone
Images
Interactivité
   Clavier et souris
   Attendre un évènement

I) Introduction
Quand on voit des « vieux » films, on ne voit que des ordinateurs fonctionnant en ligne de commande : l'informaticien entre une phrase sur un écran tout noir, et l'ordinateur répond par une autre phrase. Maintenant, nous disposons d'outils graphiques qui rendent l'utilisation des ordinateurs beaucoup plus pratique ! Mais comment les utiliser en Caml ?
D'abord, notez que contrairement à tout ce que nous avons pu voir auparavant, alors que nous n'avons fait que des calculs, nous allons maintenant utiliser des fonctions qui demanderont des ressources plus « complexes » à l'ordinateur en exploitant par exemple sa carte graphique. Nous allons en quelque sorte sortir du cocon Caml. Pour ces raisons, le comportement des fonctions que je vais décrire peut fortement varier entre les ordinateurs, selon leur configuration matérielle et le système d'exploitation utilisé. Il se peut même que certaines fonctions ne marchent pas du tout sur votre ordinateur (par exemple, je n'ai jamais réussi à modifier la police d'écriture sous Windows).
La première étape est d'ouvrir le module graphique : #load "graphics.cma";; et en option open Graphics;; (voir les modules pour plus de précisions). Ensuite, vous devez ouvrir une fenêtre graphique, c'est-à-dire la fenêtre dans laquelle l'ordinateur pourra dessiner vos lignes et vos textes. Pour cela, tapez Graphics.open_graph " lxh";; où l et h sont la largeur et la hauteur en pixels de la fenêtre (vous pouvez ne pas préciser ces nombres, en tapant Graphics.open_graph "";;). Vous pouvez ensuite donner un nom à cette fenêtre (le nom qui s'affichera dans la barre des tâches de Windows et je ne sais où pour les autres systèmes) : Graphics.set_window_title "Ciel ! Mon mari !";;.

II) Couleurs
Lorsque vous ouvrez la fenêtre graphique, la couleur par défaut de ce que vous allez dessiner est le noir (enfin ça dépend de votre ordinateur mais je prends peu de risques en pariant que ce sera bien le noir). Vous pouvez utiliser toute autre couleur de votre choix. Pour cela, avant de dessiner, tapez Graphics.set_color c;; où c est la couleur désirée. Comment coder une couleur ?
Vous pouvez utiliser une couleur prédéfinie : Graphics.black, Graphics.white, Graphics.red, Graphics.green, Graphics.blue, Graphics.yellow, Graphics.cyan et Graphics.magenta.
Deuxième méthode : chaque couleur est représentée par un entier composé au plus de 9 chiffres. Pour obtenir cet entier si vous voulez coder une couleur, vous devez connaître le niveau de rouge, de vert et de bleu de cette couleur (pour obtenir ces niveaux, vous pouvez utiliser n'importe quel logiciel de dessin même basique comme ceux qui sont souvent fournis avec les systèmes d'exploitation - vous noterez mes efforts pour ne pas citer de marque !). Utilisez ensuite la fonction Graphics.rgb : tapez Graphics.rgb r g b;; où r, g et b sont les niveaux de rouge, vert et bleu. Vous obtiendrez le code de la couleur correspondante.
Exemple : je veux dessiner un rectangle rouge puis un rectangle gris (voir plus bas pour les explications sur la fonction Graphics.draw_rect). On commence par définir le gris (clair). Un logiciel de dessin que je ne citerai toujours pas m'indique que le gris a un niveau de 191 (maximum : 255) pour le rouge, le vert et le bleu. Je tape donc let gris = Graphics.rgb 191 191 191;; Puis je dessine mes deux cadres :
Graphics.set_color Graphics.red;
Graphics.draw_rect 10 10 20 20;
Graphics.set_color gris;
Graphics.draw_rect 50 10 20 20;;

III) Fonctions de base
Lorsque vous désirez effacer le contenu de l'écran, utilisez Graphics.clear_graph();; Cela a pour effet de rétablir sur toute la fenêtre graphique la couleur du fond, généralement le blanc.
Pour obtenir la taille de la fenêtre, vous pouvez utiliser Graphics.size_x();; (donne la largeur en pixels) et Graphics.size_y();; (donne la hauteur en pixels).
Pour redimensionner la fenêtre : Graphics.resize_window l h;; où l et h sont la nouvelle largeur et la nouvelle hauteur en pixels.
Pour fermer la fenêtre graphique : Graphics.close_graph();;

IV) Point courant, lignes et texte
Le dessin en Caml utilise un point courant. Pour obtenir la position du point courant, on utilise Graphics.current_point();;. Le couple d'entiers obtenu donne dans l'ordre l'abscisse et l'ordonnée. Pour les coordonnées, l'origine est placée en bas à gauche de la fenêtre et l'unité est bien sûr le pixel. Il existe trois manières de déplacer le point courant :
   - Si vous tapez Graphics.moveto a b;; le point se déplace en position (a,b) sans rien dessiner.
   - Si vous tapez Graphics.plot a b;; le point se déplace en (a,b) et il y dessine un point de la couleur actuellement sélectionnée (c'est-à-dire la dernière couleur avec laquelle vous avez utilisé Graphics.set_color, par défaut le noir)
   - Si vous tapez Graphics.lineto a b;; le point se déplace en (a,b) et trace une ligne de son ancienne position vers la nouvelle, de la couleur actuelle.
Vous pouvez aussi demander la couleur du point (a,b) avec Graphics.point_color a b;;
Pour dessiner un texte, utiliser la fonction Graphics.draw_string. Le texte est dessiné en partant du point courant, dans la couleur actuelle.
Avec Graphics.set_line_width, vous pouvez modifier la largeur des points et lignes.
Pour le format du texte, vous pouvez modifier la police des caractères affichés (avec Graphics.set_font "police";;) et la taille (avec Graphics.set_text_size taille;;).
La fonction Graphics.text_size appliquée à une chaîne de caractères rend la largeur et la hauteur du texte s'il était affiché avec la police et la taille actuelles (mais n'affiche rien !). Une erreur courante avec cette fonction est de l'utiliser sans avoir ouvert la fenêtre graphique (Graphics.open_graph). Pour une raison que je ne connais pas, la fonction text_size nécessite que la fenêtre soit ouverte, même si elle n'y fait rien...

V) Formes géométriques
1) Rectangle
Pour colorier un rectangle, utilisez Graphics.fill_rect a b x y;; Cela colore un rectangle dont le coin bas gauche est en (a,b), la largeur valant x et la hauteur y. Pour tracer juste le contour d'un rectangle, utilisez Graphics.draw_rect avec les mêmes arguments.

2) Cercle et ellipse
L'appel Graphics.draw_circle a b r;; dessine le contour d'un cercle dont le centre est (a,b) et de rayon r. Pour dessiner un cercle colorié (un disque, quoi), utilisez Graphics.fill_circle avec les mêmes arguments.
Graphics.draw_ellipse x y rx ry;; dessine le contour d'une ellipse dont le centre est (x,y), le rayon horizontal est rx et le rayon vertical ry. Vous pouvez pour colorier l'ellipse utiliser Graphics.fill_ellipse.

3) Arc
La syntaxe Graphics.draw_arc x y rx ry a b;; permet de dessiner un arc d'ellipse dont les caractéristiques sont :
   centre de l'arc : (x,y)
   rayon horizontal : rx
   rayon vertical : ry
   l'arc est dessiné de l'angle a à l'angle b (en degrés)
De même, vous avez Graphics.fill_arc.

4) Polygone
Vous pouvez dessiner le contour d'un polygone en utilisant Graphics.draw_poly t où t est un tableau de couples d'entiers ((int * int) array) représentant les coordonnées des sommets du polygone. Dans le même genre, Graphics.draw_poly_line trace une ligne polygonale (non nécessairement fermée) dont vous avez donné les sommets dans un tableau.
Vous pouvez colorier un polygone avec la fonction Graphics.fill_poly et les mêmes arguments.

VI) Images
Pour recopier plusieurs fois un même motif, vous pouvez en faire une image que vous pourrez alors réutiliser. Pour définir une image, utiliser Graphics.get_image a b x y;;. Cela permet de définir comme image l'ensemble de ce qui est contenu dans le cadre dont l'angle bas gauche est (a,b), de largeur x et de hauteur y. A partir d'une image, vous pouvez utiliser Graphics.dump_image. Cela permet de transformer l'image en un tableau de tableaux de couleurs (une matrice de couleurs) : il indique la couleur de chaque pixel de l'image. Inversement, Graphics.make_image crée une image à partir d'une matrice de couleurs.
Pour redessiner une image en plaçant son angle bas gauche sur le pixel (a,b), utilisez Graphics.draw_image image a b;;

VII) Interactivité
1) Clavier et souris
Graphics.read_key();; permet d'attendre que l'utilisateur appuie sur une touche du clavier pour continuer l'exécution du programme. De plus, la fonction rend le nom de la touche pressée.
Graphics.key_pressed();; rend un booléen indiquant si une touche est actuellement pressée.
Graphics.button_down();; rend un booléen indiquant si le bouton (gauche) de la souris est pressé.
Graphics.mouse_pos();; rend la position du curseur de la souris.

2) Attendre un évènement
Il existe quatre types d'évènements, et ils définissent un type spécial de Caml (type event) :
   - Graphics.Button_down : un bouton de la souris est pressé
   - Graphics.Button_up : un bouton de la souris est relâché
   - Graphics.Key_pressed : une touche du clavier est pressée
   - Graphics.Mouse_motion : la souris est déplacée
Vous pouvez demander à Caml d'attendre qu'une liste d'évènements se produise en utilisant Graphics.wait_next_event suivi d'une liste d'évènements. L'exécution du programme est suspendue jusqu'à ce qu'un des évènements de la liste se produise. Caml rend ensuite une liste d'informations : les coordonnées de la souris, deux booléens indiquant si un bouton de la souris a été pressé et si une touche du clavier a été pressée, si c'est le cas la touche est indiquée.
Exemple : je fais une fonction qui attend que l'utilisateur clique quelque part et rend l'abscisse et l'ordonnée du point où il a cliqué sous forme d'un couple (très utile si vous voulez faire une interface graphique - il vous faudra ensuite faire la fonction qui indique en fonction de ces coordonnées sur quel dessin l'utilisateur a cliqué) :
open Graphics;;
let clic() =
let attend = wait_next_event [Button_down] in
let abscisse = attend.mouse_x and ordonnee = attend.mouse_y in
abscisse,ordonnee;;

> Haut de la page