Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ring/Pie improvements #22

Open
AAAYaKo opened this issue Sep 24, 2024 · 8 comments
Open

Ring/Pie improvements #22

AAAYaKo opened this issue Sep 24, 2024 · 8 comments

Comments

@AAAYaKo
Copy link
Collaborator

AAAYaKo commented Sep 24, 2024

For pie and ring
Add start angle property
For reasons of similarity to figma, layout and animation
smth like this:
https://www.shadertoy.com/view/tlSGzG

image

Remove sdf arc, instead add corners rounding property to sdf ring(and rename sdf ring to arc)

2024-09-24.150027.mp4
@AAAYaKo
Copy link
Collaborator Author

AAAYaKo commented Sep 24, 2024

2024-09-24.150418.mp4

@TLabAltoh
Copy link
Owner

I am considering how to render arc shape with corner rounding option like above video. But in my knowlage, maybe it needs spline to round arc's corners (but not sure).

I don't want to use the spline approach for simple shapes because the distance function for splines is the heaviest and easily affects performance. So currently this update is not exactly the same as the video above.

video0.mp4

video1.mp4

@AAAYaKo
Copy link
Collaborator Author

AAAYaKo commented Sep 25, 2024

Screenshot_20240925_091335_Edge
No, I thought it could be done as mentioned in the article, if you have to use a spline for that then it's better not to do it.

@TLabAltoh
Copy link
Owner

About my latest update, I give up to implement exactly same as video you attached. So spline is not used, it is just implemented using round function as you mentioned.

@AAAYaKo
Copy link
Collaborator Author

AAAYaKo commented Sep 27, 2024

I changed Arc settings a bit to be similar to figma settings. Also in its current form, there is no need for Pie anymore. There's probably no need for Circle too, but for performance and compatibility reasons I'd keep it. Maybe it makes sense to make one Circle script like in figma and swap shaders.
fill = 1 or -1 and ratio = 1 => circle
fill = 1 or -1 => circle with onion
ratio = 1 => pie
otherwise => arc

@AAAYaKo
Copy link
Collaborator Author

AAAYaKo commented Sep 27, 2024

What's changed:
Start angle is now measured in degrees
Width in pixels has been replaced by the ratio of the empty part to the filled part
Fill is now bidirectional
Rounding now measured in pixels
Start angle 0 is conformed to figma and math standards

@AAAYaKo
Copy link
Collaborator Author

AAAYaKo commented Sep 27, 2024

2024-09-27.155307.mp4

TLabAltoh added a commit that referenced this issue Sep 28, 2024
@TLabAltoh
Copy link
Owner

TLabAltoh commented Sep 28, 2024

I agree with the use of shader swaps for optimisation. And when considering the integration of circle based shapes into one. Maybe it is worth inheriting some SDFUI classes from each other like below because I want to use optimization with shader swap not only for Arc but also for Pie and others (like CutDisk) to reduce if else statement from shader.

public class SDFArc: SDFPie {}
public class SDFPie: SDFCircle {}
public class SDFCutDisk: SDFCircle {}

I created a new branch and put my current approach in there for now (Currently, this branch is not intended to merge into the master immediately, so the shader is not modified and the if else statement still remains but If you are interested, I would appreciate any opinions or new commits for this branch).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants