Version en ligne

Tutoriel : Graphismes sur Casio 35 et +

Table des matières

Graphismes sur Casio 35 et +
Avant-propos
Le ViewWindow
Les Plot
Les Line
Le Text

Graphismes sur Casio 35 et +

Avant-propos

Bonjour à tous !

Ce tuto s'adresse spécialement aux utilisateurs expérimentés de la célèbre calculatrice CASIO.
Si vous avez déjà quelques connaissances en programmation de Casio, ce tuto vous apportera tout le nécessaire pour effectuer des graphismes pour vos futurs jeux. :p

Avant-propos

Le ViewWindow

Avant de commencer à vous parler de programmation pure et dure, je vais vous dévoiler les possibilités offertes par votre calculatrice Casio en matière de graphismes pouvant être implantés dans vos programmes personnels.

Grâce à ce tuto, vous allez pouvoir faire plusieurs petites choses sympathiques :

Dans ce tuto, je vais vous expliquer une à une chacune de ces techniques et comment les utiliser (grâce à plusieurs exemples d'utilisation).
Suivra un petit TP, le genre de choses, chers Zéros, que vous adorez ! ;)

Avant de commencer

Si vous regardez l'écran de votre calculatrice de très très très très près, vous pourrez peut-être apercevoir qu'il est divisé en de tous petits carrés que l'on appelle PIXELS.

Quand votre calculatrice s'allume, certains de ces pixels "s'allument" pour former une image.
Tout bêtement ! :)

Maintenant, essayez de compter combien il y a de pixels en largeur et en hauteur...
Hum... je reviens, je vais me faire un p'tit café ! :p

Ça y est ? Vous avez réussi ? Comment ça, « non » ?
Bon allez, je vous file la réponse :

Largeur : 127 pixels
Hauteur : 63 pixels

C'est important de comprendre ce principe de pixels car ce sera très utile par la suite...
On commence ?


Le ViewWindow

Le ViewWindow

Avant-propos Les Plot

Cette étape est la plus importante !
Si vous avez fait un minimum de mathématiques, vous avez appris l'existence des repères géométriques.

Image utilisateur

Repère géométrique
(Par contre, je suis nul en dessin, hein ? ^^ )
Ce outil est indispensable lorsqu'on veut travailler avec des coordonnées, ce qui va être notre cas.
L'initialisation de l'écran consiste donc à créer un repère à l'aide de la commande ViewWindow. Simple, non ?

Allez, on se lance !

Syntaxe de ViewWindow

ViewWindowXmin, Xmax, Xscale, Ymin, Ymax, Yscale

Image utilisateur

Pour mieux comprendre toutes ces propriétés...

Application

Tapez ceci dans un nouveau programme :

ViewWindow 1,127,0,63,1,0

Vous pouvez donc tester votre programme maintenant !
Mais ce qui s'affiche n'est pas très glorieux. :(

En théorie votre écran devrait s'afficher comme ceci :

Image utilisateur

Bof, bof...

En fait votre ligne de code n'a fait que créer le repère et c'est normal que rien ne s'affiche. :p
Mais si vous ne faites pas correctement cette étape-là, impossible de dessiner quoi que ce soit plus tard !

On fait quoi maintenant ?

On dessine !!! :p


Avant-propos Les Plot

Les Plot

Le ViewWindow Les Line

Quésaco ??

Les Plot, ce sont en fait des points (à ne pas confondre avec pixels !).
Nous avons vu comment créer le repère et maintenant, nous allons afficher des points !
Excitant, non ? ^^

La seule chose qu'il faut savoir, c'est que comme en mathématiques, les points sont caractérisés par leurs coordonnées (X,Y).

Pour afficher un point, Casio propose 3 fonctions : PlotOn, PlotOff, PlotChg.

PlotOn

Permet d'afficher un point dans le repère.

PlotOff

Permet de supprimer un point du repère.

PlotChg

Si le point est déjà affiché, celui-ci disparaîtra.
Dans le cas contraire, le point apparaîtra !
(Très utilisé dans les jeux.)

Syntaxe d'utilisation

Ces 3 commandes sont accessibles en appuyant sur SHIFT / F4 / F6 / F1.
De plus leur syntaxe est exactement la même :
commande X,Y
Soit :

PlotOn 15,15
PlotOff 15,15
PlotChg 15,15

Application

Allez hop ! Un petit exercice pour voir si vous avez bien compris (c'est assez simple quand même :p ).
Créez un point de coordonnées (25,15).

ViewWindow 1,127,0,1,63,0
PlotOn 25,15

Voilà ce qui devrait s'afficher en exécutant le programme :

Image utilisateur

Chouette ! Un point !

Comme c'est exactement la même syntaxe pour les deux autres commandes, je ne m'y attarderai pas plus longtemps.
Si vous avez un problème quelconque, envoyez-moi un message privé. ^^

Et maintenant...

Les lignes !!! :p :p


Le ViewWindow Les Line

Les Line

Les Plot Le Text

Vous savez donc créer et supprimer des points.
Mais imaginons que vous vouliez créer une ligne complète.

Le code serait très long et fastidieux car il faudrait créer une centaine de points.
On va quand même essayer cette technique. ;)

Recopiez ce code sur votre calculatrice :

ViewWindow 1,127,0,1,63,0

PlotOn 25,15

PlotOn 26,15

PlotOn 27,15

PlotOn 28,15

PlotOn 29,15

PlotOn 30,15

PlotOn 31,15

PlotOn 32,15

PlotOn 33,15

Exécutez le programme.

Mes points s'affichent très lentement ! C'est normal ?

En effet, ne perdez pas de vue que votre calculatrice n'est pas un ordinateur !
Sa vitesse d'exécution est très faible par comparaison.

Alors comment faire pour créer une ligne rapidement ?

Il existe en fait plusieurs techniques pour afficher plus vite une ligne.
Casio met à disposition 2 commandes particulièrement efficaces : Line et F-Line.

Utilisation de Line

La fonction Line permet de relier deux points pour créer une ligne.
Essayons donc...

ViewWindow 1,127,0,1,63,0

PlotOn 25,15

PlotOn 33,15

Line

Exécutez le programme

Mais... ça ne marche pas ! Les deux points s'affichent mais je ne vois pas de lignes... :(

Eh oui... Line requiert de créer des points avec une autre fonction que PlotOn : Plot.
Ne me demandez pas pourquoi, c'est vrai que je trouve ça assez stupide. Peut-être pour faire une distinction avec PlotOn...

Bref, essayons !

(La syntaxe de Plot est la même que celle de PlotOn, heureusement !)

ViewWindow 1,127,0,1,63,0

Plot 25,15

Plot 33,15

Line

Voilà ce qui devrait s'afficher :

Image utilisateur

Ouahh !! Une ligne !

Utilisation de F-Line

F-Line possède un avantage énorme sur Line.
En effet, je vous donne sa syntaxe et vous comprendrez pourquoi immédiatement ! :p

Syntaxe d'utilisation

F-LinePt1X,Pt1Y,Pt2X,Pt2Y
L'utilisation de Line nécessite 3 lignes alors que F-Line permet de créer les deux points et de les relier immédiatement en une seule ligne !

Application

Faites le même programme que pour Line. À vous de jouer ! ^^

ViewWindow 1,127,0,1,63,0
F-Line 25,15,35,15

Image utilisateur

Comme Line, F-Line affiche une ligne

Voilà à peu près tout ce qu'il faut savoir sur la création de lignes.

Je vais finir par deux fonctions bien utiles : Horizontal et Vertical.
Elles permettent de tracer une ligne sur toute la longueur (ou hauteur) de l'écran.

Horizontal

Horizontal permet de tracer une ligne sur la largeur de l'écran.

Syntaxe d'utilisation

Horizontal positionY

Application

ViewWindow 1,127,0,1,63,0

Horizontal 15

Ce qui affiche à l'écran :

Image utilisateur

Une belle droite horizontale ;)

Vertical

Vertical permet de tracer une ligne sur la hauteur de l'écran.

Syntaxe d'utilisation

Vertical positionX

Application

ViewWindow 1,127,0,1,63,0

Vertical 110

Ce qui affiche à l'écran :

Image utilisateur

Une belle droite verticale ;)

Vous êtes devenu des pros des lignes !
Et tout de suite :

Du texte ! :)


Les Plot Le Text

Le Text

Les Line

Comment ça, on peut afficher du texte sur un graphique ?

La réponse est oui ! Sinon je ne vous en parlerais pas. :p

Et c'est même beaucoup plus esthétique que d'afficher un texte "normal" !
Un deuxième avantage est que la fonction utilisée est très rapide.

Pour cela, Casio nous propose la fonction Text.

Syntaxe d'utilisation

Text PxlX,PxlY,"votre texte"

Principe de fonctionnement

Il faut savoir que cette fonction est un peu spéciale, car elle n'utilise pas le système de coordonnées (vu jusqu'ici)
mais le système de pixels (j'en ai un peu parlé dans l'Avant-propos).

Un p'tit schéma vaut mieux qu'un long discours, non ? ;)

Image utilisateur

Principe des pixels

On essaye ? C'est parti ! :p

Application

ViewWindow 1,127,0,1,63,0

Text 15,30,"Bonjour les ZEROS !"

Exécutez le programme
Voilà ce qui devrait s'afficher :

Image utilisateur

Sympathique n'est ce pas ? ^^

Eh bien voilà ! C'en est fini pour le texte... Ce n'était pas si dur, hein ? :p
Quand à moi, je vais devoir vous quitter, car je dois continuer ce tuto, qui, j'espère vous aura plu.

N'hésitez pas à le commenter !

... ... ... ... ... Rflll... Rhhflll... Zzzz... hmm... Hein ? Vous voulez quoi, encore ? ... un QCM ?
Je suis trop gentil, tiens... :D

En avant pour le QCM !!!

J'espère vous avoir aidés ! :p
Sur ce, bonne prog !


Les Line