In the movie Watchmen, a character named “Rorschach” wears a mask with animated patterns evoking the images from the test. Here is my version of this animation :

The first sketch was inspired by the wikipedia article on Bézier curves, especially this animation. The others are based on simulations of particles linked with springs.
Click on images to view the applets

Two compilations of the experiments made during the workshop are available on vimeo : http://vimeo.com/23727314 and http://vimeo.com/23753834 enjoy!

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

Utiliser un système de fonctions itérées ça consiste à appliquer de façon répétitive des transformations linéaires à un point. À chaque étape on choisit une fonction plus ou moins au hasard parmi quelques transformations choisies et ça fait des motifs. wikipedia en dit plus long.

Le dessin ci-dessous n’est pas une triforce surpuissante, c’est un triangle de sierpinski avec 8 itération, exécuté avec force, courage et détermination.

Et bien avec un système de 3 fonctions itérées j’aurai pu faire le même sans me briser le poignet et en pas tout tordu.

Après ça, le document parle de “Variations” des fonctions non linéaires qui déforment le motif obtenu jusque là. Les annexes comportent une cinquantaine de ces fonctions rigolotes.
Il est ensuite question de la gestion des couleurs et de la luminosité en fonction de la densité et de la position des points. C’est une partie assez instructive en matière de traitement d’image.
Pour finir, le document propose des processus pour améliorer l’aspect de l’image (supersampling, motion blur…).
Là ça devient compliqué à mettre en place et surtout très lourd pour flash. Donc j’ai laissé tomber.

Finalement voilà trois rendus que j’ai obtenus. Il n’y en a pas plus parce que c’est assez long à sortir (10 minutes environ pour le moindre test) et de toute façon apophysis le fait mieux (plusieurs heures de rendu pour des images autrement complexes).

sources

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