[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Programmation
> Calculatrices
> Casio
> Graphismes sur Casio 35 et +
> Lecture du tutoriel
Graphismes sur Casio 35 et +
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Bonjour à tous !
Ce tuto s'adresse spécialement aux utilisateurs expérimentés de la célèbre calculette 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
Pré-requis :
- Avoir les bases de la programmation en CASIO (Je vous conseille le tuto de Deltod très bien fait !)
- Posséder une CASIO 35+ minimum
Avant de commencer à vous parler de programmation pure et dure, je vais vous dévoiler les
possibilitées offertes par votre calculette 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 :
- afficher du texte
- créer des points / droites
- créer des courbes en tout genre
- sauvegarder vos graphismes
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 chose, chers Zéros, que vous adorez !
Je le répète : ce tuto est réservé aux personnes connaissant un minimum de programmation en CASIO !
Sinon vous serez totalement perdus...
Avant de commencer
Si vous regardez l'écran de votre calculettre 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 calculette 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é !
Ca y' est ? Vous avez réussi ? Comment ça non !
Bon allez je vous file la réponse :
Secret (cliquez pour afficher)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 ?
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.
Repère géométrique
(par contre je suis nul en dessin hein ?

)
Ce outil est indispensable lorsque 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
ViewWindow Xmin, Xmax, Xscale, Ymin, Ymax, Yscale
- ViewWindow : SHIFT / F3 / F1
- Xmin : valeur numérique minimum de l'axe des abscisses.
- Xmax : valeur numérique maximum de l'axe des abscisses.
- Xscale : valeur numérique du "pas" sur l'axe des abscisses.
- Ymin : valeur numérique minimum de l'axe des ordonnées.
- Ymax : valeur numérique maximum de l'axe des ordonnées.
- Yscale : valeur numérique du "pas" sur l'axe des ordonnées.
Pour mieux comprendre toutes ces propriétés...
Application
Tapez ceci dans un nouveau programme :
Code : Autre1
| ViewWindow 1,127,0,63,1,0 |
N'oubliez pas d'appuyer sur EXE pour faire apparaitre la petite flèche à la fin de la ligne
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 :
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

Mais si vous ne faites pas correctement cette étape là, impossible de dessiner quoi que ce soit plus tard !
Comme notre écran comporte 127 * 63 px, nous garderons toujours ce repère idéal par la suite.
On fait quoi maintenant ?
Secret (cliquez pour afficher)On dessine !!!

Késako ??
Les
Plot, ce sont en fait des
points. (à ne pas confondre avec pixels !)
Nous avons vu comment créer le repère et maintenant on va
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 disparaitra.
Dans le cas contraire, le point apparaitra !
(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

)
Créez un point de coordonnées (25,15)
Secret (cliquez pour afficher)ViewWindow 1,127,0,1,63,0
PlotOn 25,15
Voilà ce qui devrait s'afficher en éxécutant le programme :
Chouette ! Un point !
Comme c'est exactement la même syntaxe pour les deux autres commandes, je ne m'attarderai pas plus longtemps dessus.
Si vous avez un problème quelconque,
envoyez-moi un message privé.
Et maintenant...
Secret (cliquez pour afficher)Les lignes !!!
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 :
Code : Autre1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| 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 calculette
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...
Code : Autre1
2
3
4
5
6
7
| ViewWindow 1,127,0,1,63,0
PlotOn 25,15
PlotOn 33,15
Line |
Exécutez le programme
Mais... ca 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 !
- Plot : SHIFT / F4 / F6 / F1
- Line : SHIFT / F4 / F6 / F2 / F1
(La syntaxe de Plot est la même que celle de PlotOn heureusement !)
Code : Autre1
2
3
4
5
6
7
| ViewWindow 1,127,0,1,63,0
Plot 25,15
Plot 33,15
Line |
Voilà ce qui devrait s'afficher :
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 !
Syntaxe d'utilisation
F-Line Pt1X,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 !
- F-Line : SHIFT / F4 / F6 / F2 / F2
Application
Refaites le même programme que pour Line. A vous de jouer !
Secret (cliquez pour afficher)ViewWindow 1,127,0,1,63,0
F-Line 25,15,35,15
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 ,
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
- Horizontal : SHIFT / F4 / F6 / F5
Application
Code : Autre1
2
3
| ViewWindow 1,127,0,1,63,0
Horizontal 15 |
Ce qui affiche à l'écran :
Une belle droite horizontale 
Vertical
Vertical permet de tracer une ligne sur la hauteur de l'écran.
Syntaxe d'utilisation
Vertical positionX
- Vertical : SHIFT / F4 / F6 / F4
Application
Code : Autre1
2
3
| ViewWindow 1,127,0,1,63,0
Vertical 110 |
Ce qui affiche à l'écran :
Une belle droite verticale 
Vous êtes devenu un pro des lignes !
Et tout de suite :
Secret (cliquez pour afficher)Du texte !

Comment ça on peut afficher du texte sur un graphique ?
La réponse est
oui ! Sinon je ne vous en parlerais pas
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"
- Text : SHIFT / F4 / F6 / F6 / F2
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 ?
Principe des pixels
Si vous regardez attentivement ce schéma, vous remarquerez que les X se retrouvent sur l'axe des ordonnées
et les Y sur l'axe des abscisses.
On essaye ? C'est parti !
Application
Code : Autre1
2
3
| ViewWindow 1,127,0,1,63,0
Text 15,30,"Bonjour les ZEROS !" |
Exécutez le programme
Voilà ce qui devrait s'afficher :
Sympathique n'est ce pas ? 
Eh bien voilà ! C'en est fini pour le texte... C'était pas si dur hein ?

Quand à moi, je vais devoir vous quitter, car je dois continuer ce tuto, qui, j'espère vous aura plu.
N'hésitez pas à commenter mon tuto !
............... Rflll... Rhhflll.... Zzzz.... hmm... Hein ? Vous voulez quoi encore ? ..... un QCM ?
Je suis trop gentil tiens..
En avant pour le QCM !!!
J'espère vous avoir aidé !

Sur ce, bonne prog !