Rotation d’un point autour d’un centre

Comment déterminer les coordonnées de l’image d’un point par une rotation autour d’un autre point ?
Rotation d'un point autour d'un centre

La solution

La rotation d’un point B autour d’un point O peut être assimilée à une succession de rotations dans le repère de centre O :
  • rotation d’un point A d’angle α autour de l’origine du repère d’origine O pour parvenir en B;
  • rotation du point B d’angle β autour de l’origine du repère d’origine O pour parvenir en C.
Rotation d'un point autour d'un centre
Partant, il est possible d’appliquer les formules de combinaison de rotations dans un repère dont l’axe des abscisses est orienté de gauche à droite et dont l’axe des ordonnées est orienté du haut vers le bas.

Le code JavaScript

En JavaScript, la solution se traduit par le code suivant :
/*------------------------------------------------------------------------------
Retourne l'image d'un point par une rotation (repère X de gauche à droite, Y du
haut vers le bas).

ENTREE :
	M		Point à transformer
	O		Point centre de la rotation
	angle	Angle (en degrés)

SORTIE :
	Image de M par la rotation d'angle angle autour de O (les coordonnées ne
	sont pas entières).
------------------------------------------------------------------------------*/

function rotate (M, O, angle) {
	var xM, yM, x, y;

	angle *= Math.PI / 180;
	xM = M.x - O.x;
	yM = M.y - O.y;
	x = xM * Math.cos (angle) + yM * Math.sin (angle) + O.x;
	y = - xM * Math.sin (angle) + yM * Math.cos (angle) + O.y;
	return ({x:Math.round (x), y:Math.round (y)});
}

L’exemple

Cliquez ici pour accéder à une page de test minimaliste qui utilise SVG. Vous pourrez visualiser le code et le récupérer pour travailler avec.

Les maths

A la base, il faut considérer la situation à l’échelle du cercle trigonométrique, c’est-à-dire dans le repère dont l’origine est le centre d’un cercle de rayon 1, et où le sens de rotation d’un angle positif est à l’inverse du sens des aiguilles d’une montre (le sens trigonométrique) :
Rotation d'un point autour d'un centre
Dans ce repère, les coordonnées d’un point figurant sur le cercle sont par définition d’abscisse cos (α) et -sin (α) (noter le signe négatif, car l’axe des ordonnées est ici orienté vers le bas).
Ceci étant admis, il faut revenir à la situation initiale. Dans cette situation, le point B est l’image d’un point A par rotation d’angle α autour d’un point O. Dans le repère de centre O, ses coordonnées s’écrivent donc :
  • xB – xO = R * cos (α)
  • yB – yO = – R * sin (α)
Par ailleurs, le point C est l’image du point B par rotation d’angle β autour d’un point O. Ses coordonnées s’écrivent donc :
  • xC = R * cos (α + β) + xO
  • yC = – R * sin (α + β) + yO
Il faut ici appliquer des formules de décomposition du cosinus et du sinus :
  • cos (α + β) = cos (α) * cos (β) – sin (α) * sin (β)
  • sin (α + β) = cos (α) * sin (β) + sin (α) * cos (β)
Ce qui donne :
  • xC = R * cos (α) * cos (β) – R * sin (α) * sin (β) + xO
  • yC = – R * cos (α) * sin (β) – R * sin (α) * cos (β) + yO
Et donc :
  • xC = (xB – xO) * cos (β) + (yB – yO) * sin (β) + xO
  • yC = – (xB – xO) * sin (β) + (yB – yO) * cos (β) + yO
Rotation d’un point autour d’un centre