GrgrDvrt » mouvement

Des lignes

Grgrdvrt — Wed, 24 Nov 2010 20:56:19 +0000

sources

25 lignes, Janvier

Grgrdvrt — Thu, 17 Sep 2009 17:12:31 +0000

Et voilà le résultat:

À la base je voulais stocker les tracés sur un minimum d’espace alors j’ai pensé au mouse gesture de bytearray où les caractères sont représentés par une suite de directions. Finalement j’ai pensé que ce serait trop compliqué de les redessiner à partir de ça en 25 lignes donc finalement j’ai opté pour des classiques paires de coordonnées.

Et voilà les finalistes de cette édition. Le 8 était très fou mais finalement c’est le 30 qui a gagné :/

Un petit coup de processing

Grgrdvrt — Fri, 09 Jan 2009 16:13:00 +0000

À la base je jouais à déplacer des particules et puis j’ai rajouté du perlin noise et puis de la couleur et puis des lignes à la place des points et puis voilà le résultat. Pour les couleurs j’utilise les blendModes pour faire un mélange entre une couleur dominante et des valeurs récupéréres sur le perlinNoise mais au final c’est très aléatoire et des fois c’est moche. Pour le smoothing processing c’est pas encore ça. Dans le même genre il y a le Rainbow Whirls par wonderwhy-er que j’ai découvert via le concours 25lines.

qsdqsd

Grgrdvrt — Fri, 11 Jul 2008 01:04:00 +0000

J’ai fabriqué ce truc en cours de flash, alors que l’intervenant nous signalait que la classe Shape était très optimisée pour les graphiques. Je me suis donc empressé de créer 2000 shapes avec un coup de lineTo dedans pour me faire des particules. Sur le conseil de l’intervenant j’ai remplacé le lineTo par un drawRect plus efficace. J’ai ainsi pu monter à 14000 particules.

Plus tard Nicoptère m’a incité à faire des setPixels sur un bitmapData. Là à 50000 particules on s’en sort pas mal.

Pour le mouvement c’est basé sur la même chose que pour ces lignes. L’idée c’est ça:

1
2
3

vitesse = (position de la souris - position) * elasticité
vitesse *= frottement
position de la particule += vitesse

Avec des valeurs d’élasticité et de frottement différentes pour chaque particule l’ensemble forme une ligne cohérente que l’on maitrise plus ou moins avec la souris

qsdqsd

Grgrdvrt — Tue, 08 Jul 2008 22:31:00 +0000

À la base le mec intelligent c’est Nicoptère, avec le principe de son effet swoosh qui déplace des particules selon un perlinNoise.

Recette de cuisine:

je pars d’une image en noir et blanc, là c’est un gros qsd créé par tantoitai (notez la finesse du skin de son blog)

Je crée un bitmapData rempli de perlinNoise. Là je me casse pas trop la tête, je reprends celui de la doc de flash.

je parcours chaque pixel de l’image pour récupérer les position de chaque pixel noir. Pour ça je passe par un byteArray en espérant que c’est mieux que getPixel (j’ai jamais testé la différence).

Je crée un objet ayant d’une part des propriétés x et y basés sur les pixels de l’image et d’autre part une vitesse horizontale, une vitesse verticale et une couleur dont les valeurs sont respectivement déterminées par les couches r, v et b du perlinNoise.

Pour le mouvement j’additionne simplement les vitesse horizontales et verticales au positions x et y pour chaque objet. Cette vitesse est préalablement multiplié par une sinusoïdale dépendant du temps(formule littéraire pour Math.sin(t++) ), ce qui fait que l’image de base se déforme puis se reforme

Le rendu est obtenu en faisant un setPixel pour chacun de ces objets sur un bitmapData. Je n’efface jamais l’image, j’applique juste des filtres BlurFilter et ColorMatrix filter qui effacent progressivement en laissant une trainée (faut aller doucement là dessus, ça vire vite à la visualisation windows Mediaplayer)

Bon forcément plus le bitmapData d’affichage est grand et plus y’a de particules moins c’est fluide. Donc voilà, vous avez tout les éléments pour faire un truc inutile mais tellement cool!

Lignes en mouvement

Grgrdvrt — Tue, 12 Feb 2008 22:38:00 +0000

Ces lignes se déplacent en suivant des points qui se positionnent aléatoirement autour d’un point en mouvement. Lorsque l’on clique, ce point suis la souris. Cette petite expérimentation utilise quelques formules tirées du livre “Making things move” de Keith Peters que j’ai un peu adaptées

tween aléatoire dans l'espace

Grgrdvrt — Thu, 02 Nov 2006 09:30:00 +0000

et voici le code:

import mx.transitions.Tween;
import mx.transitions.easing.Regular;
import com.robertpenner.geom.Vector3d;
import com.robertpenner.display.Graphic3d;
var sw:Number = Stage.width;
var sh:Number = Stage.height;
var c:Number = sw/1.5;

//l'objet dont les coordonnées sont interpolées
var pt:Vector3d = new Vector3d(Math.random()*c-c/2, Math.random()*c-c/2, Math.random()*c-c/2);
var dx:Number = Math.random()*c-c/2-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()*c-c/2-pt.y;
var ty:Tween = new Tween(pt, "y", Regular.easeInOut, pt.y, pt.y+dy, Math.abs(dy)/5, false);
var dz:Number = Math.random()*c-c/2-pt.z;
var tz:Tween = new Tween(pt, "z", Regular.easeInOut, pt.z, pt.z+dz, Math.abs(dz)/5, false);

//quand une tween est finie, on la relance
tx.onMotionFinished = function() {
	var dx:Number = Math.random()*c-c/2-pt.x;
	this.continueTo(pt.x+dx, Math.abs(dx)/5);
};
ty.onMotionFinished = function() {
	var dy:Number = Math.random()*c-c/2-pt.y;
	this.continueTo(pt.y+dy, Math.abs(dy)/5);
};
tz.onMotionFinished = function() {
	var dz:Number = Math.random()*c-c/2-pt.z;
	this.continueTo(pt.z+dz, Math.abs(dz)/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.getClone());
}
tx.onMotionChanged = function() {
	ref.clear();
	//on récupèreune projection sur l'écran des points 3d
	var current:Vector3d = tab[0].persProjectNew();
	ref.moveTo(current.x+sw/2, current.y+sh/2);
	for (var i:Number = 1; i < l; i++) {
		current = tab[i].persProjectNew();
		var pers = tab[i].getPerspective();
		//l'épaisseur varie en fonction de la profondeur et de l'index du point
		ref.lineStyle(pers*50*i/l);
		ref.lineTo(current.x+sw/2, current.y+sh/2);
	}
	
	//gestion des touches
	if (Key.isDown(37)) {
		for (var i = 0; i < l; i++) {
			tab[i].rotateY(5);
		}
	} else if (Key.isDown(39)) {
		for (var i = 0; i < l; i++) {
			tab[i].rotateY(-5);
		}
	}
	if (Key.isDown(38)) {
		for (var i = 0; i < l; i++) {
			tab[i].rotateX(5);
		}
	} else if (Key.isDown(40)) {
		for (var i = 0; i < l; i++) {
			tab[i].rotateX(-5);
		}
	}
	tab.shift();
	tab.push(pt.getClone());
};

Il n’y a pas de différence majeure avec la version 2d si ce n’est qu’au moment de l’affichage il faut récupérer une projection 2d de chaque point et que l’épaisseur du trait varie avec la profondeur.
Par contre j’aurai voulu mettre des variations de couleurs en fonction de la profondeur mais il faudrait gérer l’ordre d’affichage des lineTo et là ça devient plus dur

Maintenant j’aimerai bien voir pour une adaptation en as3 si possible en utilisant la classe Point à la place de la classe Vector (ou au moins comme superclasse) histoire d’utiliser les outils proposés par flash…

Mouvement aléatoire fluide

Grgrdvrt — Sat, 01 Jul 2006 22:37:00 +0000

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());
};