Agir sur le système de coordonnées

PyProcessing propose 3 fonctions très importantes (mais relativement complexes à prendre en main) :

  • la fonction translate() qui permet de translater les axes de coordonnées.

  • la fonction rotate() qui permet de faire faire une rotation aux axes de coordonnées.

  • la fonction scale() qui permet de modifier l'échelle.

Il faut bien que vous compreniez que ces fonctions agissent sur le système de coordonnées et pas directement sur les dessins.

La fonction rotate()

Commençons par la fonction rotate() qui permet de tourner le système de coordonnées d'un certain angle. Cette fonction prend un seul paramètre : l'angle de rotation (en radian, la fonction radians() permet de convertir les degrés en radian).

Au départ, le système de coordonnées est disposé ainsi :

Appliquons la fonction rotate() :

1
rotate(alpha)

Le système de coordonnées est à présent disposé ainsi :

Exemple

Saisissez et testez ce code

1
def setup():
2
    size(200,200)
3
    background(255,255,255)
4
    fill(255,255,0)
5
    rotate(radians(20))
6
    rect(60,50,20,20)
7
8
9
def draw():
10
    pass
ComplémentQuelques explications :
sans le rotate(), nous aurions obtenu la figure
mais en appliquant le rotate(), nous avons fait tourner notre système de coordonnées. Du coup, notre carré s'est déplacé en tournant de 20 degrés dans le sens des aiguilles d'une montre autour de l'origine de notre repère.
Attention
Saisissez et testez ce code
1
def setup():
2
    size(200,200)
3
    background(255,255,255)
4
    fill(255,255,0)
5
    rect(60,50,20,20)
6
    rotate(radians(20))
7
        
8
9
def draw():
10
    pass
Comme vous pouvez le constater, le rotate() n'a aucune action sur un élément déjà dessiné au moment de son application.
Exercice 10
Créez un programme permettant d'obtenir ceci :
La fonction translate()
Comme son nom l'indique, a fonction translate() permet de faire faire une translation au système de coordonnées :
Au départ, le système de coordonnées est disposé ainsi :
1
translate(dx,dy)
En appliquant le translate(), nous avons fait glisser notre système de coordonnées.
Exemple
Saisissez et testez ce code
1
def setup():
2
    size(200,200)
3
    background(255,255,255)
4
    fill(255,255,0)
5
    rect(60,50,20,20)
6
    translate(80,30)
7
    rect(60,50,20,20)
8
        
9
10
def draw():
11
    pass
Le translate a bien l'effet de glissement de 80 pixels sur la droite et 30 pixels vers le bas attendu sur le carré :
avant : 
après : 
Mise à l'échelle avec scale()
Si vous avez compris le fonctionnement de la translation et de la rotation, la fonction scale() ne devrait pas vous poser de difficultés.
Saisissez et testez ce code
1
def setup():
2
    size(200,200)
3
    background(255,255,255)
4
    fill(255,255,0)
5
    rect(60,50,20,20)
6
    scale(2)
7
    rect(60,50,20,20)
8
        
9
10
def draw():
11
    pass
scale() est l'équivalent d'un zoom (ou d'une loupe) si son argument est supérieur à un. Je vous laisse deviner l'effet d'un argument compris entre 0 et 1.
A vous de jouer
Exercice 11 : L'astérisque
Créez un programme permettant d'obtenir ceci : (le programme doit faire 10 lignes maximum).
Indications : 
  • Le canevas mesure 200x200
  • Chaque rectangle mesure 50x10
push et pop
La fonction pushMatrix() permet d'effectuer une sauvegarde de l'état du système de coordonnées au moment où cette fonction est exécutée. popMatrix() restaure cette sauvegarde.
Saisissez et testez ce code :
1
def setup():
2
    size(200,200)
3
    background(255,255,255)
4
    translate(80,30)
5
    fill(255,0,0)
6
    rect(60,50,20,20)
7
    pushMatrix()
8
    translate(0,50)
9
    fill(0,255,0)
10
    rect(60,50,20,20)
11
    popMatrix()
12
    fill(0,0,255)
13
    rect(80,50,20,20)
14
15
def draw():
16
    pass
ComplémentQuelques explications
Comme vous devez le constater le carré bleu n'a pas bénéficié de la même translation vers le bas que le carré vert. Le popMatrix() a en effet annulé cette translation vers le bas : toutes les transformations comprises entre un pushMatrix() et un popMatrix() sont annulées au moment du popMatrix().