Calcul de rotation

[Argol]

Bonjour à tous,

En fait mon problème serait plus d'ordre mathématique,





Uploaded with ImageShack.us

Je cherche une formule pour quelque soit le degré appliquer à la rotation du rectangle en son centre je retrouve les coordonnée x2,y2 d'origine (c'est à dire à degré 0 (soit le point A)) à partir des coordonnées (x,y) ayant subit la rotation d'angle alpha. .



Par exemple soit mon point A1 (x=456,y=290), j'applique une rotation en son centre de 10 degré les coordonnés de A passe à A2 (X=455,Y=305), je cherche la formule pour me redonner les coordonnée d'origine A1 (x=456,y=290) à partir de A2 (X=455,Y=305).


ou encore :

Angle 0 (x,y)
(456,293)

Angle 10 (x,y)
(454,303)

Angle 20 (x,y)
(454,312)


Angle 70 (x,y)
(477,352)






Merci de votre aide.

[SpaceFrog]

encore un exercice de trigo ...
Faut pas juste recopier l'énoncé ...

[Argol]

oui, c'est un problème de trigo, mais pas un énoncé je développe en jquery un module pour placer des calques sur une image et je bloque sur un problème lors de la rotation...
maintenant si personne ne veut m'aider tant pis...merci quand meme
Pour information voici mon code actuel

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
radian=degree*(Math.PI/180);
y2=	( $("input:#x_"+itemid).val() * Math.cos(radian) - $("input:#y_"+itemid).val() * Math.sin(radian) );				
x2=( $("input:#x_"+itemid).val() * Math.sin(radian) + $("input:#y_"+itemid).val() * Math.cos(radian) ) ;
 
 
 
console.log('--x--'+  $("input:#x_"+itemid).val());
console.log('--y--'+$("input:#y_"+itemid).val());
 
console.log('--x2--'+  x2);
console.log('--y2--'+y2);

[p3ga5e]

La matrice de rotation en 2D est la suivante :

Code :

1
2
x2 = (cos(a) * x1) – (sin(a) * y1) 
y2 = (sin(a) * x1) + (cos(a) * y1)

Donc dans ta transformation de point tu semble inverser les coordonnées!

Par exemple soit mon point A1 (x=456,y=290), j'applique une rotation en son centre de 10 degré les coordonnés de A passe à A2 (X=455,Y=305)

Par contre tes valeurs attendues ne semblent pas juste, d’où les sors-tu ?

Code :

1
2
A1 = {456, 290}
A2 = { cos(10) * 456 –  sin(10) *290 ,  sin(10) *456 + cos(10) *290 } = { 398.71, 364.77}

La rotation d’un point s’effectue toujours par rapport au point {0, 0}, le centre du repère.
mais peut-être cherche tu a réorienter ce point par rapport un point de pivot ?

[Willpower]

oui, comme le dit p3ga5e, il manque une donnée dans ton énoncé : le rayon de l'image (ou les coordonnées du centre de celle-ci).

[Argol]

Merci de votre aide,exactement j'ai également les coordonnée du centre à prendre en compte !
Car le point d'origine n'est pas à (0,0).
En fait je cherche à retrouver les coordonnées du point d'origine à partir des coordonnées d 'un point.

[p3ga5e]

Je ne cible pas vraiment ton problème.
Mais une chose est sur, En infographie l’utilisation de Matrices et Vecteurs est inévitable.
Une Matrice 3x3 te permet d’effectuer une transformation 2d ( Rotation, translation et scale ) d’un point 3x1 ( coordonnée homogène [ x, y , 1] ), te permettant ainsi, d’exprimer un point par rapport a un nouveau repère par un simple produit matriciel :

Code :

A2 = M * A1

En calculant la matrice inverse il possible de retrouver ton point d’origine, ou du moins t’en approcher (problème de précision sur les virgules flottante):

Code :

Minv * A2 = A1

Voila pour la théorie, mais en pratique, la plupart des moteurs de rendu vectoriel, utilisent un arbre, ou chaque nœud contient un changement de repère sous la forme d’une matrice local, les points doivent être exprimé dans un repère local, et c’est le repère que l’on oriente.

Le moteur de rendu vectoriel se charge de parcourir cet arbre en profondeur en multipliant toutes les matrices locales à chaque nœud et effectuant lui-même les transformations sur tes sommets. Enfin, exception faite, de WebGL ou tu dois te coder ce parcourt d’arbre pour multiplier les matrices en javascript et écrire un shader pour la transformation des points.