[Impeller] Add rounded superellipse

[dkwingsmt]

Support rounded superellipse.

Part of flutter/flutter#139321 and flutter/flutter#13914, also related to flutter/flutter#91523.

Open questions

• Alternative names:
  • RoundedSuperellipse
  • Squircle
  • ContinuousBorderRectangle (or something like this...)
  • I chose rounded superellipse because this name, albeit its length, precisely describe this shape. "Squircle" is not strictly defined but generally refers any shape intermediate between a rectangle and a circle.
• Alternative definition for corner_radius:
  • Currently the corner_radius corresponds to SwiftUI parameters. To make the shape definition more generalized, we can instead define the corner_radius to be the radius of the corner circles, and make the framework do a look up table.
  • The down side is, not only the work to re-calculate the table, but also that it doesn't completely eliminates the relationship with SwiftUI, since currently the degree of the superellipse (n) is also mapped from the SwiftUI cornerRadius, which is not necessary for the shape per se.
  • To some extent it boils down to the question of whether we'd like this shape to support anything beyond SwiftUI.

Demo

Screen.Recording.2024-11-21.at.5.26.56.PM.mp4

Low ratio: (900, 900, 445)

Mid ratio: (900, 650, 180)

High ratio: (900, 650, 17)

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read and followed the Flutter Style Guide and the C++, Objective-C, Java style guides.
• I listed at least one issue that this PR fixes in the description above.
• I added new tests to check the change I am making or feature I am adding, or the PR is test-exempt. See testing the engine for instructions on writing and running engine tests.
• I updated/added relevant documentation (doc comments with ///).
• I signed the CLA.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[jonahwilliams]

Really excited to see this work coming along!

[jonahwilliams]

I changed canvas.drawRect to use this geometry and then ran an app that draws a few dozen rectangles to get this profile. It looks like the vast majority of overhead is from temporary allocation. That should disappear if you use the preallocated arenas.

Also kAngleStep may be too small for small rectangles. I'm getting ~182 points for a 20x20 squircle. You may want to eyeball some numbers for this based off of the rectangle size.

[mit-mit]

I suggest we simplify the name to just Superellipse. That matches Peit Heins coinage of the term in 1965, where he used the "super"-prefix to denote those curves where n > 2:
https://piethein.com/superellipse/
https://en.wikipedia.org/wiki/Superellipse

[dkwingsmt]

@mit-mit That's the definition I adopted as well. However, my shape is a superellipse of this definition combined with 4 circles at the corner.

[mit-mit]

Sorry, I'm confused, don't all superellipses have rounded corners? And isn't a squircle just a superellipse with n=4? https://news.ycombinator.com/item?id=37871982

[dkwingsmt]

isn't a squircle just a superellipse with n=4?

Well, to my understanding, squircles are a general term that describe any shape intermediate between a rectangle and an oval. There can be infinitely many kinds of squircles. Well I'm probably wrong... but anyway, I shouldn't call my shape squircle.

(Jonah's previous PR said that superellipse with n=4 is called rectellipse. This is the only place I've heard this term though. :) )

don't all superellipses have rounded corners?

You're right, but we're looking for a very specific family of shapes, the shapes used by Apple in its designs (which I call the Apple squircles). I've found (based on prior arts) that the Apple squircles look very much like superellipses, but with the rounded corners more dull. By replacing the tip of the rounded corners with appropriate circular arcs, the resulting shape happens to be almost, if not exactly, identical to the Apple squircles.

I have a technical report in store, where I described my research process and the math behind. My apology that I've only shared the tech report with a few folks, mostly because the PR is still experimental. I plan to publish the tech report as soon as possible. But still, feel free to ask any questions!

Edit: For a preview, here are two sets of comparisons, both are best approximations to a SwiftUI rounded rectangle with .continuous style, w=h=200, r=25.

Best approximation using superellipse:

Best approximation using rounded superellipse:

[mit-mit]

Thanks for all the details, glad to see so much care being put into this!

[flutter-dashboard]

This pull request has been changed to a draft. The currently pending flutter-gold status will not be able to resolve until a new commit is pushed or the change is marked ready for review again.

[dkwingsmt]

@jonahwilliams I've addressed all your comments. Notably:

• The result is now always arranged in a triangle strip (without indices), which should be the most performant way with max compatibility.
• Intermediate data are now stored in the tessellator cache. In fact, the source file doesn't import <vector> anymore.
• The angular step is now calculated dynamically based on dimension. This has reduced the number of points drastically: ~55 for large rectangles with small radius; ~35 for really small rectangles; ~150 for a large, full circle (which has the most curves and thus requiring most points).
• I've implemented CoversArea. The conservative inner rect is formed with the four 45degree points (point M).

I'm not sure how to profile the app, so let me know if there are still performance bottlenecks. Thank you!

[jonahwilliams]

LGTM!

[rydmike]

This is awesome, can't wait for it to become available as shape in Flutter. When it does I will update this and it to the comparison study https://github.com/rydmike/squircle_study