And something a bit less “analog” if you will, prototyping shape merging and splitting. Not sure how...

# compose-desktop

[Kirill Grouchnikov]

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.

blobs2.mov

[romainguy]

Are you using just SDFs? Or something else?

[Kirill Grouchnikov]

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?

[Kirill Grouchnikov]

So blur on the circles, then color dodge, then color burn

[romainguy]

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)

[Kirill Grouchnikov]

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.

[Kirill Grouchnikov]

SDFs might require a bit more code if you have an arbitrary number of shapes, I think.

[romainguy]

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

[Kirill Grouchnikov]

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.

[Kirill Grouchnikov]

https://twitter.com/MengTo/status/1583201753461559296 looks pretty good. Might be annoying though after a while.

[Kirill Grouchnikov]

Another example at https://twitter.com/DLX/status/1540996409025085440 with blur and alpha threshold

[romainguy]

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

[romainguy]

I guess that would require separate graphicsLayers

[romainguy]

(which doesn’t mean they would be rasterized though)

[Kirill Grouchnikov]

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.

[ephemient]

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

[czuckie]

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!

[ursus]

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?

[romainguy]

There are different ways:

[romainguy]

• What you described (and honestly it's fine)

[romainguy]

• Using marching squares (requires working on Bitmaps)

[romainguy]

• The solution linked by Kirill which blurs several shapes together and then uses blending effects to effectively threshold the result to "merge" the shapes

[ursus]

Interesting, thanks! Btw what does SDFs stand for?

[Kirill Grouchnikov]

Signed distance function

[romainguy]

Oh yeah that too

[Kirill Grouchnikov]

https://www.iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm

[Kirill Grouchnikov]

https://raphlinus.github.io/graphics/2020/04/21/blurred-rounded-rects.html

[Kirill Grouchnikov]

Can be used for very efficient and parallelized shader based effects

[ursus]

sunday's reading 😄 thanks !

[romainguy]

Not always efficient though :)

[ursus]

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?

[romainguy]

Pretty much yeah

[ursus]

sweet