Tutoriel 09

Fonctions graphiques

 

Nouvelles commandes :

> Xmin Xmax Ymin Ymax = Configure les axes [VARS] [1] [1 2 4 ou 5]
> AxesOff = Cache les axes [2nd] [FORMAT] "AxesOff"
> AxesOn = Affiche les axes [2nd] [FORMAT] "AxesOn"
> Line(X1,Y1,X2,Y2[,0] = Dessine une ligne d'après la configuration des axes [2nd] [DRAW] [2]
> Horizontal Y = Dessine une ligne horizontale d'après la configuration des axes [2nd] [DRAW] [3]
> Vertical X = Dessine une ligne verticale d'après la configuration des axes [2nd] [DRAW] [4]
> Circle(X,Y,R = Dessine un cercle de rayon R d'après la configuration des axes [2nd] [DRAW] [9]
> Pt-On(X,Y[,M] = Dessine un point d'après la configuration des axes [2nd] [DRAW] [>] [1]
> Pt-Off(X,Y[,M] = Dessine un point blanc d'après la configuration des axes [2nd] [DRAW] [>] [2]
> Pt-Change(X,Y = Change d'état un point d'après la configuration des axes [2nd] [DRAW] [>] [3]
> Pxl-On(Y,X = Allume un pixel de l'écran [2nd] [DRAW] [>] [4]
> Pxl-Off(Y,X = Éteind un pixel à l'écran [2nd] [DRAW] [>] [5]
> Pxl-Change(Y,X = Change l'état d'un pixel de l'écran [2nd] [DRAW] [>] [6]
> Pxl-Test(Y,X = Renvoie l'état d'un pixel de l'écran (0 pour éteind et 1 pour allumé) [2nd] [DRAW] [>] [7]
> StorePic = Stoque une image de l'écran graphique dans une variable image [2nd] [DRAW] [<] [1]
> RecallPic = Recalle une image d'une variable image sur l'écran graphique [2nd] [DRAW] [<] [2]
> Pic0 à Pic9 = Variable image [VARS] [4] [0 à 9]

Introduction :

Nous allons maintenant commencer les gros chapitres! Ne vous découragez surtout pas maintenant car ils en vallent le coup.
Nous commençons par les fonctions graphiques. Nous allons donc apprendre à dessiner sur l'écran graphique pour que vous puissiez créer de meilleurs jeux.
Rapel : Dans le tutoriel 01 nous avons appris deux commandes graphiques : ClrDraw pour effacer l'écran graphique et Text( pour écrire sur cet écran. Nous n'y reviendrons donc pas mais nous en aurrons besoins pour cette leçon.

Dessiner avec le repère :

Si vous avez l'habitude de dessiner avec votre TI, alors ces commandes vous seront familières. Néanmoins, vous devrez indiquer les cooronnées. Voici un programme qui utilise les commandes les plus importantes de l'onglet "DRAW" du menu [2nd] [DRAW]. Nous détaillerons ensuite les points que vous n'aurez pas compris.
Exemple :
:0->Xmin
Permet de configurer le repère du graphique...
:94->Xmax
...afin que chaque pixel représent 1
:0->Ymin
...
:62->Ymax
...
:AxesOff
Permet d'avoir un écran tout blanc, sans que les axes du graph soient visibles
:ClrDraw
Efface l'écran graphique, à ne pas confondre avec ClrHome
:Text(0,1,"VOICI MA MAISON:")
Du texte pour introduire le dessin que nous allons faire
:Line(30,15,30,30)
Dessine une ligne pour le rectangle de la maison (ligne gauche)
:Line(30,15,60,15)
Dessine une ligne pour le rectangle de la maison (ligne bas)
:Line(60,15,60,30)
Dessine une ligne pour le rectangle de la maison (ligne droite)
:Line(60,30,30,30)
Dessine une ligne pour le rectangle de la maison (ligne haut)
:Line(30,30,45,42)
Dessine une ligne pour le toit de la maison (diagonale gauche)
:Line(45,42,60,30)
Dessine une ligne pour le toit de la maison (diagonale droite)
:Pt-On(33,27,2)
Dessine un point pour une fenêtre gauche de la maison
:Pt-On(57,27,2)
Dessine un point pour une fenêtre droite de la maison
:Horizontal 13
Dessine une ligne horizontale sur toute la longueur de l'écran pour le sol
:Circle(77,49,6)
Dessine un cercle de rayon 6 pour le soleil
Exécutez-le. C'est beau n'est-ce pas??
> Reprenons maintenant les quatres premières lignes du programme. S'il vous arrive de travailler avec votre TI, vous devez savoir que ce sont les variables où sont stoquées les limites d'un graphique. Appuyez sur [WINDOW] et vous verez alors les valeurs que nous avons entrées. Les valeurs 0, 94, 0 et 62 n'ont pas été choisies par hazard. Appuyez sur [GRAPH] et déplacez le curseur avec les touches directionelles et vous verrez que les coordonnées sont toutes entières (pas de nombres à virgule) sur les deux axes. Si vous ne voyez pas de nombres appuyez sur [2nd] [FORMAT] "CoordOn" pour activer l'affichage des coordonnées. Lorsque vous auurez besoins de l'écran graphique pour un jeu, prennez soin de configurer les axes avec ces nombres.
> Maintenant AxesOff permet de masquer les axes. Appuyez sur [2nd] [FORMAT] "AxesOn" pour les réactiver puis sur [GRAPH]. Vous voyez que le dessin aurai été gaché par les axes! Ne vous inquiétez pas si le dessin a disparu : réexécutez le programme.
> Les deux lignes suivantes ont déjà été apprises alors passons aux Line(. Dessine une ligne avec les paramètres X1,Y1 coordonnées du point de départ de la ligne et X2,Y2 coordonnées du point d'arrivée de la ligne. Réessayez en changeant les paramètres pour bien comprendre. Line( accèpte un cinquième paramètre facultatif permettent de dessiner une ligne blanche. Il suffit pour cela de rajouter ,0 à la fin de la commande.
Démonstration :
:ClrDraw
Efface l'écran graphique
:Line(30,15,60,30)
Dessine une première ligne
:Line(60,15,30,30)
Dessine une seconde ligne
:Pause
Pour avoir le temps de constater que deux lignes ont été crées et que la première va être effacée
:Line(30,15,60,30,0)
Efface la première ligne en en dessinant une blanche sui la remplacera
La première ligne a été effacée en la redessinant avec le paramètre ,0 suplémentaire!
> Les deux commandes suivantes servent à fafficher des points. Les paramètres sont X,Y coordonnées du point. Un autre paramètre facultatif existe : il permet de donner la forme du point : on appel ça une marque.
Démonstration :
:ClrDraw
Efface l'écran graphique
:Pt-On(30,41,1)
Dessine un point normal
:Pt-On(40,41,2)
Dessine un point en forme de case (comme pour les fenêtres de la maison
:Pt-On(50,41,3)
Dessine un point en forme de croix
:Pause
Pour avoir le temps de constater les points ont été crées
:Pt-Off(30,41)
Efface le point normal
:Pt-Off(40,41,2)
Efface le point en forme de case
:Pt-Off(50,41)
Dessine un poit normal blanc sur la croix
Les trois premieres commandes montrent les trois marques possibles pour un point. Vous pouvez supprimer le paramètre ,1 dans la première commande : le résultat sera le même. En effet, en l'asence du paramètre facultatif marque seul un point est dessiné.
> Cet exemple nous a permis d'apprendre Pt-Off(. Il permet de dessiner un point blanc. Le premier efface le point (aucune marque n'est spécifiée donc la TI l'interprète comme ,1), le deuxième efface la case et le troisième n'efface qu'un seul point car aucune marque n'a été précisée : la croix n'est pas effacée complètement.
> À par Pt-On( et Pt-Off(, pour travailler avec des points il existe Pt-Change( qui dessine un point noir si, au coordonnées choissies, le point est blanc et blanc s'il était noir. Voyons ça avec un petit exemple
Démonstration :
:ClrDraw
Efface l'écran graphique
:Text(0,1,"PRESS ENTER")
Pour passer à l'écran graphique : essayez sans et vous resterez (jusqu'à la prochaine commande graphiqe) à l'écran texte
:Repeat 0
Boucle infinie
:If getKey=105
Si appuie sur [ENTER]... getKey est ici directement utilisé sans stoquer sa valeur dans une variable car elle n'est utilisée qu'une fois
:Pt-Change(30,41)
...Change d'état ce point
:End
Fin de la boucle
La commande Pt-Change( n'accèpte pas le paramètre marque. Exécutez le programme et appuyez plusieurs fois sur [ENTER] : le point changera d'état à chaque fois (allumé/éteind/allumé...). [ON] pour quitter.
> Nous passons maintenant à Horizontal qui permet de dessiner une ligne horizontale sur tout l'écran. Son homologue pour lignes verticales existe : c'est tout simplement Vertical. Il n'y a pas grand chose à dire sur ces deux commandes.
> Il ne reste plus qu'à présenter Circle(, qui est tout aussi simple. Ces paramètres sont X et Y pour les coordonnées du centre et R pour le rayon. Pour que ce soit un cercle, veillez à ce que le repère soit orthonormé (comme nous avons fait) sinon ce sera un ovale. Essayez pour voir la différence : appuyez sur [ZOOM] [6] et faites ce petit programme :
:Circle(0,0,10) ...Dans un repère non orthonormé : dessine un oval
Joli, non? Courrage : il ne nous reste plus que quatre commandes!

Dessiner avec les pixels :

Les quatres commandes qui vont suivre utilisent les pixels de l'écran et non les coordonnées du graph.
Si vous utilisez l'une des commandes ci-dessus et l'une des commandes ci-dessous, qui utilisent les pixels, pour transformer un Pt-On( par un Pxl-On(, par exemple, il vous faudra configurer le graph comme nous l'avons fait avec le premier exemple, ainsi, les coordonnées X seront les mêmes que les pixels en X et, par contre, pour transformer des points en pixels, les coordonnées Y en pixels seront égales à 62-Y en points. En claire : Pt-On(12,50) c'est pareil que Pxl-On(62-50,12). Et j'oubliai de vous dire que X et Y étaient inverés avec les pixels! Pourquoi? Ne me le demandez pas : une des rares fautes de TI qui nome Y et X respectivement "ligne" et "colone"! Si ca vous aide à retenir...
Bon allez : ne perdons pas de temps et commençons :
Exemple :
:0->Xmin
Configuration des axes pour passer facilement du mode Points au mode Pixels...
:94->Xmax
...afin que chaque pixel représent 1
:0->Ymin
...
:62->Ymax
...
:AxesOff
Permet d'avoir un écran tout blanc, ça a été démontré...
:ClrDraw
:Pxl-On(10,10)
Allume un pixel à (10,10)
:Pause
Pour bien le voir
:Pxl-Off(10,10)
Éteind le pixel à (10,10)
:Pause
Pour bien voir
:For(X,1,5)
Pour changer 5 fois l'état du pixel qui suit
:Pxl-Change(10,10)
Change ce pixel et...
:Pause
...Attend que vous l'ayez bien vu
:End
...Pour la boucle For
:Pxl-Test(10,10)->A
Donne un si ce pixel est allumé et 0 s'il est éteind
:Text(0,1,A)
Donne la valeur du pixel (10,10)
:Pause
...Visualisez le résultat
:Pxl-Change(10,10)
Change ce pixel une fois de plus et...
:Text(0,1,Pxl-Test(10,10))
...Retest s'il est allumé et affiche le résutat directement
C'est un long programme mais il donne un exemple de toutes les commandes.
D'abord le pixel (10,10) est allumé, puis éteind, puis change cinq fois d'état puis, et là c'est nouveau : il est testé.
En effet, Pxl-Test( regarde si le pixel en question est allumé et renvoi 1 si oui, sinon il renvoi 0. Très simple, n'est-ce pas?
> Si cous devez travailler avec de pixels, le pixel en haut à gauche de l'écran a pour coordonnées (0,0) et le pixel en bas à droite a pour coordonnées (62,94).

Sauvegarde et rapel d'images :

Quand vous avez fait de belles images vous pouvez les enregistrer puis les rappeler pour les montrer à vos copains quelques jours plus tards tout en entamant un nouveau dessin. Mais, en termes de programmation, l'enregistrement d'images et leur rapel se fait surtout pour mettre une belle image d'introduction à vos programmes.
Pour enregistrer un dessin, vous allez faire connaissance d'un autre type de variables (autres que numériques). Il s'agit des variables images tout simplement. Les variables numériques sont représentées par les lettres et les variables image par les "mots" Pic0 à Pic9. Vous les trouverez en appuyant sur la touche [VARS] (on a déjà vu ce menu dans le tutoriel 02) puis [4] puis en choisissant l'une des dix images. Mais elles ne sont pas utilisées comme les autres variables : pour enregistrer une image, vous devez avoir recours à la commande StorePic et vous la rappellerez avec la commande RecallPic.
Programme :
:StorePic Pic1 Enregistre l'image
:ClrDraw Efface l'écran graphique (pour montrer qu'il n'y a pas de trucage) et...
:RecallPic Pic1 Rappel l'image en moins d'une demi seconde!
Voilà! Tout est dit! Sauf que la commande RecallPic n'efface pas l'écran : l'image est recallée en surimpression sur l'écran.

Conclusion :

Grace à ce tutoriel, vous pourrez faire de très beaux jeux sur l'écran graphique. Ce fut très laborieux, je suppose! Mais le plus dur arrive...

Retour : Sommaire
Aide : Liste des commandes
Précédent : Tutoriel 08 : Comportement aléatoire
Suivant : Tutoriel 10 : Les listes