Aller au menu - Aller au contenu

Icône Graphismes sur Casio 35 et +

Par Avatar Lokk
Mise à jour : 24/02/2009
56 visites depuis 7 jours, classé 662/786
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

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
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

Avant-propos

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 :
  • 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 choses, 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 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 :

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 ?
Retour en haut

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



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.

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 apparaître 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 la résolution de notre écran est de 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

Retour en haut

Les Plot

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

Secret (cliquez pour afficher)
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...
Secret (cliquez pour afficher)
Les lignes !!! :p :p
Retour en haut

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

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... ç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 !
  • 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 : 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 !

  • F-Line : SHIFT / F4 / F6 / F2 / F2

Application



Faites le même programme que pour Line. À 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 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

  • Horizontal : SHIFT / F4 / F6 / F5

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

  • Vertical : SHIFT / F4 / F6 / F4

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 des pros des lignes !
Et tout de suite :

Secret (cliquez pour afficher)
Du texte ! :)
Retour en haut

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"

  • 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 ? ;)

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... 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 !!!
Retour en haut

Q.C.M.

Quelle est la taille (en pixels) de l'écran de votre calculatrice ?
À 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

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

Partager

Retour en haut
11 commentaires pour "Graphismes sur Casio 35 et +"
Note moyenne : 2.60 / 4 (5 votes)
Pseudo Commentaire
Hors ligne @tl@ntis # Posté le 20/01/2008 à 10:55:24

Ville : Bernieres sur mer
Pays : France métropolitaine
Études : ENSICAEN

 merci pour ce beau tuto je te met 17 car tu m'a apris beaucoup de choses ;)
Hors ligne lorenzo11 # Posté le 31/01/2008 à 13:37:45
Errare Humanum Est
Avatar
close

Ville : Angers
Pays : France métropolitaine

 Bon tutoriel, ça m'a permis de réviser :-°

Par contre, sauf erreur de ma part (ou incompréhension o_O ) Il me semble qu'il a un problème au début:
Citation : Lokk
Tapez ceci dans un nouveau programme :

Code : Autre - Afficher / masquer les numéros de ligne
  1. ViewWindow 1,127,0,63,1,0

Comme notre écran comporte 127 * 63 px, nous garderons toujours ce repère idéal par la suite.


Il n'y aurait pas un inversion malencontreuse du "63" et du "1" ? 1 est le minimum et 63 le maxi non ?
En effet, par la suite :
Citation : Lokk
Code : Autre - Afficher / masquer les numéros de ligne
  1. ViewWindow 1,127,0,1,63,0
  2. PlotOn 25,15


Voili voilou...soit je n'ai rien compris soit il y a une petite faute !

EDIT : Je crois que j'ai compris (en croisant les Tutos :lol: ) Les deux fonctionnent évidemment mais celui avec le "63" en minimum permet d'avoir le même repère que la fonction "Text" Voilà!
Errare Humanum Est
Aidez les débutants, merci !
Un site actif pour la programmation sur calculatrice en Basic, C++ et ASM: http://www.planet-casio.com/Fr/ Aidez-nous !
Image utilisateur
 
Hors ligne Timst # Posté le 13/03/2008 à 18:02:47

Ville : Nantes
Pays : France métropolitaine

 Omg je m'en était pas rendu compte mais ce tuto reprend un bonne partie de ce que j'ai écris dans le mien qui vient d'être validé, s'malin ca.

Enfin bon le tient a l'avantage de parler de l'integration des graphismes dans le programme et le mien permet d'attaquer le dessin immédiatement, les deux se complètent voir se précisent ^^

Bon tuto par ailleurs :)
Hors ligne pl-94 # Posté le 05/11/2008 à 16:36:36

J'ai un gros problème sur ce tuto, c'est que la phrase magique du début : ViewWindow 1,127,0,63,1,0, m'affiche un 0...

Je pense mettre tromper dans mes réglages, quelqu'un peut svp ?
Mon tutoriel : http://www.siteduzero.com/tutoriel-3-2 [...] vascript.html

FLUINET : dynamisez vos sites web :)
Projet Open Source - Version 0.1 stable - Développement sur http://fluinet.1fr1.net/ - Chantiers en cours
Venez y participer !


 
Hors ligne Lolilolight # Posté le 12/08/2009 à 21:45:17
Oui, moi aussi jtm Fayden!
Avatar
Groupe : Bannis

Ca me rappelle trop des souvenir, j'avais fait un pendu, une machine à sous, un puissance4, et même un jeux d'échec, ils sont tjs sur ma casio mdrrr.
Je ne poste plus sur ce site pour certaines raisons personnelles. (Ainsi je me ferai plus sanctionner par les modos quand j'interviens sur des topics dont les auteurs ne sont pas sérieux.)
 

Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.