Tracé d'une courbe mathématique

Ah ! mes sinus avec un curseur qui fait varier la période

Objectifs

Utiliser les méthodes de dessin de la classe MovieClip.
Utiliser une fonction de la classe Math.
Mettre en place une boucle for.
Gérer avec un curseur la valeur de la période, drag.
Utiliser un texte dynamique pour afficher la valeur de la variable.

Scénario

Le MovieClip sera une petite balle pilotée par une fonction mathématique (sinus) qui laissera sa trace de déplacement sur l'écran.

J'ai choisi dans Propriétés du document la couleur de fond et une scène de 400 * 200.
L' axe des x traverse la scène, régler son ordonnée sur 100 !
L' origine de la scène (0,0) est le point en haut à gauche, tandis que l'origine de mon repère sera en (0,100) ce qui entraîne un changement d'origine.
Un deuxième segement de 100 pixels (L:100 H: 0 )sera en (x : 100, y : 184 ) sa longueur est importante.

Dans la bibliothèque Ctrl + L, deux objets
Un clip dont les occurences seront boule_mc et curseur_mc
Un graphique : le petit trait qui permet de graduer les deux axes. Utilisez >Modification>Aligner pour positionner ces graduations.

Deux calques : un pour le script, l'autre pour les dessins et textes. Un texte dynamique récupère pour l'afficher, la valeur de la variable donnée par le curseur.

Le script

var n = 50;

La variable n contiendra un nombre compris entre 0 et 100 et fixé au départ à 50.

curseur_mc.onPress = function() {
this.startDrag(true, 100, 180, 200, 180);
};

Si on presse sur l' occurrence "curseur_mc du clip "boule on déclenche le début de la drag de cette occurrence mais on contraint le déplacement, sur un segmnt d'ordonnée 180 entre les abscisses 100 et 200.

curseur_mc.onRelease = function() {
n = curseur_mc._x - 100;
this.stopDrag();
boule_mc._x = 0;
boule_mc._y = 100;

Quand on relache le curseur, on arrete la drague, on place la boule_mc au départ (peu utile) et on donne à n un nombre compris entre 0 et 100 en fonction de la place du curseur.

createEmptyMovieClip("trajectoire_mc", 1);
with (_root.trajectoire_mc) {
lineStyle(1, ff00ff, 100);
moveTo(0, 100);
}

On crée un Clip Vide "trajectoire_mc qui va permettre de dessiner la courbe.
On affecte un style, une couleur ( ligne d'épaisseur 1, de couleur ff00ff en RVB, avec alpha à 100 donc sans transparence) et on se place au point de départ.

for (i=0; i<390; i=i+1) {
boule_mc._x = i;
boule_mc._y = 100+50*Math.sin(i/n);
trajectoire_mc.lineTo(boule_mc._x, boule_mc._y);
} // fin de la boucle for
};

i varie de 0 à 390 avec un pas de 1 .
A chaque valeur de i on donne cette valeur comme abscisse de la boule et on calcule son ordonnée.

On trace une ligne du point précédent à cette nouvelle valeur.

Une variante qui laisse afficher les différentes courbes

MovieClip.createEmptyMovieClip : la doc dit : Méthode qui crée un clip vide comme enfant d'un clip existant.
On crée un clip qui servira de container au dessin mais cette fois ci on lie le nom et la profondeur à n, il n' y aura pas effacement.

createEmptyMovieClip("trajectoire" + n, n); le "+" est le symbole de concaténation.

Un nouveau clip est créé à chaque fois avec sa profondeur.

_root["trajectoire" + n] fait appel au nouveau clip créé.

efface_mc.onRelease = function () {_root["trajectoire" + n].clear()
}

Un clip efface_mc a été ajouté pour effacer le dernier dessin.

Une recherche Google sur flash trace courbe math vous conduira sur un article écrit par Ric Ewing qui reprend toutes les fonctions de dessin.

Jean.delerue@@inln.cnrs.fr corrigez l'adresse électronique, l'erreur est volontaire, j'aimerais éviter les spam ...