Pixels + blur :

Pixels + blur + paletteMap :

Pixels + blur + paletteMap + colors :

sources

Each step adds its own parameters which influence the final result, especially the blur radius and the paletteMap.

I haven’t used tools like Soulwire’s simple flash GUI tool and it’s a mistake, I spent too much time to changing the code and compiling the swf just to set new parameters values.

In the last experiment the color schemes are generated. I will probably write a post about that because it’s a subject I like a lot.
There are other experiments using paletteMap that I will show in another post because it’s really an interesting function.

En lançant l’exemple ci-dessous, tu pourras admirer le résultat de tout ça et découvrir au passage qui sont nos invités mystères!!

Si tu as juste lancé l’animation tu as dû d’abord paniquer à la vue de nos amis et ensuite tu as vu un effet sympa.
Si tu la stoppe et que tu la relance tu vas activer un second mode bien plus intéressant dans lequel l’image se dégrade au cours du temps.
L’idée c’est que dans le premier mode ce sont les couleurs la photo originale qui sont utilisées tandis que dans le second mode c’est l’image transformée (telle qu’on la voit) qui sert de source.

Voici une séquence obtenue avec une image un peu plus verte.
Au début les deux modes donnent à peu près la même chose :

Après une dizaine de minutes c’est de la bouillie :

À la fin l’image se divise en aplats relativement stables :

Et sinon en noir et blanc ça fait des choses amusantes aussi :

Si tu veux les sources, les voilà.

Pour le concours j’ai appliqué ce principe avec un point qui suit une cycloïde au lieu de la souris pour guider les lignes.



Cette édition du concours n’a pas motivé les foules et du coup tous les participants étaient finalistes. Forcément tout n’est pas fantastique. À noter quand même le 09 où les cartes sont entièrement dessinées avec des champs de textes (!?).

Voilà une sélection d’images générées de cette façon:

À 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é :/

]]> http://grgrdvrt.com/blog/279/25-lignes-janvier/feed/ 4 http://grgrdvrt.com/blog/147/25-lignes-novembre-decembre/ http://grgrdvrt.com/blog/147/25-lignes-novembre-decembre/#comments Mon, 03 Aug 2009 16:01:35 +0000 Grgrdvrt http://grgrdvrt.com/blog/?p=147 Keith Peters a lancé il y a quelques mois le concours 25 lines. Ce qui est intéressant avec le recul, ce sont les évolutions du code au delà du concours.]]> Quelques temps avant le concours j’avais vu une animation avec une séquence présentant des sortes de bulles remontant dans un fluide, genre effervescence. En voyant ça je me suis demandé si une sorte de mouvement brownien un peu horizontal avec un mouvement en accélération vers le haut pouvait produire l’effet. J’ai donc commencé à jouer avec des particules jusqu’à obtenir ça.
Je remercie Nicoptère de m’avoir suggéré d’en faire quelque chose pour le concours

J’ai dans un premier temps adapté le principe à une disposition radiale. Ensuite en retravaillant plusieurs fois le mouvement j’ai obtenu quelque chose d’assez organique. Ce qui m’a amené à ça

Ce mouvement est dû au fait que chaque “tentacule” est composée de plusieurs particules, contrairement à la première expérimentation où elles ne correspondent chacune qu’au tracé d’une seule particule.
Afin d’intégrer un peu d’interactivité ces particules se dirigent vers la souris avec une vitesse dépendant de leur position dans la tentacule. Au clic ce facteur s’inverse ce qui entraine le déplacement de toute la « Chose» vers la souris.
J’obtiens la couleur de chaque tentacule en tirant des nuances d’une couleur dominante prise aléatoirement, la couleur de chaque segment est simplement une interpolation entre une extrémité noire et l’autre de la couleur de la tentacule.
Et finalement je suis arrivé parmi les finalistes.

Pour le concours je tenais à faire quelque chose en 2D, malgré les apports du player 10 en matière de 3D. J’ai quand même rapidement tenté un petit passage en 3D. Je pense qu’à l’occasion j’essaierai d’y retoucher. Entre autre j’aimerai bien faire des tests de z-sorting sur ce genre d’expérimentation.

Ensuite étant complètement fan des processing monsters je tenais à en faire un. Cette animation pouvait correspondre aux contraintes d’interactivité et de noir et blanc, je l’ai donc recodée en processing, mais en vrai code orienté objet cette fois. Voilà le résultat et les sources.

Finalement, en me baladant sur wonderfl j’ai découvert que mon code avait été repris et transformé par plusieurs personnes . Il y en a même un qui a réécrit le code pour le rendre lisible.

Conclusion, ne laissez pas vos swf en plein soleil, après il mutent. Genre lui qui était à Arcachon la semaine dernière et lui qui se demandait pourquoi cette région d’Ukraine était si tranquille.

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