https://kotlinlang.org logo
#compose-desktop
Title
# compose-desktop
k

Kirill Grouchnikov

02/01/2023, 7:06 PM
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.
👍🏻 1
👍 6
r

romainguy

02/01/2023, 7:08 PM
Are you using just SDFs? Or something else?
k

Kirill Grouchnikov

02/01/2023, 7:13 PM
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?
So blur on the circles, then color dodge, then color burn
r

romainguy

02/01/2023, 7:15 PM
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)
k

Kirill Grouchnikov

02/01/2023, 7:27 PM
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.
SDFs might require a bit more code if you have an arbitrary number of shapes, I think.
r

romainguy

02/01/2023, 7:33 PM
The “issue” with SDFs is that the shapes have to be drawn by the shader
k

Kirill Grouchnikov

02/01/2023, 7:39 PM
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.
https://twitter.com/MengTo/status/1583201753461559296 looks pretty good. Might be annoying though after a while.
Another example at https://twitter.com/DLX/status/1540996409025085440 with blur and alpha threshold
r

romainguy

02/01/2023, 7:57 PM
Have you tried using the built-in color dodge/burn blend modes btw instead of using a custom shader?
I guess that would require separate graphicsLayers
(which doesn’t mean they would be rasterized though)
k

Kirill Grouchnikov

02/01/2023, 8:05 PM
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.
e

ephemient

02/02/2023, 12:21 AM
c

czuckie

02/02/2023, 9:00 AM
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!
u

ursus

02/05/2023, 1:27 AM
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?
r

romainguy

02/05/2023, 1:28 AM
There are different ways:
• What you described (and honestly it's fine)
• Using marching squares (requires working on Bitmaps)
• The solution linked by Kirill which blurs several shapes together and then uses blending effects to effectively threshold the result to "merge" the shapes
u

ursus

02/05/2023, 1:31 AM
Interesting, thanks! Btw what does SDFs stand for?
k

Kirill Grouchnikov

02/05/2023, 1:51 AM
Signed distance function
r

romainguy

02/05/2023, 1:51 AM
Oh yeah that too
Can be used for very efficient and parallelized shader based effects
u

ursus

02/05/2023, 1:57 AM
sunday's reading 😄 thanks !
r

romainguy

02/05/2023, 2:00 AM
Not always efficient though :)
u

ursus

02/05/2023, 2:18 AM
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?
r

romainguy

02/05/2023, 2:24 AM
Pretty much yeah
u

ursus

02/05/2023, 2:25 AM
sweet
7 Views