Rotation

En plus de pouvoir déplacer la grille, vous pouvez aussi la faire pivoter à l'aide de la fonction rotate(). Cette fonction a besoin d'un argument, qui est le degré de l'angle de la rotation.

Dans la version de ProcessingJS qu'on utilise à Khan Academy, les fonctions qui manipulent des angles utilisent par défaut une mesure en degrés, mais elles peuvent aussi être configurées pour utiliser les radians, qui est l'unité standard de mesure des angles. Si vous préférez utiliser les radians, vous pouvez le définir au début de votre programme en écrivant angleMode = "radians";.

Quand on utilise les degrés, un tour complet du cercle fait 360°. Quand on utilise les radians, un tour complet fait 2π radians. Voici un schéma qui rappelle les mesures en degrés et en radians, dans un cercle :

Vous voulez réviser ou apprendre les mesures des angles ? Vous pouvez parcourir notre cours "Mesurer les angles en degrés" ici, à Khan Academy.

Essayons quelque chose de simple, effectuer une rotation de 45 degrés sur un carré :

Hum... que s'est-il passé ? Comment se fait-il que le carré se soit déplacé et se retrouve coupé ? La réponse est : le carré ne s'est pas déplacé. C'est la grille qui a pivoté. Voici ce qui s'est réellement produit. Comme vous pouvez le voir, sur le système de coordonnées, après qu'il ait pivoté, le carré a toujours son coin supérieur gauche à (40, 40).

La façon correcte d'effectuer une rotation sur le carré est de :

Voici le programme qui fait pivoter le carré de la bonne manière. Remarquez les différences dans le code : le programme fait translate(40, 40); puis rect(0, 0, 40, 40); au lieu de juste rect(40, 40, 40, 40);.

Cet article est une adaptation des Transformations 2D par J David Eisenberg, utilisé sous licence Creative Commons Attribution-NonCommercial-ShareAlike.