de quoi s'agit-il ? ben à la base ça vient d'une explication de comment faire une texture aléatoire pour simuler l'élévation sur des modèles en 3D ça fait un peu prétentieux dit comme ça mais en 2D c'est tout con en fait, comme d'habitude, il suffisait d'y penser et je n'y aurais pas pensé.

Dans ce script on a un bitmapData et un sprite. le principe c'est de dessiner successivement des zones géométriques (triangles) et de repasser un point à 0 quand il atteint un seuil (définit à l'instanciation) et ce jusqu'à obtenir un motif d'aspect organique. C'est le même principe que les L-systems, les attracteurs étranges, les DLA : une règle simple, des itérations et un résultat inattendu ^^
à 100 itérations, on a atteint le seuil et les pixels ont été rabattus vers le noir et recommence un cycle (zones sombres) alors que les derniers atteignent le seuil (vert clair).

Après (seulement) 1000 itérations on obtient une forme d'aspect organique.

ce qui est bien c'est qu'un bitmapdata c'est rectangulaire et qu'un rectangle ça donne 2 triangles rectangles, et que leurs hypothénuses ont le même centre qui est le centre du cercle circonscrit mais on s'en fout. le tout c'est qu'on puisse facilement faire un cercle autour, à une distance raisonnable(hypo/2=rayon) et créer un triangle qui a une forte probabilité de traverser notre bitmapData.

Un triangle est créé aléatoirement à partir de trois points du cercle circonscrit ( voir la fonction drawTriangle(), du vite fait ) donc le dessine sur le sprite avec une opacité assez faible pour pouvoir etre cumulee avant d'arriver au seuil de couleur mais suffisament opaque pour qu'il atteigne le seuil. c'est un gros problème, pour l'instant j'ai soit des valeurs fixes(opaciityType='arbitraire') soit une valeur proportionnelle ((255/seuil )/ 100) mais qui ne passe pas quand le seuil est trop eleve... c'est un probleme

ensuite on copie le canevas dans le bitmapData et enfin on vérifie pour chaque point du bitmapdata si la valeur d'une des composantes excède le seuil. si oui on la réinitialise.

Un autre de mes héros de la géométrie algorithmique c'est Sir Edwin Heijmen ( poeticterror.com comme son nom l'indique) et il bosse entre autres sur des automates cellulaires. je mets le lien de sa machine hodge podge ; c'est comme mes scripts un peu ça va tout manger tes ressources (on a au moins ça en commun ^^) sérieux même la biproc du boulot tire la tronche hodge podge

un autre hodge podge en action je suis atrophié de l'allemand donc je comprends rien mais c'est chouette.

Dans mon script il y a une methode hodgePodge() qui admet 3 parametres :

  • iterations : l'iteration a partir de lauelle on arrete le hachage et on lance le hodgepodge
  • timer : pour re setter le timer (plus lent en general) pour eviter de faire un ecrise d'epilepsie
  • opacity: pour modifier l'opacite utilisee par le hodgepodge, plus elle est basse, plus le mouvement est lent
Ca fait qu'au delà de X itérations, on replaque un rectangle entier et ça donne l'effet psychédélique de vague du hodge podge mais ça n'évolue pas.

la démo merveilleuse:

pour les mauvas qui utilisent IE, la page toute seule

A l'instanciation on passe une chiee de parametres mais ils restent accessibles (je les ai mis en public meme si c'est pas tres orthodoxe). Le constructeur ressemble a ca : 

* constructeur :
* @param	parent			le displayObject parent
* @param	w				largeur : defaut 128px
* @param	h				hauteur : defaut 128px
* @param	seuil			seuil de tolerance avant de reinitialiser un pixel du bitmapData : defaut 128
* @param	iterations		nombre d'iterations : defaut 1000
* @param	couleur			couleur dessin : defaut 0xFFFFFF
* @param	background		couleur d'arriere-plan : defaut 0x000000
* @param	size			multiplicateur du diametre utilise pendant le dessin des triangle : defaut 1
* @param	scale			facteur de mise a l'echelle du bitmap : defaut 1

mes réglages sont de haut en bas et de gauche à droite :

// par defaut avec le calcul des opacites base sur le seuil
var fn:FractalNoise = new FractalNoise(this);
fn.opacityType = 'proportionnelle'

//un magma beurk vert qui loope a 1000 (fait tres mal a yeux au debut mais vaut le coup d'attendre)
var fn1:FractalNoise = new FractalNoise(this,125, 125, 128, 	5000, 0x00FFCC, 0x000000 );
fn1.opacity = 0.09
fn1.hodgePodge( 1000, 30, 0.05)
fn1.x = 250

//un magma beurk rouge arrete plus tot : le rayon est * 1.3 donc le motif est plus gros 
var fn2:FractalNoise = new FractalNoise(this,125, 125, 140, 	1500, 0xFF0000, 0x000000, 1.3 );
fn2.opacity = 0.1
fn2.hodgePodge( 500, 30, 0.025 )
fn2.y = 250


//un cloud tres doux a cause de son rayon * 5 qui loope a 5000 iterations
var fn3:FractalNoise = new FractalNoise(this,125, 125, 150, 	10000, 0xFFFF00, 0x000000, 5, 2);
fn3.opacity = 0.03
fn3.hodgePodge(5000, 30, 0.025 )
fn3.x = 250
fn3.y = 250
et le zipounet
voila, après il faut faire des tests. une petite précision de taille on peut dessiner sur le canvas avant ou pendant le process et ça fait des trucs de ouf malade ! on doit pouvoir rajouter une paire de filtres de base pour finir de staurer le bouzin.

Si un coup tu te demandes si des fois ça servirait à quelque chose, je te rassure de suite, la réponse est non.
enfin pas tel quel... enfin... comme d'hab quoi :)
c'est tres lourd mais ca peut etre precalcule et donner des textures procedurales pour de la 3d.
l'animation hodgepodge n'est pas tres gourmande en fait donc ca peut etre une idee pour animer de textures; je crois qu'ils se servent d'une technique comme ca dans les jeux video pour faire looper un couleur a moindre frais.
ca pourrait aussi servir afaire ce qu'on fait avec un cloud photoshop mais j'ai jamais compris l'interet alors je saurais pas dire.
Ca peut aussi faire des chouettes patines en extrayant une coucheou une plage de couleurs (paletteMap), du sale quoi, ou des images genre microscope(cf.les magma).
sinon avec un motif complexe, ou anime ca peut donner des trucs de fou furieux mais je voulais garder aussi simple que possible pour voir le procede.