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.

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