GithubThis page is at least 10 years old !
Metaballs 2D
Attention: Rendu en temps réel, cette page peut faire souffrir votre navigateur.
Plusieurs façons de générer le blob (bitmap de base). Avec x et y allant de -1 à 1, sqrt = racine carrée:
- En prenant la distance normalisée à partir du centre (Pythagore): v = sqrt(x² + y²) / sqrt(2)
Ceci formera une sorte de cône (profil linéaire).
A noter que le centre aura la plus petite valeur, il est peut être préférable d'avoir l'inverse. - En prenant le cosinus de la distance normalisée: v = cos(sqrt(x² + y²) / sqrt(2) * pi)
Ceci formera une bosse (profil arrondi).
Plots Wolfram pour la distance, l'inverse de la distance, et cos(distance):
Avec ces fonctions, on peut créer un tableau 2D dont chaque valeur correspondra à une "hauteur" précalculée ou générée en RAM. Ce tableau sert de "pinceau" qui va permettre de former des "montagnes". Si vous avez joué à SimCity, pensez au curseur qui permet d'éditer le terrain.
Tous ces guillemets sont la pour indiquer comment j'aime imaginer la méthode.
Chaque "ball" de l'effet n'est en fait que des coordonnées 2D. On peut utiliser une table en ROM pour définir leur trajectoire, ou faire une somme pifometrique de sinus pour créer une trajectoire intéressante en temps réel. Pour chaque "ball", il convient d'avoir une trajectoire différente (index de départ différent dans la table, déphasage, formule différente...).
A chaque nouvelle image, un buffer 2D de la taille de l'affichage final est vidé. Pour chaque "ball", le tableau du "pinceau" est ajouté au buffer à la position correspondante. Il est très important d'ajouter le bitmap et non pas de le copier.
Si le tableau est simplement copié (blit), les bords seraient visibles: c'est moche et ça ne marche pas:
La valeur de chaque pixel doit être limitée à la valeur maximum (255 si le buffer est 8 bits) pour éviter de warper si on la dépasse après l'addition.
Afin de lisser le sommet des "montagnes", on peut atténuer le buffer au lieu de l'effacer. Cela produit des traînées derrière le mouvement des "balls" et peut donner un meilleur rendu. Au lieu de mettre toutes les valeurs du buffer à 0 à chaque nouvelle image, on peut dire par exemple diviser chaque valeur par 2. Plus le diviseur est petit, plus les traînées sont longues.
Tout ce qu'il reste à faire pour donner le rendu final, est de passer une fonction seuil sur le buffer entier. Le choix du seuil peut se faire à l'oeil, pour différent rendus. Si la valeur du pixel du buffer est en dessous du seuil, alors il est à 0, si il est au dessus, il est à 1. Cela revient a ne choisir qu'une fine "strate" des "montagnes".
A partir de là, toutes les dérives sont possibles ! Par exemple, en faisant varier le seuil et la couleur:
Ou en utilisant plusieurs seuils et des couleurs différentes pour chaque:
