opened
rcrath
username_0
I really like the look of metaball, but can't figure out where it gets is unique "burnt-in" look.  I tried to figure it out from the code, but all I see are standard weight, leading, tracking, etc, nothing that would account for the unique shape of the characters (ie, larger at the joints).  Can you explain this one a little?  Thanks. 

PS, reminds me a little of [averia](http://iotic.com/averia/).
Metaball?
issue
created
bbbooo313
username_1
让我想起了一点dapingtai4455.com
comment
created
kawa-yoiko
username_2
I was curious as well and dug into it, sharing it here ^ ^

(tl;dr: blur + threshold)

You can see that sprites are placed along the strokes and animated, which in its final form looks like this:

<img width="421" alt="metaball-1" src="https://user-images.githubusercontent.com/45892908/64308727-d8421c00-cfcc-11e9-84c5-6a4c49119fde.png">

But before being drawn to the screen the entire canvas goes through two filters.

https://github.com/username_3/leonsans/blob/920bc2b2d0fdd23a220590c36c9bfc34e56b44ac/examples/metaball-pixi.html#L93-L94

The blur filter is provided by PixiJS:

https://github.com/username_3/leonsans/blob/920bc2b2d0fdd23a220590c36c9bfc34e56b44ac/examples/metaball-pixi.html#L61-L63

The image after this step:

<img width="445" alt="metaball-2" src="https://user-images.githubusercontent.com/45892908/64308828-2f47f100-cfcd-11e9-8d62-a844ab3ea07d.png">

The threshold filter is built through a WebGL fragment shader:

https://github.com/username_3/leonsans/blob/920bc2b2d0fdd23a220590c36c9bfc34e56b44ac/examples/metaball-pixi.html#L66-L82

The shader is executed for each pixel. It takes the corresponding pixel on the previously drawn image, finds its opacity, and return a given color if it's larger than a given threshold, or transparency otherwise. Uniforms are basically global constants in shaders. In case you are interested, [the book of shaders](https://thebookofshaders.com/) is a good resource.

Final result:

<img width="433" alt="metaball-3" src="https://user-images.githubusercontent.com/45892908/64308767-ff98e900-cfcc-11e9-831c-6ed2646a8919.png">

---

To see the very first image for yourself, apply the following diff, run a local static file server (`python3 -m http.server 8000`, otherwise sprite images won't load) and visit `http://localhost:8000/examples/metaball-pixi.html`:

```diff
--- a/examples/metaball-pixi.html
+++ b/examples/metaball-pixi.html
@@ -74,11 +74,7 @@
                     '{',
                     '    vec4 color = texture2D(uSampler, vTextureCoord);',
                     '    vec3 mcolor = vec3(mr, mg, mb);',
-                    '    if (color.a > threshold) {',
-                    '       gl_FragColor = vec4(mcolor, 1.0);',
-                    '    } else {',
-                    '       gl_FragColor = vec4(vec3(0.0), 0.0);',
-                    '    }',
+                    '    gl_FragColor = vec4(mcolor * color.a, 1.0);',
                     '}'
                 ].join('\n');
 
@@ -90,7 +86,7 @@
             };
 
             const thresholdFilter = new PIXI.Filter(null, fragSource, uniformsData);
-            stage.filters = [blurFilter, thresholdFilter];
+            stage.filters = [thresholdFilter];
             stage.filterArea = renderer.screen;
 
             controll = {
@@ -106,7 +102,7 @@
                             y: 0
                         });
                         TweenMax.to(particles[i].scale, 3, {
-                            delay: 0.001 * i,
+                            delay: 0.02 * i,
                             x: particles[i].saveScale,
                             y: particles[i].saveScale,
                             ease: Circ.easeOut
```
comment
created
cmiscm
username_3
Thanks for the detailed comment, also this article I wrote last year would be helpful.
https://medium.com/@username_3/gooey-effect-for-chamoy-creative-4ce0b5ff5baf
comment
closed
rcrath
username_0
issue
created
rcrath
username_0
Thanks @username_2 and @username_3! Looking forward to playing with this.  If I can figure things out, I might even replace my [logo](http://way.net), which has been on my site since 1995!
comment