And something a bit less “analog” if you will, prototyping shape merging and splitting. Not sure how much further I’m going to take this. I’ll put up the code for this online for people to play with.

Are you using just SDFs? Or something else?

Kinda the steps outlined in https://twitter.com/double__glitch/status/1618213807503060993 except that i have to apply a bit more intermediate steps to make it look like this. Maybe differences between Figma and “real” code?

Oh interesting. You could do this with SDFs and get the “blur” for free (and do more than just merge the shapes, you can trivially do other boolean ops)

This one is the “analog” one (with sort of negative glow around the shapes). It’s a combination of blur, color dodge and color burn. The result is not quite what is shown in that Twitter thread. This one is applying an intermediate sharpening step after color dodge, and then three color burns (with different src / dst on the first burn pass) to achieve a more constrained appearance of the two circles as they come together and apart.

The “issue” with SDFs is that the shapes have to be drawn by the shader

This can probably be used for something fancy with a floating action button. You click it, and the secondary options “spawn” from it, and once they get to their final place, they fade in the icons. If every button is a separate composable, and some sort of a shader is applied at the container level, you can keep each secondary button as its own thing and not to fold everything into the shader.

Have you tried using the built-in color dodge/burn blend modes btw instead of using a custom shader?

I wasn’t sure where to apply them. I tried applying

Modifier.blur

on the canvas, and then do two

drawRect

with the blend modes, but it was all over the place. Part of it might also be that the blur was getting applied to the whole thing, circles and rectangles combined. And a separate

Canvas

with just two rectangles wouldn’t apply the color dodge / burn on the content of the first one.

looks a bit like the https://www.sinasamaki.com/5-metaball-animations-in-jetpack-compose/ going around last week

You click it, and the secondary options “spawn” from it,

I would be the user, spamming your RUM endpoint with lots and lots of clicks just trying to figure out how the effect was done. I'll be damned if it isn't incredibly super satisfying to watch! I look forward to melting my 🧠 trying to understand the code!

Can someone ELI5 how does the goey effect work? What kind of math? I can only think of basically drawing every keyframe with Paths and somehow interpolating the points? That must be exteremly not worth it 😄 So, something smarter?

There are different ways:

Interesting, thanks! Btw what does SDFs stand for?

Signed distance function

Oh yeah that too

sunday's reading 😄 thanks !

Not always efficient though :)

So I skimmed through some of the stuff, so the trick is to have the shapes blurred offscreen, where the blur seems to be gradient applied to alpha -- and as they begin to overlap, the alpha of the given pixels get added up, and if reaches some thershold it gets set to 1 or 0?

Pretty much yeah

sweet