Accueil | Tutoriaux

Tutoriaux : Projection d'un point sur une droite
 

1. Introduction

Depuis quelques temps je parcours le forum du site flash-france à la recherche d'idées de tutoriaux à réaliser.

J'ai trouvé mon bonheur avec le problème suivant : j'ai 4 points O, A, B et M qui peuvent se déplacer librement sur la scène et je veux placer le point I de la droite (OA) tel que les droites (IM) et (OB) soient parallèles. En termes mathématiques, I est le projeté du point M sur la droite (OA) parallèlement à la droite (OB).

De même, on veut placer le point J projeté du point M sur la droite (OB) parallèlement à la droite (OA).

Sur l'animation ci-contre vous pouvez déplacer les points O, A, B, M et observer le placement des points I et J.
2. Dans la bibliothèque et sur la scène
 
Créez dans votre bibliothèque un clip quelconque, par exemple, un cercle de 10 pixels de diamètre. Placez n'importe où sur la scène principale 6 occurrences de ce clip. En utilisant le panneau "propriétés", nommez ces occurrences respectivement "ptO", "ptA", "ptB", "ptM", "ptI" et "ptJ". Veillez à ce que les clips nommés ptO, ptA et ptB ne soient pas alignés...
 
3. Le code et l'animation obtenue
 
Dans le panneau action de l'image n°1 de la scène principale, collez le code suivant qui permettra de placer les occurrences ptI et ptJ. 

var xM = ptM._x-ptO._x;
var yM = ptM._y-ptO._y;
var xA = ptA._x-ptO._x;
var yA = ptA._y-ptO._y;
var xB = ptB._x-ptO._x;
var yB = ptB._y-ptO._y;
 
var detS = xA*yB-xB*yA;
 
var newxM = (yB*xM-xB*yM)/detS;
var newyM = (-yA*xM+xA*yM)/detS;
 
ptI._x = ptO._x+xA*newxM;
ptI._y = ptO._y+yA*newxM;
 
ptJ._x = ptO._x+xB*newyM;
ptJ._y = ptO._y+yB*newyM;
 
4. Le code avec ses commentaires
 
Dans Flash l'origine du repère est le point qui se trouve en haut à gauche de la scène. Avec les lignes de code ci-dessous nous calculons les coordonnées des points M, A et B dans le repère (O, i, j). Attention : originalité de Flash j est orienté vers le bas (les points dont l'ordonnée est négative se trouvent au dessus de la scène et sont donc invisibles dans l'animation publiée !).
var xM = ptM._x-ptO._x;
var yM = ptM._y-ptO._y;
var xA = ptA._x-ptO._x;
var yA = ptA._y-ptO._y;
var xB = ptB._x-ptO._x;
var yB = ptB._y-ptO._y;
 
Pour parvenir à placer I et J, de nombreuses méthodes mathématiques sont possibles. J'aime bien voir les choses sous la forme de systèmes d'équations ou de matrices. Ici nous calculons le déterminant du système... Si detS est égal à zéro, cela signifie que les points O, A et B sont alignés. Dans ce cas les points I et J ne sont pas définis !
var detS = xA*yB-xB*yA;
 
Ces deux lignes permettent de calculer les coordonnées du point M dans le repère (O, OA, OB).
var newxM = (yB*xM-xB*yM)/detS;
var newyM = (-yA*xM+xA*yM)/detS;
 
On obtient les coordonnées du point I projeté de M sur la droite (OA) parallèlement à (OB).
ptI._x = ptO._x+xA*newxM;
ptI._y = ptO._y+yA*newxM;
 
On obtient les coordonnées du point J projeté de M sur (OB) parallèlement à (OA).
ptJ._x = ptO._x+xB*newyM;
ptJ._y = ptO._y+yB*newyM;
 
5. Quelques remarques
 
Si vous avez besoin de ce bout de code, je vous conseille d'écrire une fonction... Méfiance, il faudra faire attention au cas où detS est égal à zéro ! Pour les initiés, ce que nous venons de faire est quasiment un changement de bases, on aurait pu utiliser les matrices de changement de bases et avoir recours à des fonctions matricielles mais ma philosophie est de faire simple quand cela est possible et d'aller à l'essentiel dans mes tutoriaux.
 
 
Accueil | Tutoriaux