Index des articles > Programmation > Tutorial Vertel3 :: Chapitre IV

Tutorial Vertel3 :: Chapitre IV

Article posté par Thor

Chapitre IV

Chapitre IV

Les fonctions graphiques et de texte

  Vous avez probablement remarqué que les chapitres 2 et 3 sont principalement centrés sur la syntaxe de Vertel3. Ils expliquent donc les rudiments essentiels à l'utilisation de cette librairie. Il est important que vous ayez acquis toute la syntaxe de Vertel3 car toute la suite de ce tutorial va en découler. Je comprend très bien que le chapitre 3, expliquant l'utilisation des listes, peut vous paraître déroutant car le concept expliqué est réellement assez compliqué. Avant de poursuivre assurez vous d'avoir surtout bien compris l'utilisation des listes en mode "normal" car c'est le mode le plus utilisé (sauf pour notre exemple :) puisque nous utiliserons le mode séquentiel).

  Nous allons maintenant essayé de connaître et surtout de comprendre les fonctions graphiques de Vertel3. Les taches graphiques étant souvent répétitives nous serons amenés à utiliser des objets bien connus de Vertel3 qui accéléreront l'exécution ... Quels sont ces objets? ... Allez ne me dites pas que vous ne voyez pas ... Ce sont les listes bien sûr. Voilà pourquoi la compréhension des chapitres précédent est nécessaire à la lecture de ce chapitre.

A) Un petit programme graphique

  Je tiens tout d'abord à faire remarquer que ce chapitre sera moins difficile que les précédents. En effet il aura surtout pour but d'énoncer toute les fonctions graphiques et de texte. Pour expliquer les principales astuces et optimisations possibles nous créerons une petite application qui créera un petit effet graphique avec des cercles. L'effet graphique étant assez difficile à expliquer, je vous conseille d'exécuter le programme pour ce chapitre. Vous pourrez ainsi mieux appréhender la programmation de cette application. Je tiens également à préciser que cet effet graphique est beaucoup plus joli si il est réalisé dans des vitesses convenables : nous sacrifierons donc l'optimisation de taille en mémoire au profil de l'optimisation de vitesse.

prgm n°1 : g_effect

Prgm
@ Initialisation des variables pour optimiser le programme en vitesse
Local s,l,o,a,y
seq(b,b,0,130,10)->y
{}->l
{8,8,8,8,8,8,8,8,8,8,8,8,8,8}->o
For a,0,8
augment(l,o-a)->l
EndFor
@ On sauve l'écran et on le remplit de noir (cf Note)
vertel("save","s",0,0,239,127,"","recp",0,0,239,127)
@ La boucle couvrira tout l'écran et on utilise la lecture séquentielle
For a,-80,239,127
vertel("crcv",seq(b,b,a,a+80,10),"->","#y","#l","#l",1)
EndFor
vertel("paus","","pict","s",0,0,1)
EndPrgm

  Note : Vous remarquez que les instructions suivantes ont sensiblement les mêmes arguments :

vertel("save","s",0,0,239,127,"","recp",0,0,239,127)

  Elles pourraient être remplacée par :

vertel({"save","recp"},"s",0,0,239,127)

  Néanmoins cette notation (fonctionnelle) qui optimise le programme en taille ne facilite pas la lecture. En effet la fonction "recp" ne demande pas d'argument de type chaîne de caractère. Je vous conseille donc de proscrire cette écriture qu'on pourrait qualifier de programmation "sale".

  Concentrons nous maintenant sur le programme. Si vous avez bien compris l'effet graphique à atteindre, vous remarquez que nous devons agir sur 4 "dimensions" : la première représente les abscisses de l'image de base (allant de 0 à 80), la seconde de 0 à 130 pour traverser l'écran en ordonnée, la troisième qui varie de -80 à 239 afin de  faire traverser l'image de base à travers tout l'écran et enfin la dernière qui modifie la taille des cercles. Comme je viens de le mentionner, il existe une image de base de x=80 sur y=130 qui se déplace tout le long de l'écran. Cet effet est un gros "consommateur" de fonctions et c'est la raison pour laquelle on utilisera la lecture séquentielle de Vertel3 qui permet déjà un affichage en 2 dimensions (il ne nous restera que 2 dimensions).

  Lors de l'utilisation du mode de lecture séquentielle de Vertel3, les programmeurs sont souvent confrontés à un problème. Imaginons l'instruction (sans conséquence) suivante :

vertel({1,2},"->",{3,4},{5,6})

  On pourrait croire que Vertel lira dans cet ordre (1,3,5), (1,4,5), (2,3,6), (2,4,6). Malheureusement pour nous, ce n'est pas le cas : l'opérateur "->" n'affecte que la liste suivante (ici {3,4}) et la précédente ({1,2}) (d'où l'impossibilité de placer le tag "->" sur la première liste). Ainsi les têtes de lecture des autres listes avancerons à une vitesse "normale" provoquant ainsi un tout autre système de lecture. Dans l'exemple précédent Vertel3 lira en réalité dans cet ordre : (1,3,5), (1,4,6) puis s'arrêtera car la troisième liste arrivera à sa fin. Si vous souhaitez avoir une exécution ne se bloquant que lorsque toute les listes arrivent à leur terme en même, il faut que la troisième liste soit de la dimension de celle de la première fois celle de la seconde (ici 4). Si on remplace {5,6} par {5,6,7,8} On aura alors (1,3,5), (1,4,6), (2,3,7), (2,4,8). Dans notre programme on souhaite afficher des cercles tous les 10 pixels sur un rectangle de 80 par 130 donc il faut que notre liste exprimant les rayons des disques contienne 9*14 = 126 éléments : Le fait d'enregistrer toute cette liste dans le programme prendrait beaucoup de place c'est pourquoi les 6 premières lignes du programme on pour but de créer cette liste.

  Pour finir cette partie je  pense qu'il existe encore une chose que vous n'avez certainement pas compris : Que viennent faire les # avant le nom des listes (par exemple "#l"). Ce symbole (la redirection interne) fait lui aussi partie des petites astuces très pratiques de Vertel3. Comme nous venons de le voir au paragraphe précédent, la liste l est assez conséquente. Lors d'un appel (sans conséquence puisque "fonc" n'est pas reconnue) à Vertel3 de la forme :

vertel("fonc",list)

  Le TIOS analyse la liste list avant d'exécuter l'instruction. Cette analyse prend d'autant plus de temps que la liste est longue. L'opérateur # a pour but d'empêcher le TIOS de lire list avant l'exécution. Il faut donc remplacer list par "#list" (et non #list qui n'a aucun sens pour le TIOS). L'analyse du TIOS sera évitée car il prendra l'expression "#list" pour une chaîne de caractère alors que Vertel3 comprendra qu'il faut en fait utiliser list. L'inconvénient de cette méthode est qu'il est obligatoire que la liste soit enregistrée dans une variable. Nous verrons plus tard que cet opérateur d'indirection interne a d'autres avantages tout aussi bénéfiques.

B) Les fonctions graphiques

  Cette partie va vous énumérer toute les fonctions graphiques que vous pouvez utiliser avec Vertel3. Nous retrouverons bien entendu les fonctions que nous venons d'utiliser dans le programme précédent. Toutes les explications de chaque fonctions sont extraites de la documentation du réalisateur de Vertel3. J'ai néanmoins rajouté des notes pour mieux comprendre certaines fonctions.

bufr :: Cette fonction permet d'utiliser un buffer, ou écran virtuel, aux usages multiples. Il peut à la fois servir pour effectuer des opérations graphiques invisibles pour l'utilisateur (affichage et sauvegarde de PIC découpés, par exemple), mais aussi et surtout pour appeler plusieurs instructions graphiques et afficher leur résultat en une seule fois. Le premier appel de la fonction crée l'écran virtuel et redirige toutes les fonctions d'affichage sur lui. En appelant une seconde fois la fonction, le buffer sera recopié à l'écran. Notez que la seule façon de conserver le contenu du buffer entre deux appels de Vertel est de le sauvegarder (voir fonctions "pict" et "save").

clrs :: Efface l'écran de la calculatrice de façon totale. Cette fonction efface tout l'écran mais ne tient pas compte des différents écrans connus en Ti-Basic (Home, I/O, Graph...).

crcp :: x, y, rx, ry [, mode] :: Dessine un cercle plein de centre x,y. Il s'agit plus exactement d'une ellipse, dont le rayon du demi axe horizontal est rx et celui du vertical ry. Le mode est 0 pour un cercle noir, 1 pour un cercle blanc, et 2 pour un cercle inversé. Nous l'utilisons également dans le A).

crcv :: x, y, rx, ry [, mode] :: Même fonction que crcp, mais pour un cercle vide. Les arguments sont identiques.

line :: x1, y1, x2, y2 [, mode] :: Trace une ligne entre les positions x1,y2 et x2,y2. Peu importe si le premier point est supérieur, inférieur, à gauche ou à droite du premier. Les modes possibles sont 0 pour une ligne noire, 1 pour une ligne blanche, 2 pour une ligne inversée, et 3 pour une ligne à épaisseur double.

pict :: "var", x, y [, mode] :: Affiche l'image de type PIC "var" à la position x,y. Il est possible d'afficher l'image hors de l'écran : la fonction est clippée, mais en raison d'un bug de AMS, le clipping (cf Note ci-dessous) fonctionne mal avec des images de grandes dimensions. Les modes sont 0 pour afficher normalement en "OU" logique (comme rclpic), 1 pour écraser le fond (comme rplcpic), 2 pour du négatif, 3 pour afficher en inversé, "OU" exclusif (comme xorpic), et 4 pour afficher en "ET" logique (comme andpic). Si le mode vaut -1, au lieu d'afficher l'image, la fonction retourne ses dimensions en largeur et hauteur

pixl :: x, y [, mode] :: Cette fonction a un double emploi, comme "pict". Elle peut modifier l'état d'un pixel aux coordonnées x,y : l'allumer si le mode vaut 0, l'éteindre si le mode vaut 1, ou l'inverser si le mode vaut 2. Si le mode vaut -1, la fonction ne modifie rien mais renvoie l'état du pixel situé à la position x,y sur l'écran (0 si il est éteint, 1 si il est allumé).

recp :: x1, y1, x2, y2 [, mode] :: Trace un rectangle plein, dont les coins supérieur gauche et inférieur droit sont respectivement situés aux positions x1,y1 et x2,y2. Attention, la fonction n'affichera rien si les coins sont inversés. Les modes sont 0 pour afficher le rectangle en noir, 1 pour l'afficher en blanc, et 2 pour l'afficher en inversé.

recv :: x1, y1, x2, y2 [, mode] :: Trace un rectangle vide, entre les coins x1,y1 et x2,y2. Attention, "recv" a un fonctionnement particulier pour les modes. Plusieurs valeurs sont disponibles pour divers effets, et il est possible de les combiner. Attention, si le mode vaut 0 (et donc si il est omis), cette fonction n'affichera rien contrairement à toutes les autres qui affichent par défaut en mode normal (ou en noir). Les modes cumulables sont : 0 (blanc), 1 (noir), 2 (inversé), 32 (coins arrondi), 64 (épaisseur double), 128 (coins supérieurs coupés). Un mode à 97 (1 + 32 + 64) affichera donc un rectangle noir, d'épaisseur double, et avec les coins arrondis.

save :: "var", x1, y1, x2, y2 :: Sauvegarde la portion d'écran comprise entre les coins x1,y1 et x2,y2 dans la variable "var" qui sera de type PIC (affichable avec "pict", ainsi qu'avec les fonctions d'AMS). Notez que la contrainte de "recp" se retrouve ici : le 1er coin doit être au dessus et à gauche du second./p>

trip :: x1, y1, x2, y2, x3, y3 [, mode] :: Dessine un triangle plein de sommets x1,y1, x2,y2, et x3,y3. De nombreux modes sont disponibles; utilisez 0 pour afficher le triangle en noir, 1 pour l'afficher en blanc, 2 pour l'inverser, 3 pour l'afficher en lignes verticales, 4 en lignes horizontales, 5 en lignes obliques descendantes, et 6 en lignes obliques montantes.

  Note : La notion de "clipping" est assez simple à comprendre. Rappelez vous : lorsque vous dessinez une ligne en Ti-Basic le TIOS génère une erreur si vous voulez dessinez en dehors de l'écran (c'est à dire si au moins un des bouts de la ligne est en dehors de l'écran). L'avantage de Vertel3 est que toutes ces fonctions graphiques (sauf recp) sont clippées c'est à dire que si vous voulez afficher quelque chose en dehors de l'écran cela ne provoque pas d'erreur. En effet Vertel3 utilise des fonctions graphiques (internes au TIOS) qui vérifie chaque pixel avant l'affichage et l'affiche seulement si il est dans l'écran. Ainsi si vous affichez une ligne de coordonnées de départ x=0, y=0 et d'arrivée x=500, y=0 vous verrez apparaître à l'écran une ligne qui traversera tout l'écran mais aucune erreur ne viendra couper votre programme.

  Note : Vous avez également remarqué que la plupart des fonctions graphiques sont (et c'est normal) sans type de retour (c'est à dire qu'elles ne renvoient rien). Néanmoins il existe pour "pict" et "pixl" des modes (en passant -1 en argument) qui "obligent" la fonction à renvoyer une valeur. Nous utiliserons un moyen pour extraire ces valeurs au C) mais l'explication détaillé de cette notion sera présentée au chapitre suivant.

C) Les fonctions de texte

  Les fonctions de texte de Vertel3 sont bien entendu moins nombreuses que celle graphiques. Elles permettent néanmoins d'accéder à des styles d'écritures inaccessibles en Ti-Basic. Pour illustrer ces fonctions nous coderons un petit programme assez basique :

prgm n°2 : beautext

Prgm
@ Initialisation des variables
Local s,str,d
"Savez vous que pour a > 0"->str
vertel("wdth",str,1,"","retr","d")
int((240-d[1])/2)->d
@ On sauve l'écran, l'efface et on affiche nos textes
vertel("save", "s" , 0, 0, 239, 127, "", "clrs", "", "text", str, seq(a,a,d-1,d+1), "->", {10,11,12}, 1, "", "text", str, d, 11, 1, 3, "", "prty", "∫(x/√(a^2+x^2),x)=√(x^2+a^2)", 50, 50, "", "paus", "", "pict", "s", 0, 0, 1, "", "stxt", "Ceci n'est pas un tuto de maths")
EndPrgm

  Ce programme assez basique et surtout inutile a l'avantage de présenter toutes les fonctions de texte de Vertel3. Il mesure d'abord la longueur en pixels de la chaîne str puis calcule la valeur en x pour la centrer à l'écran (si vous ne comprenez pas le "retr","d" c'est normal) nous l'expliquerons dans le chapitre suivant. On sauvegarde ensuite l'écran dans s puis on l'efface. On affiche alors str 10 fois (pour donner un nouveau style d'écriture) et un résultat mathématique a l'aide de la fonction "prty". Le programme attend enfin que l'utilisateur presse une touche pour restaurer l'écran de départ et afficher dans la Status Line "Ceci n'est pas un tuto de maths".

  La liste suivante des fonctions disponibles dans Vertel3 est extraite de la documentation de l'auteur. Vous remarquerez néanmoins que toutes ces fonctions ont été illustrées dans l'exemple ci dessus :

prty :: "expr", x, y [, mode] :: Affiche l'expression mathématique "expression" aux coordonnées x,y et en mode Pretty Print (le style utilisé dans l'écran HOME). Attention, même si "expr" est une chaîne, elle n'en reste pas moins une expression mathématique, par exemple "2x/5". Les modes sont 0 pour afficher normalement ("OR" logique), 1 pour écraser le fond, 2 pour afficher en négatif, 3 pour inverser ("OU" exclusif), 4 pour afficher en "ET" logique, et 5 pour affiché en pointillés (comme les menus désactivés d'AMS). Si le mode vaut -1, au lieu d'afficher l'expression, la fonction retourne ses dimensions en largeur et hauteur.

stxt :: "texte" :: Inscrit le texte "texte" dans la Status Line (la barre située en bas, contenant le dossier actif, les modes, etc...). Ce texte sera forcément écrit en petite police et aligné à gauche.

text :: "texte", x, y, taille, mode :: Inscrit le texte "texte" sur l'écran, aux coordonnées x,y. Il est possible d'utiliser les 3 tailles de police disponibles sur la Ti, à savoir 0 pour la petite police, 1 pour la moyenne, et 2 pour la grande. Les modes possibles sont 0 pour afficher normalement, 1 pour écraser le fond, 2 pour afficher en négatif, 3 pour inverser, et 4 pour afficher en pointillés.

wdth :: "texte", taille :: Retourne la largeur en pixels du texte "texte" avec la police de taille "taille". Il faut savoir que si les largeurs des lettres en police moyenne et grande sont fixes (respectivement 6 et 8 pixels), ce n'est pas le cas pour la petite police. Pour aligner correctement du texte il est donc pratique d'utiliser cette fonction qui indique exactement la largeur du texte à inscrire. Les hauteurs des caractères de taille 0, 1 et 2 sont respectivement 6, 8 et 10 pixels.


Chapitre V


Tutorial rédigé par Cyril Mottier aka Thor (orlin61@wanadoo.fr). Les mises à jours de ce tutorial sont disponibles sur mon site

>> Vos commentaires [0]

Pas de commentaires

Poster un commentaire


Seuls les membres peuvent poster des commentaires