Dans certains cas, vous aurez besoin de réaliser des interpolations de mouvements avec des trajectoires cycliques (ex. : circulaires, ondulantes, etc.). Il devient alors difficile de réaliser un tel mouvement sans passer par les interpolations accompagnées d'un guide de mouvement. Et pourtant, c'est réalisable grâce aux fonctions sinus et cosinus de la classe Math en ActionScript. Si la manipulation de formules de calculs faisant appel aux cosinus et sinus ne vous pose pas de problème, consultez alors directement les derniers exemples de cette ressource, dans le cas contraire, voici un développement pour vous expliquer le mode de calcul d'un sinus et d'un cosinus. 

Remarque : Assurez-vous que la nombre d'images par seconde de votre animation est bien au moins à 50 ips.

A quoi servent les sinus et cosinus ?

Nous avons pour la plupart d'entre nous de mauvais souvenir de nos cours de Math de 3e car ils étaient pour le moins abstraits. En revanche si nous vous posons cette question…

2 + 3 ?

…la réponse vous vient automatiquement à l'esprit car le signe "+" vous parle depuis votre plus tendre enfance. La soustraction est "un peu plus compliquée" et la division, n'en parlons pas. Et pourtant, les quatre opérations de base, - + x et ÷ restent des calculs simples à comprendre avec des valeurs simples.

cos(3) ? ou sin(3) ?

Et voilà, vous vous bloquez ! Nous vous l'avons dit, nous allons vous expliquer les cosinus et sinus. Reprenons. Ne cherchez pas à calculer le résultat, seul le résultat nous intéresse, pas sa technique de calcul. Mais à quoi sert ce résultat ? Petit retour en arrière, à l'école, nous utilisions soit une calculette pour effectuer ce calcul, soit une "table" (un document plié en trois parties, couleur saumon) présentant un tableau des différents résultats de calculs de cosinus et sinus. Nous allons utiliser les fonctions Math.cos() et/ou Math.sin() pour obtenir le résultat.

Quelle que soit la valeur que vous préciserez entre les parenthèses, paramètre nécessaire pour ce calcul, vous obtiendrez toujours une valeur comprise entre -1 et 1. Et alors ? Et bien en faisant varier de façon régulière ce fameux paramètre nécessaire pour le calcul du cosinus ou du sinus, on peut obtenir d'autres valeurs. Quel est l'intérêt ? Obtenir des valeurs qui représenteront un intervalle régulier cyclique. Quelles sont les valeurs que vous obtenez entre -1 et 1. Non, il n'y a pas que le 0.

-1, -0.9, -0.8, -0.7, -0.6, -0.5, -0.4, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1 0.9, 0.8
cos(0)...........................................................cos(1.7)...............................................cos(3.1) .........

Dans l'exemple ci-dessus, nous démontrons qu'avec l'augmentation régulière d'une valeur (0 -> 1.7 -> 3.14 -> etc...) à placer dans le calcul du cosinus, on obtient toujours les mêmes valeurs (1 -> 0 -> -1 -> 0 -> 1 -> 0 -> -1). Pour être plus précis et moins ambigu, nous allons augmenter une valeur avec un pas de 0,1 et non de 1,7 (Nous ne voulions pas saisir toutes les valeurs comprises entre 0 et 5 avec un pas de 0,1, c'est pourquoi nous en avons choisi de 2 (1,7 et 3,1)). Mais à quoi peuvent bien servir des valeurs comprises entre -1 et 1 ? Et bien si nous multiplions le résultat obtenu par 60 (par exemple), nous obtiendrons donc des valeurs comprises entre -60 à 60. Nous pourrions donc utiliser le résultat pour régler la position verticale d'une occurrence. C'est ce qui se passe dans l'exemple ci-dessous. Si vous regardez attentivement le script, vous observerez que la valeur 85 a été ajoutée à la principale ligne d'instruction d'instruction de notre code, c'est tout simplement pour définir l'axe horizontal à partir duquel on va retirer 60 ou ajouter 60 pixels.

   var coef = 0;

   balle.addEventListener(Event.ENTER_FRAME,bougerBalle);

   function bougerBalle(evt:Event) {

       coef+=0.1;

       balle.y = 85+(Math.sin(coef)*60);

   }

Avec une même valeur, (ex. 3), le calcul de cosinus et de sinus donnent 2 résultats différents. Regardons simplement la liste des valeurs ci-dessous présentées dans un tableau, elles sont croissantes et régulières. Parallèlement, les résultats des calculs de sinus et cosinus (qui utilisent ces valeurs) sont cycliques.

Valeurs	0	0,2	0,4	0,6	0,8	1	1,2	1,4
Cosinus	1	0,9801	0,9211	0,8253	0,6967	0,5403	0,3624	0,17
Sinus	0	0,1987	0,3894	0,5646	0,7174	0,8415	0,932	0,9854

 

Valeur	1,6	1,8	2	2,2	2,4	2,6	2,8	3	3,2
Cosinus	-0,0292	-0,2272	-0,4161	-0,5885	-0,7374	-0,8569	-0,9422	-0,99	-0,9983
Sinus	0,9996	0,9738	0,9093	0,8085	0,6755	0,5155	0,335	0,1411	-0,0584

 

Valeur	3,4	3,6	3,8	4	4,2	4,4	4,6	4,8
Cosinus	0,9668	-0,8968	-0,791	-0,6536	-0,4903	-0,3073	-0,1122	0,0875
Sinus	-0,2555	-0,4425	-0,6119	-0,7568	-0,8716	-0,9516	-0,9937	-0,9962

Faire tourner une occurrence autour d'un axe

Si nous combinons donc le calcul d'un sinus et celui d'un cosinus avec la même valeur, en les utilisant pour définir la position d'une occurrence sur la scène, nous obtenons des positions successives qui formeront un mouvement circulaire. N'oublions pas que nous multiplions le calcul des sinus et cosinus par un chiffre plus grand pour obtenir des valeurs plus grandes. C'est ce qu'on appelle le rayon (60 pixels dans l'exemple ci-dessous).

   var coef = 0;

   balle.addEventListener(Event.ENTER_FRAME,bougerBalle);

   function bougerBalle(evt:Event) {

       coef+=0.02;

       balle.x = 180+(Math.cos(coef)*60);

       balle.y = 85+(Math.sin(coef)*60);

       balleX.x = 180+(Math.cos(coef)*60);

       balleY.y = 85+(Math.sin(coef)*60);

       traitVertical.x = balleX.x;

       traitHorizontal.y = balleY.y;

   }

Pour faire tourner uniquement la balle, il faut utiliser le script ci-dessous : 

   var coef = 0;

   balle.addEventListener(Event.ENTER_FRAME,bougerBalle);

   function bougerBalle(evt:Event) {

       coef+=0.02;

       balle.x = 180+(Math.cos(coef)*60);

       balle.y = 85+(Math.sin(coef)*60);

   }

Essayez à présent de faire varier les valeurs 60 des deux lignes d'instructions ci-dessus, essayez d'utiliser la fonction Math.abs() avec l'une ou l'autre (ou les deux) des lignes d'instructions ci-dessus et vous découvrirez des variantes interessantes dans le mouvement de votre occurrence !!!

Mouvement pendulaire 

Nous rendons absolue la valeur qui sert au calcul du positionnement vertical de l'occurrence.

   var coef = 0;

   balle.addEventListener(Event.ENTER_FRAME,bougerBalle);

   function bougerBalle(evt:Event) {

       coef+=0.1;

       balle.x = 180+(Math.cos(coef)*60);

      balle.y = 85+Math.abs((Math.sin(coef)*60));

   }

Mouvement satellite 

Pour effectuer ce type de mouvement, vous devez comprendre que nous cherchons à régler l'echelle horizontale et verticale de l'occurrence en mouvement à la valeur relative de sa position verticale

   var coef = 0;

   balle.addEventListener(Event.ENTER_FRAME,bougerBalle);

   function bougerBalle(evt:Event) {

       coef+=0.1;

       balle.x = 180+(Math.cos(coef)*80);

       balle.y = 85+(Math.sin(coef)*30);

       balle.scaleX = 0.1+(balle.y/100);

       balle.scaleY = 0.1+(balle.y/100);
   
       balle.alpha = 0.1+(balle.y/100)

   }

Ellipse

Nous changeons simplement la valeur du rayon vertical ou horizontal. 

   var coef = 0;

   balle.addEventListener(Event.ENTER_FRAME,bougerBalle);

   function bougerBalle(evt:Event) {

       coef+=0.1;

       balle.x = 180+(Math.cos(coef)*120);

       balle.y = 85+(Math.sin(coef)*60);

   }

Rebond

Semblable au script qui permet d'obtenir un mouvement pendulaire, nous utilisons un rayon avec une valeur négative et nous la soustrayons à la position de l'axe horizontal. 

   var coef = 0;

   balle.addEventListener(Event.ENTER_FRAME,bougerBalle);

   function bougerBalle(evt:Event) {

       coef+=0.1;

       balle.x = 180+(Math.cos(coef)*60);

       balle.y = 85-Math.abs((Math.sin(coef))*-60);

   }