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