Le Blog du Crabe

Voilà un sujet que j'avais laissé de côté mais qu'un certain Mickaël m'a ressorti des cartons : Les metaballs !
Comme au bon vieux temps des demomakers, il fallait percer le secret de cet effet visuel plutôt saisissant...

Afin de bien comprendre le fonctionnement des metaballs, il faut découper l'effet en plusieurs étapes.

Je vous ai donc préparé un exemple swf qui reprends étape par étape la fabrication de ces boules magiques :

Le principe est le suivant :

* on crée un conteneur avec les elements qui vont subir l'effet (des cercles en général)
ici ce sont des cercles qui se déplace dans la zone d'affichage en rebondissant sur les bords.

* on applique un glow de longue distance qui crée près des cercles le fameux effet blob
var glow = new GlowFilter();
glow.color = 0x000000;
glow.blurX = glow.blurY = 60;
glow.strength = 4;
glow.quality = 3;
cercles_mc.filters = [glow];

La portée du glow est 60 pixels !! ce qui crée l'effet blob quand 2 cercles sont proches.
Du coup ce movieclip doit être placé en dehors de l'écran (il ne sera pas affiché)

* on crée un bitmapdata dans un nouveau movieclip et on copie le movieclip des cercles à l'enterFrame
blob_bmp = new BitmapData(400, 300, true, 0);
blob_mc.attachBitmap(blob_bmp, 1);

blob_mc.onEnterFrame = function (){
blob_bmp.fillRect(blob_bmp.rectangle, 0);
blob_bmp.draw(cercles_mc);
};

On obtient un clône permanent des cercles.
Il existe une méthode plus propre qui permettrait de garder les cercles dans l'écran, mais il faudrait utiliser 2 bitmaps supplémentaires.

* on utilise la fonction threshold sur ce bitmapdata pour suppromer les couleurs éloignées des cercles
blob_mc.onEnterFrame = function (){
blob_bmp.fillRect(blob_bmp.rectangle, 0);
blob_bmp.draw(cercles_mc);
blob_bmp.threshold(blob_bmp, blob_bmp.rectangle, new Point(0,0), "!=", 0xFF000000, 0x00000000);
};

Notre glow étant noir, il faut nettoyer tout ce qui n'est pas noir pour garder le coeur du glow.
On utilise la fonction trhreshold en remplaçant tout ce qui n'est pas noir par une couleur transparente.

* on rajoute un glow puissant pour faire le contour du movieclip contenant le bitmapdata
var glow2 = new GlowFilter();
glow2.color = 0xFFFFFF;
glow2.blurX = glow2.blurY = 8;
glow2.strength = 10;
glow2.quality = 1;
blob_mc.filters = [glow2];

Pour obtenir les contour de l'ensemble du blob on rajoute un glow sur le movieclip glow_mc.

L'effet semble gourmand en cpu, donc à utiliser avec modération.

Source : cliquez ici