Demonstrandum
commented
2 years ago Classes of rounded rectangles:
- Squircle: The "superellipse" is a generalised form of an ellipse, mathematically succinct, but perhaps not the best looking in terms of continuous smoothness.
- Plain cubic Bézier corners: A corner radius is determined by the proximity of the nodal points to the corners, as well as the magnitude of the control points. Looks smooth, but sharp-ish, could be a stylistic choice.
- Careful Bézier corners: Like above, but with two extra points picked on the curve itself. Helps tone down the perceived sharpness that comes with the above straightforward approach. (iOS 7 approach)
It should be noted that the corners should still essentially be spliced onto a rectangle, since applying the methods to non-square rectangles leaves you with corners distorted on the dimension of the longest side of the rectangle. This saves computation (only compute one corner, copy it four times), leverages us greater control of the look on the vertex level (without trying to derive some painful formula) and lets us turn on and off each corner as we choose (like CSS: border-top-left-radius: 5pt).
More shapes in shapes package. Squircle continuous rounded rectangle with opengl triangle strip. https://www.desmos.com/calculator/sy6c5tuake
As well as regular polygons, with their polygoid (?) rounded variants.
https://www.desmos.com/calculator/qyf9pvxosz https://www.desmos.com/calculator/uwrivivhmo
https://www.johndcook.com/blog/2020/07/05/squircle-corner-radius/ https://www.figma.com/blog/desperately-seeking-squircles/