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

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.

J’ai fabriqué ce truc en cours de flash, alors que l’intervenant nous signalait que la classe Shape était très optimisée pour les graphiques. Je me suis donc empressé de créer 2000 shapes avec un coup de lineTo dedans pour me faire des particules. Sur le conseil de l’intervenant j’ai remplacé le lineTo par un drawRect plus efficace. J’ai ainsi pu monter à 14000 particules.

Plus tard Nicoptère m’a incité à faire des setPixels sur un bitmapData. Là à 50000 particules on s’en sort pas mal.

Pour le mouvement c’est basé sur la même chose que pour ces lignes. L’idée c’est ça:

1
2
3

vitesse = (position de la souris - position) * elasticité
vitesse *= frottement
position de la particule += vitesse

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