https://kotlinlang.org logo
Join Slack
Powered by
And something a bit less “analog” if you will, pro...
# compose-desktop
k
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
👍🏻 1
👍 6
r
Are you using just SDFs? Or something else?
k
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
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
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
The “issue” with SDFs is that the shapes have to be drawn by the shader
k
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
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
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
c
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
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
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
Interesting, thanks! Btw what does SDFs stand for?
k
Signed distance function
r
Oh yeah that too
k
Can be used for very efficient and parallelized shader based effects
u
sunday's reading 😄 thanks !
r
Not always efficient though :)
u
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
Pretty much yeah
u
sweet
9 Views
Open in Slack
PreviousNext
Powered by