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.

Là il s’agit du tramage utilisé pour la compression des gifs , dit “ordered dithering”.

Cette fois si tu n’as pas de webcam tu pourras juste continuer à admirer la licorne que tu vois déjà.
En super bonus, les sources

Pour les deux j’ai utilisé Pixel Bender et c’est pas fantastique. C’est lent, on a pas le même rendu entre le toolkit et flash et surtout il y a une tonne de limitations, regarde le .pbk du deuxième exemple, tu verras comme c’est nul.

Pour finir, si tu as aimé ça, tu voudras lire ces documents : un très complet et un très succin et aussi plein de trucs rigolos.

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