3.1 COORDONNÉES

 

 

INTRODUCTION

 

Nous avons déjà fait nos premières expériences de dessin sur ordinateur avec la tortue. La tortue recèle cependant quelques limitations auxquelles ce chapitre tentera de pallier avec une bibliothèque de création de graphiques plus flexible.

CONCEPTS DE PROGRAMMATION: Coordinate graphics, Cartesian coordinate system

 

 

OUVRIR LA FENÊTRE DE GRAPHIQUES

 

La bibliothèque que nous allons utiliser, respectivement la fenêtre de graphiques, s’appellent GPanel. Cette bibliothèque de programmation graphique est déjà installée par défaut dans TigerJython mais il est nécessaire de l’importer au début du programme par une instruction import. Il est ensuite possible d’utiliser makeGPanel() pour créer une nouvelle fenêtre de graphiques.

from gpanel import *
makeGPanel(-3, 7, -4, 6)

Jusqu’ici, le programme ne fait rien de bien excitant puisqu’il ne fait que d’afficher une fenêtre vide qu’on peut fermer. La fenêtre de graphiques est de forme carrée et utilise un repère cartésien xOy que l’on connaît bien des mathématiques :

Dans l’exemple ci-dessus, on spécifie les plages des coordonnées x et y avec les quatre paramètres -3, 7, -4, et 6. Le premier, -3, indique l’abscisse du bord gauche de la fenêtre, 7 l’abscisse de son bord droit, -4 l’ordonnée du bord inférieur et 6 celle de son bord supérieur.

 

 

MEMENTO

 
On peut créer une fenêtre avec makeGPanel(). On indique la plage du repère cartésien que recouvre la fenêtre avec les quatre paramètres : makeGPanel(xmin, xmax, ymin, ymax). On peut également spécifier le titre de la fenêtre en guise de premier paramètre:
makeGPanel(title, xmin, xmax, ymin, ymax)

 

 

DESSINER DES LIGNES

 

Une fois la fenêtre ouverte, on peut dessiner librement à l’intérieur à l’aide d’une grande panoplie de fonctions. La fonction line() permet par exemple de dessiner des lignes et la fonction setColor()

permet de changer la couleur utilisée. On peut donc créer le triangle coloré ci-contre avec le programme indiqué plus bas.

Pour chaque ligne à dessiner, on indique les coordonnées cartésiennes du point de départ et du point d’arrivée du segment. Les sommets du triangle devraient avoir les coordonnées suivantes : (1, -1) (5, -1) (3, 3). Bien entendu, on ne voit apparaître un triangle que dans la mesure où le système de coordonnées est choisi judicieusement. Pour obtenir des images non déformées, il est nécessaire que les deux axes utilisent la même longueur par unité. Pour ce faire, il faut que xmax-xmin = ymax-ymin puisque la fenêtre est carrée.
 

 

from gpanel import *

makeGPanel("My window", 0, 6, -2, 4)


lineWidth(3)
setColor("red")
line(1, -1, 5, -1)
setColor("green")
line(5, -1, 3, 3)
setColor("blue")
line(3, 3, 1, -1)
Sélectionner le code source (Ctrl+C pour copier, Ctrl+V pour coller)

 

 

MEMENTO

 

On peut indiquer la largeur des traits en pixels avec la fonction lineWidth().

 

 

CERCLES ET RECTANGLES

 

GPanel n’est pas limité au dessin de lignes : cercles, ellipses, rectangles, triangles et arcs d’ellipses sont également de la partie. GPanel peut même écrire du texte. On peut dessiner un disque plein  de rayon radius avec la fonction fillCircle(radius). Mais avant de dessiner un disque, il faut positionner le curseur de dessin avec move(x,y) pour définir les coordonnées du centre du disque.

fillRectangle(length, width) va dessiner un rectangle de largeur et de longueur indiquées et centré à la position du curseur de dessin. Le programme suivant dessine plusieurs carrés et disque en utilisant une boucle while.		  

 

from gpanel import *

makeGPanel(0, 20, 0, 20)

setColor("red")
x = 2
y = 2
while y < 20:
    move(x, y)
    fillCircle(1)
    move(x, 20 - y)
    fillRectangle(2, 2)
    x = x + 2
    y = y + 2
Sélectionner le code source (Ctrl+C pour copier, Ctrl+V pour coller)

 

 

MEMENTO

 

On peut dessiner de nombreuses figures différentes avec GPanel. Voici les fonctions les plus importantes :

 
 

point(x, y)

line(x1, y1, x2, y2)

rectangle(width, height)

fillRectangle(width, height)

rectangle(x1, y1, x2, y2)

fillRectangle(x1, y1, x2, y2)

fillTriangle(x1, y1, ..., y3)

circle(r)

fillCircle(r)

ellipse(a, b)

fillEllipse(a, b)

arc(r, a, b)

text("t")

move(x, y)

Un point aux coordonnées x, y

Un segment de droite défini par ses extrémités

Un rectangle (vide)

Un rectangle plein

Un rectangle vide défini par deux sommets

Un rectangle plein définir par deux sommets

Un triangle défini par ses trois sommets

Un cercle (vide) de rayon r

Un disque (plein) de rayon r

Une ellipse d’axes a et b

Une ellipse pleine

Un arc d’ellipse de rayon r et d’axes a et b

Écrire le texte t à la position du cureur

Modifier la position du curseur de dessin
 

Pour les cercles, arcs, ellipses, texte et rectangles qui sont uniquement définis par leur longueur et leur largeur, il est nécessaire de définir au préalable leur positionnement en plaçant le curseur de dessin avec la fonction move().

GPanel connaît les couleurs X11. Cette palette comporte quelques dizaines de couleurs auxquelles sont associés es noms précis disponibles sur Internet à l’adresse  http://cng.seas.rochester.edu/CNG/docs/x11color.html. On peut choisir n’importe laquelle de ces couleurs avec setColor(color).

 

 

EXERCISES

 

1.


Dessiner le visage ci-dessous :

2.


À quoi un arc-en-ciel ressemble-t-il ? Demander à l’ordinateur d’en dessiner un. Utiliser la fonction circle(r) de sorte qu’uniquement la partie supérieure du cercle soit visible.