Mouvement aléatoire fluide

July 2nd, 2006

L’idée est en fait assez simple, elle consiste interpoler les coordonnées vers des positions aléatoires de façon désynchronisée en employant une équation d’accélération/décélération :p

concrètement cela signifie que l’on utilise une tween pour chacune des coordonnées. Cette tween part de la position initiale de la coordonnée et va vers une position définie de façon aléatoire. Il est impératif que chacune des tween mette un temps différent et d’utiliser une équation d’accélération/décélération puisque ce sont ces deux éléments qui rendent le mouvement non linéaire. Finalement, quand une tween est finie on la relance de la même façon qu’elle a été lancée au début.

Dans l’exemple ci-dessous on peut voir par moment des ruptures dans le mouvement, cela est dû au fait que la coordonnée choisie au hasard est trop proche de la coordonnée précédente.

et voici le code de l’exemple:
(j’aurai voulu les passer en as3 mais je n’arrive pas à utiliser les Tween sous flash 9 alpha )

import mx.transitions.Tween;
import mx.transitions.easing.Regular;
import flash.geom.Point;
var sw:Number = Stage.width;
var sh:Number = Stage.height;

//l'objet dont les coordonnées sont interpolées
var pt:Point = new Point(Math.random()*sw, Math.random()*sh);
var dx:Number = Math.random()*sw-pt.x;
var tx:Tween = new Tween(pt, "x", Regular.easeInOut, pt.x, pt.x+dx, Math.abs(dx)/5, false);
var dy:Number = Math.random()*sh-pt.y;
var ty:Tween = new Tween(pt, "y", Regular.easeInOut, pt.y, pt.y+dy, Math.abs(dy)/5, false);

//quand une tween est finie, on la relance
tx.onMotionFinished = function() {
	var dx:Number = Math.random()*sw-pt.x;
	this.continueTo(pt.x+dx, Math.abs(dx)/5);
};
ty.onMotionFinished = function() {
	var dy:Number = Math.random()*sh-pt.y;
	this.continueTo(pt.y+dy, Math.abs(dy)/5);
};

//code pour la visualisation de l'exemple
//ici les coordonnées du point sont copiées dans un tableau qui est actualisé dans le onChanged
var ref:MovieClip = this;
var tab:Array = new Array();
var l:Number = 100;
for (var i:Number = 0; i < l; i++) tab.push(pt.clone());
tx.onMotionChanged = function() {
	ref.clear();
	ref.moveTo(tab[0].x, tab[0].y);
	for (var i:Number = 1; i < l; i++) {
		ref.lineStyle(i*20/l);
		ref.lineTo(tab[i].x, tab[i].y);
	}
	tab.shift();
	tab.push(pt.clone());
};

22 Responses to “Mouvement aléatoire fluide”

iteratif says:

2 July 2006 at 10 h 52 min

j’ai la solution à ton problème : flash.media-box.net/index…
syb says:

2 July 2006 at 15 h 20 min

yeah yeah l’effet est tres sympa c’est con que la difference 1pt a 3pt en ligne soit trop visible
moniteur_auto says:

12 January 2007 at 15 h 07 min

Bonjour,

Ce script est exactement ce que je recherchais, puis-je l’utiliser pour mon site ?
Je vais modifier (pas grand chose) la couleur, la taille et la vitesse du trait et rajouter un filtre dessus.
grgrdvrt says:

12 January 2007 at 23 h 28 min

pas de problème c’est là pour être utilisé
k-ny says:

29 January 2007 at 8 h 45 min

Hoip, j’me garde ça sous le coude, nickel
Anode says:

14 February 2007 at 16 h 36 min

Salut !
Etant débutante (j’y connais rien du tout) je cherche à déplacer un tracé en suivant un mouvement aléatoire (rotation, translation, courbe) comme l’exemple ci-dessus en laissant sa trace sans l’effacer.
Peux-tu m’envoyer le code entier avec l’explication stp ?

Merci d’avance ^^
Anode says:

14 February 2007 at 16 h 38 min

au fait je suis sous flash mx 2004 version 7.1
grgrdvrt says:

15 February 2007 at 13 h 19 min

vite fait comme ça:

import mx.transitions.Tween;
import mx.transitions.easing.Regular;
var sw:Number = Stage.width;
var sh:Number = Stage.height;

//on crée l’objet à interpoler
var clip:MovieClip=this.createEmptyMovieClip(“vide”,0)
clip._x=Math.random()*sw
clip._y=Math.random()*sh

//on crée les interpolations
var dx:Number = Math.random()*sw-clip._x;
var tx= new Tween(clip, “_x”, Regular.easeInOut, clip._x, clip._x+dx, Math.abs(dx)/5, false);
var dy:Number = Math.random()*sh-clip._y;
var ty= new Tween(clip, “_y”, Regular.easeInOut,clip._y, clip._y+dy, Math.abs(dy)/5, false);

//quand une tween est finie, on la relance
tx.onMotionFinished = function() {
var dx:Number = Math.random()*sw-clip._x;
this.continueTo(clip._x+dx, Math.abs(dx)/5);
};
ty.onMotionFinished = function() {
var dy:Number = Math.random()*sh-clip._y;
this.continueTo(clip._y+dy, Math.abs(dy)/5);
};

//code pour la visualisation de l’exemple

var ref:MovieClip = this;
ref.lineStyle(1)
ref.moveTo(clip._x,clip._y)
tx.onMotionChanged = function() {
ref.lineTo(clip._x,clip._y)
};

par contre je ne suis pas sûr que dans mx2004 7.1 les fichiers . as soioent inclus, il faudra peut-etre que tu les télécharge (je crois qu’ils sont sur le site d’adobe)
l’autre problème est que les dessisns avec lineTo consomment en ressource quand ils ne sont pas effacés …sous flash 8 on dessine dans un bitmap et ça pose pas de problème mais sous flash 7 ça compliquerait le code…
anode says:

15 February 2007 at 19 h 37 min

merci beaucoup pour tes instructions ! c’est très très gentil à toi !
(moi qui n’y connais rien xD)
anode says:

15 February 2007 at 21 h 04 min

en gros il faudrait que je télécharge flash 8 ?
et si je veux à la place d’un tracé avoir une "trainée" d’accumulation d’une même image ? cf Joshua Davis (a radical designer chez bmw…)
hubuh says:

30 May 2007 at 21 h 53 min

Salut !

J’aimerai avoir un tel mouvement mais juste sur un clip. Comment simplifier ce code pour arriver à ce résultat ?

Merci
grgrdvrt says:

11 June 2007 at 1 h 14 min

ça ressemblerait à ça:
l’important c’est de garder 2 tweens désynchronisées, c’est la base, apres on peut l’appliquer à ce qu’on veut

import mx.transitions.Tween;
import mx.transitions.easing.Regular;
var sw:Number = Stage.width;
var sh:Number = Stage.height;

var dx:Number = Math.random()*sw-pt.x;
var tx:Tween = new Tween(monClip, “_x”, Regular.easeInOut, monClip._x, monClip._x+dx, Math.abs(dx)/5, false);
var dy:Number = Math.random()*sh-pt.y;
var ty:Tween = new Tween(monClip, “_y”, Regular.easeInOut, monClip._y, monClip._y+dy, Math.abs(dy)/5, false);

//quand une tween est finie, on la relance
tx.onMotionFinished = function() {
var dx:Number = Math.random()*sw-pt.x;
this.continueTo(pt.x+dx, Math.abs(dx)/5);
};
ty.onMotionFinished = function() {
var dy:Number = Math.random()*sh-pt.y;
this.continueTo(pt.y+dy, Math.abs(dy)/5);
};
fab80s says:

18 July 2007 at 12 h 41 min

Super bout de code, résultat hypnotisant! Merci
Athesia says:

30 October 2007 at 2 h 26 min

Super résultat avec le point, mais utilse pour des movieClips aussi, par contre je me permet juste de corriger le code ci dessus, a cause d’oublis de variable “pt” et de .x au lieu de ._x …

import mx.transitions.Tween;
import mx.transitions.easing.Regular;

var sw:Number = Stage.width;
var sh:Number = Stage.height;

var dx:Number = Math.random()*sw-monClip._x;
var tx:Tween = new Tween(monClip, “_x”, Regular.easeInOut, monClip._x, monClip._x+dx, Math.abs(dx)/5, false);
var dy:Number = Math.random()*sh-monClip._y;
var ty:Tween = new Tween(monClip, “_y”, Regular.easeInOut, monClip._y, monClip._y+dy, Math.abs(dy)/5, false);

//quand une tween est finie, on la relance
tx.onMotionFinished = function() {
var dx:Number = Math.random()*sw-monClip._x;
this.continueTo(monClip._x+dx, Math.abs(dx)/5);
};
ty.onMotionFinished = function() {
var dy:Number = Math.random()*sh-monClip._y;
this.continueTo(monClip._y+dy, Math.abs(dy)/5);
};
grgrdvrt says:

30 October 2007 at 9 h 29 min

effectivement, j’ai pas fait gaffe… comme quoi les habitudes…

merci pour ta remarque
nono-debutant says:

15 May 2008 at 18 h 06 min

J’aimerais savoir si je peux utiliser les tween mais que je puisse controller moi meme leur deplacement (mettre des valeurs pour qu elle parcour le chemin que je veux). Je souhaites qu elle parte d un point a un autre en tracant une courbe aléatoire.Cela sur une 40 d image.
grgrdvrt says:

15 May 2008 at 20 h 45 min

avec la technique que j’utilise ici on n’a aucun contrôle sur les points pas lesquels la ligne passe
pour pouvoir faire ça il faudrait penser le truc autrement et je ne me suis jamais penché plus que ça sur la question:s
Avatar says:

10 March 2009 at 10 h 34 min

Bonjour, je viens de tester le code que tu donnes. C’est du plus bel effet et je t’en félicite. Je m’en inspirerai sûrement!

Petite précision : quand on copie/colle exactement le code comme tu le donnes, Flash indique une accolade manquante en fin de boucle for (ligne 29).
On la rajoute et ça tourne!

Bonne continuation!

grgrdvrt says:

10 March 2009 at 10 h 50 min

corrigéen fait il y avait une accolade en trop sur cette ligne:

for (var i:Number = 0; i < l; i++) tab.push(pt.clone());

en fait rajouter une accolade à la fin pouvait être problématique :/

Wil-O-Gik says:

19 December 2009 at 19 h 31 min

Il fait du beau code, il répond aux questions moi je dis super et merci beaucoup.
Dje says:

18 January 2010 at 22 h 17 min

Bien le bonjour j’aime énormément cette animation.

Je me suis permis de l’utiliser moi même mais je bloque sur un point…

J’aimerais que tel un caméléon la couleur change… Je ne vois pas du tout comment faire…

Est-ce faisable ?
Apple Recipes says:

15 May 2012 at 5 h 29 min

read more…

[...]just below, are some totally unrelated sites to ours, however, they are definitely worth checking out[...]…

GrgrDvrt

Mouvement aléatoire fluide

22 Responses to “Mouvement aléatoire fluide”

Leave a Reply