Lab : Actionscript 3 & Perlin Noise > Pas de fumée sans feu !
Faire de la fumée en actionscript
Noise vs Perlin Noise

A gauche noise à droite perlin noise
Exemple de l'utilisation du Noise : Effet Neige TV (animation)
var myBitmap:BitmapData = new BitmapData(150, 150,false, 0xff000000);
var image:Bitmap = new Bitmap(myBitmap);
addChild(image);
function neigeTv(e:Event):void{
myBitmap.noise(Math.random()*100, 0, 255, 7,true);
}
this.addEventListener(Event.ENTER_FRAME,neigeTv);
Exemple de l'utilisation du Perlin Noise : Nuages
var myBitmapDataObject:BitmapData = new BitmapData(150, 150, false, 0xff000000); var seed:Number = Math.floor(Math.random() * 1000); var channels:uint = BitmapDataChannel.GREEN | BitmapDataChannel.BLUE myBitmapDataObject.perlinNoise(100, 80, 6, seed, false, true, channels, false, null); var clouds:Bitmap = new Bitmap(myBitmapDataObject); addChild(clouds);
Le choix : Perlin Noise
Durant mes tests sur le paramétrage du PerlinNoise en travaillant sur la recherche du feu en actionscript, je suis tombé sur un rendu très prometteur ; le Perlin Noise me semblait alors la meilleure des solutions.
Deplus PerlinNoise est entre destiné à ce genre d'effet. Il ne reste donc "plus qu'à" mettre le feu à un MC et de provoquer la fumée produite par ce feu à l'aide du résultat de 15 ans d'études et de recherche de M. Perlin sur son algo
.
Application du feu sur un objet fixe et instanciation de la fumée
Le feu

Prévoir des éléments de petite taille pr les tests
Comme lors de la recherche sur le feu , on va prendre un movie clip et lors de l'"EnterFrame" on va créer un bitmapData sur lequel on va mettre un blendmode en add, un blur, un matrix color filter pour faire varier la flamme, et un perlin noise pour la diffusion.
Comme tout en flash, plus les éléments de travail sont grands, plus votre pc va avoir besoin de ressources disponibles aussi pour mon dev j'ai utilisé le dessin de la flamme d'une bougie ( boule légèrement déformée avec dégradé).
La fumée (I)

La fumée avec les mêmes paramètres que le feu
Même principe que le feu sauf que le Bitmap aura un alpha plus marqué (pr la démo il est à 0.3), que le displacementMapFilter "s'étendra plus sur l'axe des y" et que l'on va jouer avec un bitmapdata gris clair que l'on va décaler légèrement vers le haut histoire que la fumée ne commence pas de la base du feu.
Vous pouvez utiliser les mêmes paramètres que pour le Perlin Noise du feu mais en les laissant telquels vous aurez une fumée trop "carrée", pas assez diffuse (cf illu).
La fumée (II)

La fumée une fois la baseY augmentée
On ne va jouer que sur la base Y : pour le feu je l'avais mis à 10, pour la fumée je vais la pousser à 100 et diminuer un petit peu la base X du filtre histoire de rendre la fumée "plus droite" (une fois que vous aurez joué avec le filtre vous comprendrez)
.
De cette manière la fumée aura un comportement cohérent avec celui du feu (il est d'ailleurs intéressant d'utiliser le même random dans les filtres pour les deux bitmapDatas pour rendre la relation feu / fumée encore plus cohérente (une flamme plus "puissante" donnera alors une fumée de même intensité).
Voir le résultat : fire, flames & fumes demo in as3