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à.

Là je fais une pause dans l’histoire, juste pour dire que si tu veux obtenir des belles couleurs d’une belle image, tu peux tout de suite aller chez soulwire voir ces articles: couleurs moyennes et extraire une palette de couleurs, c’est plus simple et ça marche mieux.
Par contre tu vas rater la partie intéressante de l’histoire.

Pour en revenir au median cut filter, si tu te disais “Chouette, un filtre! on va sortir PixelBender” tu te trompes, ça marchera pas. C’est pas comme le BlurFilter ou ColorMatrixFilter, qui traitent chaque pixel pour les redéfinir en fonction de leurs voisins ou de paramètres quelconques. Là c’est l’espace colorimétrique de l’image qu’on va tripoter.

L’espace colorimétrique c’est ce que tu vois juste à côté, un cube dans lequel chaque point est une couleur déterminée par sa position sur les axes R, G, B.

Maurice de Vlaminck a peint Les arbres rouges en 1906. C’est une huile sur toile de 65 x 81 cm et tu peux le voir au 5ème étage du Centre Pompidou.
Là (hérésie!) je l’ai recadré pour qu’il rentre dans la grille de l’article.

Ici c’est toujours le Vlaminck mais représenté dans l’espace colorimétrique. Cette fois il n’est pas recadré. Si tu veux, voilà les sources pour que tu puisse faire la même chose avec tes images. Les résultats sont très différents selon les images, c’est assez intréssant

On commence par mettre le tableau dans une boite. En vrai une boite ce sera juste une liste de pixels.

Ensuite on regarde quel est le côté le plus long. Pour ça il suffit de prendre les valeurs extrèmes de rouge, vert et bleu dans la liste de pixels. On va alors trier la liste selon leur valeur de rouge si par exemple c’est dans le vert qu’on a le plus d’amplitude. Il n’y a plus qu’à diviser notre liste en deux parts égales de façon à obtenir deux boites contenant le même nombre de pixels.

On recommence la dernière étape avec la boite qui a le plus long côté jusqu’à avoir autant de boites qu’on veut de couleurs. On obtient la palette en récupérant la couleur moyenne de chaque boite. Après pour reconstituer l’image il faudrait faire une posterisation. Moi je me contente d’attribuer aux pixels la couleur de la boite où ils sont, ça revient presque au même.

Voilà les sources du truc.
Et voilà des images reconstituées avec 2, 4, 8 et 32 couleurs et les palettes correspondantes

Le fauvisme prend un sérieux coup.
À moins de 20 couleurs les palettes sont loin de ce qu’on pourrait attendre.

Tu es déçu et je te comprends. En lot de consolation, voilà un bonus cool sur le tri des tableaux

On a vu que l’algorithme nécessite que les pixels d’une boite soient triés lors de la division de celle-ci.
Trier un Vector c’est simple avec la methode sort(). Ça prend en paramètre une fonction de notre choix c qui est top pour trier des éléments comme on veux. L’inconvénient c’est que c’est lent. Trop lent pour trier tous les pixels d’une image.

1
2
3
4
5
6
7
8
9
10
11
12

//nombre de valeurs à trier
var n:int = 20000;
//Vector contenant les valeurs à trier
var values:Vector.<int> = new Vector.<int>(n, true);
//valeur maximale contenue dans le Vector (minimum 0)
var valMax:int = 0xFF;
//remplissage du Vector avec des valeurs aléatoires
for(var i:int = 0; i< n; i++)values[i] = Math.random() * valMax;
var t:int = getTimer();
//tri
values.sort(function(v1:int, v2:int){return v1 - v2;});
trace(getTimer() - t);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function countingSort(a:Vector.<int>, k:int):Vector.<int>
{
	var n:int = a.length;
	var b:Vector.<int> = new Vector.<int>(n, true);
	var c:Vector.<int> = new Vector.<int>(k, true);
	for(var i:int = 0; i< n; i++)c[a[i]] = c[a[i]] + 1;
	for(i = 1; i < k; i++)c[i] = c[i] + c[i - 1];
	for(i = n - 1; i >= 0; i--)
	{
		b[c[a[i]]-1] = a[i];
		c[a[i]] = c[a[i]] - 1;
	}
	return b;
}
 
var n:int = 100000;
var values:Vector.<int> = new Vector.<int>(n, true);
var valMax:int = 0xFF;
for(var i:int = 0; i< n; i++) values[i] = Math.random() * valMax;
 
var t:int = getTimer();
values = countingSort(values, valMax + 1);
trace(getTimer() - t);

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/46/qsdqsd/ http://grgrdvrt.com/blog/46/qsdqsd/#comments Tue, 29 Jul 2008 00:19:00 +0000 Grgrdvrt http://grgrdvrt.com/wordpress/?p=45 ]]> http://grgrdvrt.com/blog/46/qsdqsd/feed/ 4 http://grgrdvrt.com/blog/45/20080709qsdqsd2/ http://grgrdvrt.com/blog/45/20080709qsdqsd2/#comments Tue, 08 Jul 2008 22:54:00 +0000 Grgrdvrt http://grgrdvrt.com/wordpress/?p=40

Cette expérimentation est le résultat d’un ratage complet que j’ai pas pris le temps de rattraper. Je voulais faire quelque chose de tentaculaire, avec une histoire de branches qui s’influenceraient les unes entre les autres. Donc j’ai fait une branche qui se divise en branche qui se divise etc… Et là je me suis rendu compte que ce n’était pas du tout l’idée que j’avais en tête.
J’ai quand même continué un peu sur ce que j’avais, histoire de voir le comportement si les extrémités de sous-branches directement issues d’une même branche se repoussaient, si je mettais un peu de couleur… C’est amusant de constater que si chaque branche produit juste une sous branche en plus ou si les dernières branches se divisent encore une fois le nombre total de branches devient tel que l’animation ne peut plus tourner.

Finalement j’ai gardé cette animation parce que la trace laissée par cette structure est plutôt chouette

À 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!

dessinez sur l’image pour la barbouiller et actualisez la page pour rétablir l’image.

je mets pas de code cette fois-ci (sauf si quelqu’un le demande), il n’a pas grand intéret.
il s’agit simplement de tracer une centaine de lineTo autour de deux positions successives de la souris et d’appliquer pour chaque ligne un lineStyle avec une épaisseur de 1, un alpha très faible (genre 1 ou 2%) et pour la couleur un getPixel sur le point de départ de la ligne (il faut donc penser à refaire le lineStyle avant chanque ligne), rien de bien sorcier donc et bien que l’as3 soit conseillé pour que ça ne rame pas trop, l’effet est réalisable avec flash 8.
bon, là sinon j’ai repris le bon vieux bouquin de Penner au chapitre physique et je m’amuse à bouger des objets à coup de forces et tout, je posterait peut-être un truc là dessus un de ces jours