Aller au menu - Aller au contenu

[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)
Avatar
Auteur : Lokk
Note : 16 / 20 (3 votes)
Visualisations : 8 886

Plus d'informations Plus d'informations
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 :p

Pré-requis :
Sommaire du tutoriel :
Icône du chapitre

Avant-propos

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 :

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é ! :p

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 ?

Le ViewWindow

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 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



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

Application



Tapez ceci dans un nouveau programme :

Code : Autre
1
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 :
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 !

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 !!! :p


Les Plot

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 :p )
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 :

Image utilisateur
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 !!! :p :p

Les Line

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 : Autre
1
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 : Autre
1
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 !
(La syntaxe de Plot est la même que celle de PlotOn heureusement !)

Code : Autre
1
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 :
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-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 !

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


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 , 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



Code : Autre
1
2
3
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



Code : Autre
1
2
3
ViewWindow 1,127,0,1,63,0

Vertical 110


Ce qui affiche à l'écran :
Image utilisateur
Une belle droite verticale ;)


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

Secret (cliquez pour afficher)
Du texte ! :)

Le Text

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


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 ! :p

Application



Code : Autre
1
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 :

Image utilisateur
Sympathique n'est ce pas ? ^^


Eh bien voilà ! C'en est fini pour le texte... C'é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 à commenter mon tuto !






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

En avant pour le QCM !!!

Q.C.M.

Quelle est la taille (en pixels) de l'écran de votre calculette ?
A quoi sert l'instruction ViewWindow ?
Quelle commande permet de supprimer un point ?
Que va afficher ce programme ?

Code : Autre
1
2
3
4
5
6
7
ViewWindow 1,127,0,1,63,0 

PlotOn 15,42

PlotOn 33,42

Line
Quelle instruction permet d'afficher du texte sur un graphique ?

Statistiques de réponses au QCM


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


Créé : le 01/12/2006 à 21:26:27
Modifié : le 22/08/2008 à 16:07:35
Avancement : 90%
Licence : Copie non autorisée

10 commentaires

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 158 Zéros connectés | Requêtes SQL 8 requêtes | Temps de génération de la page : Total (SQL) 0.1349s (0.1168s)