4 ms·

Fun fact: iOS app icons are not rounded rectangles (rectangles with 90 degree arc corners) but squircles, which are roughly superellipses with n=5. The linked W

Fun fact: iOS app icons are not rounded rectangles (rectangles with 90 degree arc corners) but squircles, which are roughly superellipses with n=5. The linked Wikipedia articles also remark this.

busymom0 6y ago
Same thing with the rounded corner of the iPhone X series. One time I was trying to make one of he UIView match the corner radius of the screen and it wasn’t matching until I learnt that the rounded corners of the screen/device is a 38.5 squircle (not sure if that’s the real term). Basically instead of having a sharp curve, it starts much earlier.
- foxes 6y ago
  If you compute the curvature it starts flat, does a few bump and then flattens again (this curvature is not a very smooth function however). An n-ellipse is not quite the right curve. Apple used a bunch of Bezier curves. I think their design could be made a little more aesthetic if you used some smoothed piecewise bump (like a Gaussian nearly). You can numerically solve for the curve given the curvature and then approximate it.
- saagarjha 6y ago
  That’s a slightly different curve, and I believe the corner radius for that is defined to be 39.
  - busymom0 6y ago
    This is where I originally learnt about it. Seems like it's called a continuous corner, or “squircle”: https://kylebashour.com/posts/finding-the-real-iphone-x-corner-radius https://kylebashour.com/posts/finding-the-real-iphone-x-corn...
    - saagarjha 6y ago
      The corner radius is 39; you can find it by peeking inside iOS. CALayer has "continuous corners", which are very similar to but just slightly different than the app icon shape, which is a 16-part Bézier curve generated inside of the MobileIcons framework. This curve is as far as I can tell identical to the one that UIBezierPath.init(roundedRect:cornerRadius:) will give you when the corner radius is 22.5% of the side length. (Note that the app icon on the home screen, being of a constant size, is actually generated via an image mask rather than dynamic clipping.)
ape4 6y ago
https://en.wikipedia.org/wiki/Squircle https://en.wikipedia.org/wiki/Squircle Please don't vote this up ;)
DominikD 6y ago
Fun fact: physical controls on the second generation Zune (released 2008) were squircles.
jacobolus 6y ago
Raph also linked to https://www.figma.com/blog/desperately-seeking-squircles/ https://www.figma.com/blog/desperately-seeking-squircles/
dirtydroog 6y ago
It reminds me of the techniques used in railways to smooth the transition from straights to bends. https://en.m.wikipedia.org/wiki/Track_transition_curve https://en.m.wikipedia.org/wiki/Track_transition_curve
- raphlinus 6y ago
  Not a coincidence. I talk about that a bit in my thesis on curves: https://levien.com/phd/phd.html https://levien.com/phd/phd.html
saagarjha 6y ago
Actually, iOS app icons are not superellipses but a 16-part Bézier curve.

Fun fact: iOS app icons are not rounded rectangles (rectangles with 90 degree arc corners) but squircles, which are roughly superellipses with n=5. The linked Wikipedia articles also remark this.

busymom0 6y ago

Same thing with the rounded corner of the iPhone X series. One time I was trying to make one of he UIView match the corner radius of the screen and it wasn’t matching until I learnt that the rounded corners of the screen/device is a 38.5 squircle (not sure if that’s the real term). Basically instead of having a sharp curve, it starts much earlier.

foxes 6y ago
If you compute the curvature it starts flat, does a few bump and then flattens again (this curvature is not a very smooth function however). An n-ellipse is not quite the right curve. Apple used a bunch of Bezier curves. I think their design could be made a little more aesthetic if you used some smoothed piecewise bump (like a Gaussian nearly). You can numerically solve for the curve given the curvature and then approximate it.
saagarjha 6y ago
That’s a slightly different curve, and I believe the corner radius for that is defined to be 39.
- busymom0 6y ago
  This is where I originally learnt about it. Seems like it's called a continuous corner, or “squircle”: https://kylebashour.com/posts/finding-the-real-iphone-x-corner-radius https://kylebashour.com/posts/finding-the-real-iphone-x-corn...
  - saagarjha 6y ago
    The corner radius is 39; you can find it by peeking inside iOS. CALayer has "continuous corners", which are very similar to but just slightly different than the app icon shape, which is a 16-part Bézier curve generated inside of the MobileIcons framework. This curve is as far as I can tell identical to the one that UIBezierPath.init(roundedRect:cornerRadius:) will give you when the corner radius is 22.5% of the side length. (Note that the app icon on the home screen, being of a constant size, is actually generated via an image mask rather than dynamic clipping.)

ape4 6y ago

https://en.wikipedia.org/wiki/Squircle https://en.wikipedia.org/wiki/Squircle Please don't vote this up ;)

DominikD 6y ago

Fun fact: physical controls on the second generation Zune (released 2008) were squircles.

jacobolus 6y ago

Raph also linked to https://www.figma.com/blog/desperately-seeking-squircles/ https://www.figma.com/blog/desperately-seeking-squircles/

dirtydroog 6y ago

It reminds me of the techniques used in railways to smooth the transition from straights to bends. https://en.m.wikipedia.org/wiki/Track_transition_curve https://en.m.wikipedia.org/wiki/Track_transition_curve

raphlinus 6y ago
Not a coincidence. I talk about that a bit in my thesis on curves: https://levien.com/phd/phd.html https://levien.com/phd/phd.html

saagarjha 6y ago

Actually, iOS app icons are not superellipses but a 16-part Bézier curve.