Project:Omega.org

Par Michael J. Norton le 16/12/2003

Traduit par Olivier, le 18/08/2004

Note de l’éditeur : Si l’un de vos enfants s’intéresse à la programmation, il serait bon de prendre un peu de temps pendant les vacances pour lui apprendre quelques concepts. Michael Norton a écrit ce tutoriel pour son fils qui est au collège, et le propose aux lecteurs de Mac DevCenter et leurs enfants. En quelques leçons votre enfant peut développer un programme de dessin amusant… et je suis sûr que ce n’est que le début.

Bienvenue aux futurs développeurs de jeux. Mon fils Matt, qui est au collège, m’a demandé un soir de lui apprendre comment programmer des jeux vidéo. J’étais très excité de m’atteler à la tâche, mais en même temps je réalisai que je devais mettre mes connaissances au niveau d’un collégien. Après plusieurs mois de réflexion et des tas de documents Word mis à la poubelle, je suis parvenu à quelques explications simples. Les voici.

Comprendre le graphisme sur ordinateur nécessite des années d’études de mathématiques. Cela signifie-t-il qu’il vous est impossible d’appréhender les concepts du graphisme ? Je pense que la réponse est non. Nous devrons cependant évoquer des principes mathématiques simples qui seront utiles pour notre apprentissage. Mais juste ce qu’il faut pour faire notre boulot.

Des Outils pour le Premier Jour de Classe

Mon premier choix pour l’apprentissage de la programmation graphique était Real Basic. Cependant, son prix dépassait l’argent de poche de Matt ainsi que mon budget annuel pour mon déjeuner. Donc, même un jeûne d’un mois ne lui permettrait pas d’obtenir un environnement de développement. J’ai donc décidé de me rabattre sur le bon vieux (et GRATUIT) interpréteur Tcl. Tcl est disponible pour tout système d’exploitation. Vous ou vos parents pouvez le télécharger depuis le site d’Apple. Si vous utilisez une plateforme Intel ou autre, vous pouvez le télécharger sur http://www.tcl.tk/

Les discussions sur les éléments de graphisme sont découpés en plusieurs modules. Les leçons incluent une discussion d’introduction, une figure montrant le programme en cours d’exécution et une section de fin intitulée : Le Script. Cette portion de la leçon est la plus intéressante si vous avez un Shell Tcl Wish ouvert. Copiez/Collez les scripts dans la console. Vous devriez bien comprendre chaque script avant de passer au suivant. Ceci pourrait prendre quelques nuits. Alors commençons.

Leçon 1 : Les Coordonnées Graphiques

Comme je vais faire de mon mieux pour éviter les maths peu lisibles nous devons nous mettre d’accord sur une base. Tout le monde a joué à Tic-Tac-Toe, n’est-ce-pas ? C’est le jeu où vous utilisez les X et votre adversaire les O. Le but est d’aligner vos X de façon verticale, horizontale ou diagonale (cf Figure 1).

Qu’est-ce-que le Tic-Tac-Toe a à voir avec le graphisme par ordinateur ? Je suis content que vous ayez posé la question. Le Tic-Tac-Toe se joue sur une simple grille. Les graphiques sur ordinateur sont dessinés sur des grilles similaires.

Le Tic-Tac-Toe se joue sur une grille de 3 cases de large et 3 cases de haut. Si nous devions exprimer le Tic-Tac-Toe en terme informatique, nous dirions que la grille de Tic-Tac-Toe a une largeur de 3 et une hauteur de 3. Le nombre de cases se calcule par une simple multiplication. La multiplication de 3 x 3 nous donne 9. Cette valeur a une signification spéciale en graphisme. Elle s’appelle la résolution. La résolution de notre grille est 3 x 3. En terme informatique, vous diriez que la résolution est de 3 par 3 au lieu de 3 fois 3.

Avançons un peu plus et imaginons que nous voulions apprendre à l’ordinateur comment jouer à Tic-Tac-Toe. L’ordinateur ne peut pas voir la grille et dessiner un O comme nous. Nous devons représenter la grille en des termes que l’ordinateur puisse comprendre. Un ordinateur ne comprend que les nombres. Pour les débutants, vous rappelez-vous de la ligne de nombre ? En voici une version un peu modifiée (cf Figure 2).

Avec les 3 blocs du haut de la grille du Tic-Tac-Toe, j’ai créé une ligne de nombres. Le plus petit nombre est sur la gauche et les nombres croissent en allant vers la droite. Les valeurs dans les blocs sont appelées des coordonnées. Pour se déplacer de gauche à droite, utilisez les coordonnées de 0, 1, et 2. Comme nous utilisons ces coordonnées pour le déplacement de gauche à droite, nous appelons ces coordonnées x, qui a une signification spéciale pour l’ordinateur. Les coordonnées indiquent à l’ordinateur comment se déplacer sur l’écran. C’est suffisant pour l’ordinateur si la grille du Tic-Tac-Toe n’a que 3 blocs.

Tic-Tac-Toe a une grille de 3 x 3 (qui se dit, 3 par 3), donc nous devons également indiquer à l’ordinateur comment se déplacer de haut en bas. La Figure 3 montre comment cela est fait.

Nous prenons la colonne de blocs de gauche et créons une grille comme montré ci-dessus. Le bloc en haut à gauche est le premier bloc avec une valeur à 0. En se déplaçant vers les blocs du bas, les nombres augmentent. En nous déplaçant de haut en bas sur cette grille, nous utilisons les coordonnées y. Dans notre cas, la grille ne fait que 3 blocs de hauteur, où la coordonnée y de 0 est en haut, et la coodonnée y de 2 est tout en bas de la grille.

Ce système de coordonnées x-y (prononcez xy) nous permet de créer une carte de la grille du Tic-Tac-Toe et nous pouvons donc créer une carte à usage de l’ordinateur. La carte est montrée en Figure 4.

Maintenant, indiquons à l’ordinateur comment utiliser la grille du Tic-Tac-Toe. Le bloc en haut à gauche a une coordonnée x de 0 (rouge) et une coordonnée y de 0 (bleu). C’est un bloc spécial parce que nous commencerons toujours nos déplacement sur la grille depuis ce bloc. Ce bloc est appelé l’origine. La zone d’affichage d’un ordinateur a aussi une origine située dans son coin en haut à gauche.

Nous expliquons le jeu de Tic-Tac-Toe en termes compréhensibles par l’ordinateur. Vous êtes le jour numéro un et vous voulez placer votre X au centre de la grille. Pour ce faire, vous devez parler à l’ordinateur dans son langage. Indiquez à l’ordinateur de se déplacer d’un pas à gauche depuis son bloc d’origine. La valeur de notre coordonnée x est à 1. Placez un doigt de votre main droite sur le nombre 1 rouge en haut de la grille. C’est votre coordonnée x. Placez un doigt de votre main gauche sur le nombre 1 bleu sur la gauche de la grille. C’est votre coordonnée y. Maintenant amenez vos deux doigts au centre de la grille. Il y a un 1 rouge pour la coordonnée de x et un 1 bleu pour la coordonnée y dans le bloc.

L’ordinateur se dit “Ah ! Vous voulez dessiner un X aux coordonnées x=1, y=1. Je vais dessiner un X pour vous.”

Maintenant, c’est le tour de l’ordinateur et il place un O dans le coin en haut à droite de la grille. Savez-vous quelles coordonnées l’ordinateur a utilisé ? Placez un doigt de votre main droite sur le 2 rouge en haut de la grille. Maintenant, placez un doigt de votre main gauche sur le 0 bleu sur le côté gauche de la grille. Amenez votre doigt gauche sur le bloc en haut à droite. L’ordinateur place un O à la position x=2, y=0 comme montré sur la Figure 5.

Leçon 2 : Parler le Langage de l’Ordinateur

J’ai déjà mentionné que la seule chose que puisse comprendre l’ordinateur, ce sont les nombres. Avez-vous déjà rencontré une personne d’un autre pays qui parle une langue différente ? Si cette personne ne parle pas français, vous avez besoin d’un interprète. Un interprète est une personne qui parle français et une ou plusieurs autres langues. Vous parlez à la personne qui ne comprend pas le français et l’interprète traduit ce que vous dites dans la langue natale de la personne.

Un ordinateur a différents interprètes pour différent langages informatique. Nous utilisons un langage de script appelé Tcl (prononcer tickle). C’est un acronyme pour Tool Command Language. Tcl est un langage qui a des règles pour parler à l’ordinateur. Wish Shell est une application disponible sur différentes plateformes telles que Microsoft Windows et Unix. Si vous utilisez le module Tcl pour Mac OS X, l’application Wish Shell se trouve dans le dossier Applications->Utilities (Utilitaires). Naviguez vers l’application comme montré en Figure 6. Activez l’interpréteur en double-cliquant sur l’application Wish Shell.

Voyons rapidement l’interpréteur et son utilisation. Après avoir démarré l’application, vous verrez deux fenêtres. Une est une fenêtre graphique, avec le nom Wish Shell sur la barre de titre et l’autre est la fenêtre de l’interprèteur. Celle-ci a comme nom Console sur sa barre de titre.

La fenêtre de console est là où nous allons accéder à l’interpréteur Tcl. La fenêtre de console affiche un caractère %. On l’appelle l’invite de la ligne de commande ou prompt. Voyons commment faire afficher “hello” à l’ordinateur. Tapez la ligne qui suit sur l’invite de la console. Rappelez-vous qu’il existe certaines règles. Tapez le mot “puts” puis un espace et enfin entre double quote, “hello!”.

puts "hello!"

La Figure 8 montre ce que votre console devrait afficher si la commande a été tapée correctement.

Le script :

puts "hello!"

Nous avons indiqué à l’ordinateur de “mettre” le message ‘hello!’ sur sa console avec la commande Tcl, puts. Le message à afficher est entouré par des doubles quotes. Quand l’ordinateur affiche votre message, vous remarquez que les quotes ont disparu.

Vous venez d’exécuter une simple commande avec l’interpréteur Tcl. Félicitations !

Maintenant que se passe-t-il si vous tapez une commande invalide ? Vous voulez voir l’ordinateur se fâcher contre vous ? La Figure 9 montre ce qui se passe si vous ne tapez pas d’espace dans la commande. Les espaces sont importants en Tcl pour que l’ordinateur comprenne ce qu’est la commande et ce qu’est la donnée passée à la commande, appelée un argument. Répétez après moi, “L’espace sépare la commande de ses arguments”.

Le script :

puts"hello"

Quand l’ordinateur ne comprend pas ce que vous avez tapé dans la console de l’interpréteur, il affiche un message d’erreur. Ce message est utile pour vous indiquer, vous le programmeur, que vous avez offensé l’ordinateur. Mais ne vous inquiétez pas, la plupart des ordinateurs s’en remettent vite.

Leçon 3 : Bases de Tcl

Voyons un peu quelques concepts de base du langage Tcl. Supposons que nous voulions demander à l’ordinateur de se rappeler un nombre magique pour nous. En utilisant Tcl, nous taperions la commande suivante :

set magic_number 2

La commande set a une signification spéciale en Tcl — elle demande à l’ordinateur de stocker une donnée. Cela s’appelle initaliser une variable. Pour que l’ordinateur stocke une donnée, il a besoin d’un nom spécial pour cette variable, afin qu’il puisse se rappeler où retrouver la donnée stockée. Dans notre cas, nous avons appelé la variable magic_number. Voyons cette commande plus en détail. La commande Tcl set, suivie d’un espace puis du nom de la variable, suivie d’un espace et d’une donnée assignée à cette variable. Souvenez-vous de notre slogan, Tcl sépare les commandes de leurs arguments par des espaces.

Commande Tcl : set

Arguments :

nom de variable et donnée assignée à cette variable. Nom de variable : magic_number - Donnée assignée à cette variable : 2

Pour que l’ordinateur retrouve et affiche cette donnée, nous devons taper la commande suivante :

puts $magic_number

Quand vous indiquez à l’ordinateur (en utilisant Tcl) de retrouver une donnée, vous devez préfixer le nom de la variable par le caractère $. En expérimentant sur la console, vous devriez voir les résultats montrés en Figure 10.

Leçon 4 : Bases Mathématiques en Tcl

Supposons que vous vouliez faire de simples calculs sur la console Tcl. Voyons comment faire quelque chose de simple comme 2 + 2. Arithmétique de primaire ! Comment demander à l’ordinateur d’ajouter 2 à 2 pour nous ? Nous devrons utiliser la commande Tcl, expr, qui est la commande pour les expressions mathématiques. La commande expr a des règles d’utilisation que nous devons suivre, sinon l’ordinateur nous en voudra. Effectuons ce test simple sur la console Tcl Wish. Voici ce que nous devons taper :

expr 2 + 2

La commande Tcl est expr, l’argument est notre expression mathématique, 2 + 2 séparée par un espace.
En utilisant notre magic_number, ajoutons y le résultat.

set new_magic_number [expr 2 + $magic_number]

Oula ! D’où viennent ces crochets [] ? Si nous regardons bien, nous avons deux commandes Tcl sur la ligne. L’interpréteur Tcl ne peut manipuler qu’une commande à la fois. Il interprète la commande à l’intérieur des crochets en premier. Cette expression mathématique est calculée. Puis devinez ce qui se passe ? La réponse de notre calcul est passée en paramètre à la commande Tcl set. C’est un peu compliqué ? Détaillons-le.

Nous tapons cette commande dans la console de l’interpréteur Tcl :

set new_magic_number [expr 2 + $magic_number]

Tcl prend en premier ce qui se trouve entre les crochets et exécute la commande suivante :

expr 2 + $magic_number

Evidemment la réponse à notre calcul est 4. La réponse est passée à la commande set par l’interpréteur.

set new_magic_number 4

L’interpréteur Tcl fait tout cela de façon transparente, c’est pourquoi nous ne voyons pas ce que je vous ai montré. Mais c’est ce que l’ordinateur fait.
Voyons si l’ordinateur a la bonne réponse (Figure 11).

Le script :

set magic_number 2
set new_magic_number [expr 2 + $magic_number]

Avant de poursuivre, révisons un peu. Voyez comment le magic_number est initialisé et comment nous initialisons new_magic_number. Pourquoi n’avons nous pas utilisé de crochets pour initialiser la valeur de new_magic_number ? Les valeurs à l’intérieur des crochets ont besoin d’être évalué par l’ordinateur.
Dans ce cas, l’ordinateur doit d’abord évaluer la valeur de la commande Tcl exp. Une fois qu’il l’a fait, la variable new_magic_number est initialisé à 4.
Nous utiliserons les crochets dans un programme Tcl quand nous voudrons que l’ordinateur calcule d’abord une valeur avant d’initialiser une variable.

Révisons la grille du Tic-Tac-Toe. Le bloc du coin en haut à gauche est positionné à x=0 et y=0 comme montré en Figure 4. Initialisons ces variables en utilisant la commande Tcl set.

set x 0
set y 0

Maintenant, indiquons à l’ordinateur de calculer les coordonnées du bloc en bas à droite de la grille. Nous savons, grâce à notre petite carte, que ce bloc est situé à x=2 et y=2. Nous pouvons demander à l’ordinateur de calculer la position de ce bloc. Pour aller du bloc du coin en haut à gauche de la grille au coin en bas à droite de la grille, nous devons aller dans la direction x de 2 blocs, et dans la direction y de 2 pas. En utilisant les commandes Tcl set et expr, nous taperions ce qui suit dans la console Tcl :

set new_x [expr 2 + $x]
set new_y [expr 2 + $y]

Le script :

set x 0
set y 0
set new_x [expr 2 + $x]
set new_y [expr 2 + $y]

Les variables new_x et new_y ont les valeurs de la position du bloc du coin en bas à droite de la grille. Si vous regardez la Figure 4, vous verrez que le bloc du bas à droite dans la grille du Tic-Tac-Toe a les valeur x=2 et y=2. La valeur de new_x est 2 et la valeur de new_y est 2, la position du bloc du coin en bas à droite de la grille. Si vous vous déplacez dans la grille pour placer votre X sur le bloc du coin en bas à droite vous devez indiquer à l’ordinateur de placer un X à la position x=2 et y=2. Je sens que votre tête commence à chauffer ! Il est temps de passer à autre chose.

Leçon 5 : Exploration des Grilles de Fenêtres d’Affichage

La plupart des ordinateurs d’aujourd’hui utilisent un système fenêtré pour afficher leurs graphiques. La grille de notre jeu Tic-Tac-Toe est une simple fenêtre de 3 blocs de large par 3 blocs de haut. Nous avons appris il y a quelques temps que cette grille a une résolution de 3 x 3.

Un ordinateur classique a un système d’affichage d’une résolution d’au moins 640 x 480, jusqu’à environ 1280 x 1024. Il est évident qu’une fenêtre de 3 x 3 serait trop petite pour être visible sur un écran d’une telle résolution. Prenons donc une taille de fenêtre standard. Un jeu comme Doom ou Quake d’Id Software utiliserait une fenêtre d’une taille de 640 x 480. La taille de la fenêtre du jeu est de 640 de large par 480 de haut.

Puisque nous parlons de fenêtre d’écran et pas d’une grille de Tic-Tac-Toe, nous utiliserons le terme pixel au lieu de bloc. Un pixel est un élément d’une image. Nous allons créer une fenêtre d’affichage de 640 pixels de large par 480 pixels de haut.

Tcl inclut une logiciel spécial, appelé Tk, pour afficher les programmes graphiques. Quand vous utilisez Wish Shell, vous utilisez en fait Tk. Nous pouvons faire en sorte que la petite fenêtre de Wish affiche une fenêtre de la taille d’un jeu vidéo. Voici ce que vous pouvez taper dans la console :

set video_game_width 640
set video_game_height 480

Nous avons indiqué à l’ordinateur des valeurs à stocker pour créer notre fenêtre d’une nouvelle taille. Nous voulons que la fenêtre fasse 640 pixels de large et 480 pixels de haut. Ensuite nous devons créer la fenêtre, appelée canvas, en utilisant la commande Tk.

canvas .video_game_window -width $video_game_width -height $ video_game_height

Le résultat sur la console devrait ressembler à la Figure 13.

Rien de très spectaculaire hein ?
Bien !
Nous avons spécifié les dimensions de la nouvelle fenêtre, mais nous n’avons pas indiqué à Tk d’afficher la nouvelle fenêtre.
Tk a une commande appelée pack qui effectue un petit tour de magie pour positionner et afficher notre nouvelle fenêtre.
Tapez cette commande dans la console :

pack .video_game_window

Voyons maintenant ce qui se passe au niveau de notre fenêtre Wish comme montré en Figure 14.

Le script :

set video_game_width 640
set video_game_height 480

canvas .video_game_window \
-width $video_game_width -height $video_game_height
pack .video_game_window

Notre petite fenêtre s’est agrandie comme par magie. C’est l’action de la commande Tk pack. Quand nous validons la commande pack, elle envoie nos instructions à la fenêtre Wish.

Notez que si jamais vous voyez le message d’erreur suivant, vous devrez détruire la fenêtre video_game_window que vous venez de créer.

window name "video_game_window" already exists in parent

Utilisez la commande suivante et essayez de nouveau le script :

destroy .video_game_window

Si cela ne fonctionne pas, essayez de quitter, puis relancez l’application Wish. Revenons maintenant à notre discussion.

Tout comme la grille du Tic-Tac-Toe, la fenêtre Wish est définie par ses coordonnées x et y. Son coin supérieur gauche est son origine comme c’est le cas pour la grille Tic-Tac-Toe. L’origine est l’endroit où les coordonnées x et y sont à 0. La Figure 15 ressemble beaucoup à la Figure 4, mais la fenêtre Wish fait 640 x 480 au lieu de 3 x 3 pour la grille du Tic-Tac-Toe.

On se déplace dans la fenêtre de jeu que nous avons créée en utilisant ses coordonnées comme on le faisait pour la grille du Tic-Tac-Toe. En haut de la fenêtre, y=0, et y croît au fur et à mesure que vous allez vers le bas. A gauche de la fenêtre, x=0, et x croît au fur et à mesure que vous allez sur la droite.
Et maintenant une petite question. Quelles sont les valeurs de x et y au milieu de la fenêtre ?

La plus grande valeur de x est 639, tout à droite de la fenêtre, et la moitié de 639 est 320 environ. La plus grande valeur de y est 479, tout en bas de la fenêtre, et la moitié de 479 est 240 environ. La valeur x du milieu est 320 et la valeur du milieu y est 240. Les coordonnées du pixel du milieu de la fenêtre sont x=320 et y=240.

Vous voulez vérifier qu’il s’agit vraiment du milieu de la fenêtre ? Nous pouvons faire une petite expérience qui nous indiquera les coordonnées de la fenêtre Wish. Tk utilise les valeurs x et y pour suivre la souris de l’ordinateur. En Tk, la valeur du x de la souris est %x et la valeur du y de la souris est %y. Ces valeurs sont utilisées pour nous indiquer où se situe le pointeur de la souris à l’intérieur de la fenêtre Wish. Tapez la commande suivante et voyez par vous-même :

bind .video_game_window  { puts "mouse x: %x mouse y: %y" }

La commande Tk bind indique à Tk que nous voulons associer la commande Tcl puts au mouvement de la souris. Chaque fois que la souris bouge, Tk transmettra les coordonnées de la souris à la commande Tcl puts. Déplacez la souris à l’intérieur de la fenêtre Wish que nous avons créée pour voir les coordonnées de la souris s’afficher. Et seulement dans cette fenêtre. Déplacer la souris hors de la fenêtre et aucune coordonnée ne sera plus affichée.
Revenez sur la fenêtre pour les voir s’afficher de nouveau.

Voyons si nous pouvons vérifier que le milieu de la fenêtre a bien pour coordonnées x=320 et y=240. La Figure 16 représente mon test.

Le script :

set video_game_width 640
set video_game_height 480

canvas .video_game_window \
-width $video_game_width -height $video_game_height
pack .video_game_window
bind .video_game_window  { puts "mouse x: %x mouse y: %y" }

Leçon 6 : Dessiner un Pixel

Le moment que vous avez attendu toute votre jeune carrière de joueur. Voici le secret révélé de l’ordinateur pour dessiner. Etes-vous capable de détenir un tel pouvoir ?

L’environnement graphique de Tk ne propose pas d’utilitaire pour positionner un pixel, donc nous allons devoir utiliser de petits rectangles. Le rectangle fera un pixel de large et un pixel de haut. En gros, nous allons dessiner un carré et le faire passer pour un pixel dans cet example. Tapez ce petit bout de code dans la console :

.video_game_window create rectangle 320 240 320 240

Ceci devrait dessiner un tout petit pixel noir au centre de votre fenêtre de jeu. Et voilà, regardez où vous en êtes alors qu’il y a juste quelques minutes vous tapiez votre premier programme Tcl.

Le script :

set video_game_width 640
set video_game_height 480

canvas .video_game_window -width $video_game_width -height $video_game_height
pack .video_game_window
.video_game_window create rectangle 320 240 320 240

Si vous ne sautez pas de joie devant les résultats, que diriez-vous de dessiner un rectangle plus grand, que l’on puisse voir.
Et ajoutons-y de la couleur !

.video_game_window create rectangle 320 240 350 270 -fill red

L’option -fill de la commande Tk create rectangle vous permet de changer les couleurs.
Essayez avec black (noir), blue (bleu), red (rouge) et yellow (jaune).

Le script :

set video_game_width 640
set video_game_height 480

canvas .video_game_window -width $video_game_width -height $video_game_height
pack .video_game_window
.video_game_window create rectangle 320 240 350 270 -fill red

Leçon 7 : Le Grand Final

Ce n’est pas en quelques courtes leçons sur un script que vous pouvez devenir un gourou du code. Cela prend du temps et demande de l’expérience.
Mais que pouvons-nous faire avec ce que nous avons déjà vu ? En fait, Tcl/Tk est suffisamment puissant pour nous permettre de coder un petit programme de dessin. Un tel petit programme peut-être créé en quelques lignes de code. Nous allons créer un petit programme de dessin tout simple en utilisant notre fenêtre de jeu. Dabord, nous créons notre fenêtre d’affichage comme précédemment.

set video_game_width 640
set video_game_height 480

canvas .video_game_window -width $video_game_width -height $video_game_height
pack .video_game_window

Pour dessiner avec la souris, vous maintenez le bouton gauche de la souris enfoncé et vous la bougez. Le bouton gauche est B1 en Tcl/Tk. Nous allons glisser la souris pour dessiner les pixels. Pour enregistrer les mouvements de la souris, nous utilisons l’option Motion, comme nous l’avons expérimenté avec les coordonnées de la souris affichées sur la console. Comme nous l’avons vu précédemment, notre script doit capturer l’action B1-Motion. Quand l’ordinateur attend une action au niveau d’une fenêtre, on dit qu’il attend un événement. L’événement que notre ordinateur attend pour commencer à dessiner est B1-Motion, qui est généré quand vous appuyez sur le bouton gauche de la souris et que vous la bougez.

Nous aurons besoin d’écrire notre propre commande Tcl, qui sera appelée quand cet évènement sera vu par l’ordinateur. Cette commande spéciale s’appelle une procédure. Vous pouvez la voir comme un mini-programme. Pour indiquer à Tcl que nous implémentons notre propre script, nous devons utiliser la commande Tcl proc. La procédure suivante indique à l’interpréteur Tcl comment traiter les mouvements de la souris au niveau de la fenêtre videogame.
Le nom de notre procédure est mouse_draw. Voici à quoi elle ressemble :

proc mouse_draw { x y } {

    set xul [expr $x - 3]
    set yul [expr $y - 3]
    set xlr [expr $x + 3]
    set ylr [expr $y + 3]
    .video_game_window create rectangle $xul $yul $xlr $ylr -fill red
}

A quoi correspondent les variables xul, yul, xlr and ylr ? Rappelez-vous, nous dessinons un rectangle, enfin, un carré de 6 pixels par 6 pixels en fait.
xul signifie x, upper left (haut gauche) et yul signifie y, upper left. xlr signifie x, lower right, bas droite …etc… Cela ne correspond-il pas à la description d’une grille de Tic-Tac-Toe ?

Que signifie { x y } dans la commande Tcl proc mouse_draw { x y } ? Nous avons besoin de récupérer les coordonnées de la souris. Vous vous souvenez de ce que nous avons fait dans notre petite expérimentation précédente ? Les outils graphiques de Tk nous permettent d’utiliser les coordonnées de la souris en utilisant la notation spéciale %x et %y. Nous appelons la procédure mouse_draw de cette manière :

mouse_draw %x %y

Telle quelle, cette commande ne fonctionnera pas pour nous. Rappelez-vous que l’ordinateur attend des événements. Dans ce cas, nous voulons dessiner uniquement quand le bouton gauche de la souris (B1) est maintenu appuyé et que la souris est en mouvement (Motion). Nous devons lier l’évènement (B1-Motion).

bind .video_game_window <B1-Motion> { mouse_draw %x %y }

Voilà. Nous avons notre petit programme de dessin. Mon chef-d’oeuvre est visible en Figure 17.

Le script :

set video_game_width 640
set video_game_height 480

canvas .video_game_window -width $video_game_width -height $video_game_height
pack .video_game_window

proc mouse_draw { x y } {

    set xul [expr $x - 3]
    set yul [expr $y - 3]
    set xlr [expr $x + 3]
    set ylr [expr $y + 3]
    .video_game_window create rectangle $xul $yul $xlr $ylr -fill red
}
bind .video_game_window <B1-Motion> { mouse_draw %x %y }

Félicitations !

Vous avez maîtrisé les bases du graphique scripté. Nous n’avons pas créé un jeu 3D de shoot mais vous avez réussi à écrire un petit programme de dessin. Vous devrez vous amuser un peu plus avec les scripts présentés dans cette leçon.

Un grand nombre de projets graphiques peuvent être réalisés avec Tcl. Essayez d’ajouter une capture des évènements clavier à vos programmes. Entraînez-vous. Je trouve que la programmation graphique est aussi amusante que la construction avec des Legos. Ne me croyez pas sur parole. Découvrez-le par vous même. Et rappelez-vous d’utiliser votre nouveau savoir pour le bien de l’humanité.

Textes originaux en anglais sur O’Reilly : Elementary Computer Graphics: Drawing with Pixels par Michael J. Norton

opoppon Développer sur Mac OS X Tcl