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

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