Métamorphoses
|
Dés le début de la CIIIM (Commission Inter Irem Images et Math créée en 1972) les enseignants de Mathématiques qui y participaient, ont été séduits par les films de l'Office du Cinéma Canadien réalisés par Norman Mc Laren et Peter Foldes. Sur le site de l'Office National du film du Canada il est possible de voir "La Faim de Peter Foldes primée en 1974 au Festival de Cannes ou "Notes sur un triangle, film de 1966 de Norman McLaren. Mais c'est surtout un autre film de Peter Foldes où une silhouette d'homme et de femme volent dans l'espace et se transforment qui nous a donné envie de comprendre. |
Les outils mathématiques utilisés par un ordinateur pour réaliser une telle animation sont simples. En fait on peut réduire la transformation d'une image en une autre à un calcul de barycentre autrefois enseigné en 3e de collège. Imaginez une tige, à un bout il y a une masse a, à l'autre bout il y a une masse 1 - a. Le barycentre est le point d'équilibre de la tige. Si a = 0,5 le point sera au milieu de la tige. Pour avoir toutes les étapes intermédiaires il suffit de faire varier a dans [0 1]. Le générique de Thalassa a largement utilisé ces calculs. Le fichier fla La part du graphiste est prépondérante dans le résultat final. |
L'animation pas à pas
Transformer un bateau en maison On entre dans un tableau les coordonnées de la maison, dans un autre celles du bateau, chaque dessin est défini avec le même nombre de points. On calcule, pour différents poids (valeurs de a) le barycentre des points qui se correspondent. On affiche l'image calculée. L'animation ci contre n'est faite que pour comprendre le calcul mathématique. Les valeurs du coefficient a sont affichées et peuvent être réglées avec le curseur ou les deux boutons "* et "-. |
Détails du script
Le fichier fla, sur un calque le curseur et les boutons, les scripts sont sur trois images d'un autre calque.
| cur_mc._x = 50; //construction du bateau bat = new Array(450, 265, 440, 300, 335, 300, 335, 175, 345, 175, 345, 300, 310, 300, 270, 265, 450, 265, 340, 180, 290, 267, 270, 265); this.createEmptyMovieClip("bateau_mc", 1); bateau_mc.lineStyle(2); bateau_mc.moveTo(bat[0], bat[1]); for (i=1; i<12; i=i+1) { bateau_mc.lineTo(bat[2*i], bat[2*i+1]); } //construction de la maison mais = new Array(90, 35, 90, 75, 50, 75, 50, 50, 65, 50, 65, 75, 10, 75, 10, 35, 90, 35, 80, 20, 20, 20, 10, 35); this.createEmptyMovieClip("maison_mc", 2); maison_mc.lineStyle(2); maison_mc.moveTo(mais[0], mais[1]); for (i=1; i<12; i=i+1) { maison_mc.lineTo(mais[2*i], mais[2*i+1]); } |
C'est le plus fastidieux ! Vous trouverez prochainement différent types de saisie Entrer dans des tableaux les coordonnées des objets. Pour les dessiner, on fait appel à un clip vide en faisant attention à la profondeur. La première valeur du tableau a comme index 0. Tous les indexes paires correspondront donc aux abscisses |
| _root.cur_mc.onPress = function() {
this.startDrag(false, 50, cur_mc._y, 250, cur_mc._y);
}; _root.cur_mc.onRelease = _root.cur_mc.onReleaseOutside=function () { stopDrag(); }; _root.plus_mc.onPress = function() { _root.cur_mc._x += 25; }; _root.moins_mc.onPress = function() { _root.cur_mc._x -= 10; }; |
Sur la deuxième image on commence par gérer les curseurs et les boutons. |
| //construction de l'image intermédiaire a = (cur_mc._x - 50) / 200; //profondeur du clip b = Math.floor(100*a+2); this.createEmptyMovieClip("inter_mc", b); inter_mc.lineStyle(2); inter_mc.moveTo(a*mais[0]+(1-a)*bat[0], a*mais[1]+(1-a)*bat[1]); for (i=1; i<12; i=i+1) { inter_mc.lineTo(a*mais[2*i]+(1-a)*bat[2*i], a*mais[2*i+1]+(1-a)*bat[2*i+1]); } |
Toujours sur cette deuxième image, le coeur de l'animation : un calcul de barycentre en prenant comme poids a qui varie dans [0,1]. Le pas défini par le curseur, donne la finesse de l'animation. Les différentes images crées sont à des profondeurs différentes b les unes des autres. On y retrouve le a et le 1 - a ! |
| gotoAndPlay(2); | Sur la troisième image, la boucle du moteur |
Le fichier bateau, le fichier maison
Prolongements
Dans sa partie graphique Flash propose le morphing entre deux formes, sans avoir besoin de programmer !
On peut faire correspondre des zones fermées et colorées.
Il n'y a pas que le calcul de barycentres, d'autres transformations sont possibles entre deux images.
Il est tout à fait possible de chainer des images différentes, l'imagination est au pouvoir !
