Lab : Actionscript 3 & Perlin Noise > Le feu > Enflammer un mouvement

Un effet par accident

Essais sur les blendmodes dans le cadre de ma recherche sur l'isolation d'objets en mouvements

Héhé comme quoi le hasard peut apporter des effets inattendus smiley myconcept:actionscript & php développement et management en Belgique.

Dans mes premiers essais j'utilisais un filtre de convolution pour comparer les images et déterminer ainsi si mouvement et surtout vélocité et direction de ce mouvement ( voir le résultat ). Le résultat était là mais pas top top donc j'ai décidé d'essayer une autre direction en exploitant un peu les "ptits trucs" de Flash style la comparaison de bitmaps à l'aide des BlendModes .

Bon en partant du premier essai pour détecter un mouvement il me faut une image au temps t et une au temps t+1. Et avec les blends modes il y a peut être quelque chose à faire... Je ne suis pas parvenu au résultat escompté mais suis parvenu à un effet plutôt sympa & avec un bon pc, un effet plutôt réaliste. Je réessaierai donc plus tard pour la détection de la vélocité et de la direction smiley myconcept:actionscript & php développement et management pour applications RIA (internet, intranet et extranet)

Test des blendmodes et utilisation de treshold

Essais sur les blendmode dans le cadre de ma recherche sur l'isolation d'objets en mouvements

Actionscript Bitmap Add Filter
Actionscript Bitmap Add Filter

Donc jeu avec BlendMode sur une superposition de bitmapData de la cam du temps t et t-1 et dont voici mes remarques du moment

  • add : pas mal pour saisir une zone et par exemple faire un effet de ralenti ds un mouvement
  • darken : un peu comme un effet d'ombre chinoise inversée
  • difference : va être utile pour faire la dt (différiencielle temps) en plus y'a des "tons chauds" qui apparaissent style un halo
  • hardlight : un peu comme le darken mais en plus net
  • layer : ressemble au darken avec le test d'image similaire mais en fait même si le rendu est quasi identique le principe est différent -> ici les couleurs ne sont pas modifiées mais la zone est rendue transparente (donc on voit l'image qu'il ya en dessous)
  • lighten : pas grand chose à voir avec un scène trop sombre -> ne conviendra pas pour un travail avec la cam
  • overlay : intéressant pour avoir un effet de "trainée" sur un mouvement
  • screen : pas vu de différence avec l'overlay
  • substract : comme l'overlay mais inversé (trainée foncée à la place d'une trainée claire).

Retrait du bruit, retrait des nuances et révélation (I)smiley myconcept: actionscript & php developments

BlendMode add avec image désaturée & blur
BlendMode add avec image désaturée & blur

Le résultat qui me convenait le plus ici était le add. Mais il fallait encore nettoyer tout ça donc ici j'ai :

  • Appliquer un blur (flou) pour atténuer les parasites liés à la sensibilité à la lumière de ma webcam;
  • Désaturer mon image de référence (celle au temps t) pour traiter moins d'infos et utile pour la suite...

Retrait du bruit, retrait des nuances et révélation (II)

Treshold (add retiré pr la demo)
Treshold (add retiré pr la demo)

Ensuite j'ai voulu avoir un "aplat" plutôt qu'une nuance j'ai donc utilisé threshold pour "nettoyer" l'image.

Ici la démo du résultat du treshold sans le blendMode Add pour se rendre compte de ce qu'il fait réellement.

Retrait du bruit, retrait des nuances et révélation (III)

Treshold + BlendMode
Treshold + BlendMode

Et ici moment de révélation : la réactivation blendMode avec le treshold. A partir de là je me suis dit "houuu y'a peut être moyen de faire un effet "feu" sur ce contour !". smiley myconcept:actionscript php project developments & managements.

Sur le screenshot le déplacement est horizontal mais quand on déplace un objet de haut vers le bas il y avait un effet d'objet en feu qui m'a donné l'envie d'exploiter cet effet "naturel".

Et donc jump dans la doc de référence Actionscript 3 d'Adobe pour voir si il y avait déjà un truc tout fait pour faire une copie d'un objet et le déplacer sur un axe x/y...

Si il n'y a rien j'aurais dupliqué le bitmap avec une boucle qui aurait fait cette duplication avec une décrémentation de la variable y... Je n'ai pas eu besoin de réaliser cette boucle mangeuse de cpu...

L'effet "en feu" grâce au perlin noise et au displacementMapFilter

Première étape : DisplacementMapFilter

Le DisplacementMapFilter de Flash;<br /> L'alpha du filtre avec le blendmode `add` fait<br /> que l'image jaune tend vers le
Le DisplacementMapFilter de Flash;
L'alpha du filtre avec le blendmode `add` fait
que l'image jaune tend vers le "rouge"

Il fallait donc "juste" dupliquer l'image de l'effet vers le haut avec un alpha progressif en fonction de la distance avec la source...


En parcourant la doc sur les filters j'étais tombé sur le DisplacementMapFilter sans y prêter plus d'attention... je me jette donc sur le chapitre avant de me lancer ds des boucles bien lourdes pour simuler cet effet (translation avec alpha)...


Après quelques test, j'ai utilisé le mode "clamp" et l'effet était là mais trop présent et honnêtement je ne savais pas comment l'atténuer "proprement"...


Je me suis rappeler que dans portfolio "incomplet" (c'est son nom) de gskinner, il y avait un effet de flamme avec quelques mots en commentaires dont "PerlinNoise"... c'était la clé !

Seconde étape : le Perlin Noise & un colormatrixfilter pour un effet plus flamboyant

Perlin Noise + Matrix Color Filter
Perlin Noise + Matrix Color Filter

Retour à la doc et bon là je me suis senti con mais à un point : voici l'intro de la doc pour la méthode perlinNoise() : "The Perlin noise generation algorithm interpolates and combines individual random noise functions (called octaves) into a single function that generates more natural-seeming random noise. Like musical octaves, each octave function is twice the frequency of the one before it. Perlin noise has been described as a "fractal sum of noise" because it combines multiple sets of noise data with different levels of detail."

Bon c'est peut être parlant pour certains mais moi déjà ramé pour pondre les 2 lignes des ColorMatrixFilter que j'utilise ici alors cette description...

J'ai fait donc un petit tour sur le net et me suis rendu compte qu'on pouvait faire plusieurs choses vraiment top avec cette méthode : génération de flammes, de fumée, de nuages,... Il ne faudra bientôt plus combustion pour faire des effets spéciaux pour un film... un webcam, un portable et voilà.

Et dire que ça existe depuis flash8... Enfin mieux vaut tard que jamais, à l'aide de deux trois exemples, des explications sur comment ça marche de http://freespace.virgin.net/hugo.elias/models/m_perlin.htm et quasi 2h de test sur les paramètres, je suis parvenu à pondre ma ligne et voilà le résultat

Finalisation

Cliquez sur l'image pour lancer l'animation Flash
Cliquez sur l'image pour lancer l'animation Flash

J'ai ensuite pauffiné avec un bmp gris en darken (blendmode) sur le bmp de l'effet et voilà... Bon mon but premier était de saisir une une zone et de mémoriser ce qui avait bougé. Mais même en ayant foiré cette partie je suis content de ce résultat trouvé "par accident" smiley myconcept:actionscript & php développement et management pour applications RIA (internet, intranet et extranet).

Evolutions possibles pour ce script : à mon avis les CMF et le paramètrage du perlinNoise sont améliorables pour obtenir un meilleur rendu.

Poids total de l'anim swf... 1,25ko... Mais bon faut cpu bien ventilé smiley myconcept:actionscript & php développement et management pour applications RIA (internet, intranet et extranet)

Voir la video de demo
Vous avez une webcam ? Embrasez vous en essayant l'anim (CPU min required : 2Ghz) !
- MY Concept FlashPlayer Loader for actionscript demo's and movie/animation player-