5 ms·

Not just rounded rectangles, but squircles too. Every icon or rectangular element in Apple software and hardware is a squircle.

yreg 2y ago
Surely a MacBook is a rounded rect and not a squircle.
- behnamoh 2y ago
  Nope, it's still squircle.
  - roelschroeven 2y ago
    https://www.apple.com/v/macbook-pro/ak/images/overview/closer-look/3d_viewer_pt_open__dr7t682bocia_large_2x.jpg https://www.apple.com/v/macbook-pro/ak/images/overview/close... https://www.apple.com/v/macbook-pro/ak/images/overview/closer-look/3d_viewer_pt_closed__xhvulpfj67m2_large_2x.jpg https://www.apple.com/v/macbook-pro/ak/images/overview/close... https://www.apple.com/v/macbook-pro/ak/images/overview/closer-look/3d_viewer_pf_14_16__cnmzk9b7xtpy_large_2x.jpg https://www.apple.com/v/macbook-pro/ak/images/overview/close... Those don't look like squircles to me. If they are squircles, they're so close to simple rounded rectangles that there's no meaningful difference left. The keys could, maybe, be squircles, but I'm having a very hard time seeing the outline, the touchpad, the outline of the keyboard as anything other than rounded rectangles.
shermantanktop 2y ago
TIL about squircles: https://en.m.wikipedia.org/wiki/Squircle https://en.m.wikipedia.org/wiki/Squircle
abhinavk 2y ago
Apple uses quintic superellipses. Very similar to squircles but not quite.
- roelschroeven 2y ago
  What does quintic mean in this context? My first thought would be something like (x/a)^5 + (y/b)^5 = 1, but that doesn't seem to work. I only get meaningful shapes when I use even exponents. Try for yourself here: https://www.desmos.com/calculator/bfqku2rcw0 https://www.desmos.com/calculator/bfqku2rcw0
  - kragen 2y ago
    |x|⁵, |y|⁵
    - roelschroeven 2y ago
      Ah that makes sense, thanks. Obvious, in hindsight.
roelschroeven 2y ago
How does that work for rectangular elements? As far as I understand it, squircles are defined by an equation similar to (x/a)^n + (y/b)^n = 1, as in https://www.desmos.com/calculator/yllozptlmt https://www.desmos.com/calculator/yllozptlmt. That works well for squares (a = b), but for rectangles the corners aren't round anymore, they become elliptic, as in https://www.desmos.com/calculator/bzxyu6ygz3 https://www.desmos.com/calculator/bzxyu6ygz3. That doesn't like as nice in my eyes, but more importantly I have the impression that the rounded corner of Apple's rectangles are circular, not elliptic. I don't have any Apple devices, but in screenshots like https://miro.medium.com/v2/resize:fit:4800/format:webp/1*oBIEr0OSVLqPtKwpc3Hy9Q.jpeg https://miro.medium.com/v2/resize:fit:4800/format:webp/1*oBI... it seems to me the corners of rectangular elements are very much not elliptic. Or certainly not nearly as obvious as in my second Desmos link. So I don't understand what's really going on. It doesn't seem to me Apple's rectangles really are superellipses. (And actually the squares in that screenshot look like simple rounded squares to me, not squircles/superellipses. The sides look too flat for squircles. I could be wrong though.)
- saagarjha 2y ago
  They're definitely not superellipses these days, but to answer your question in a more interesting manner: you don't have to stretch the superellipse. You can just split it so that the corners are rounded with a 1:1 aspect ratio and cheat by stretching the lines in the middle.

yreg 2y ago

Surely a MacBook is a rounded rect and not a squircle.

behnamoh 2y ago
Nope, it's still squircle.
- roelschroeven 2y ago
  https://www.apple.com/v/macbook-pro/ak/images/overview/closer-look/3d_viewer_pt_open__dr7t682bocia_large_2x.jpg https://www.apple.com/v/macbook-pro/ak/images/overview/close... https://www.apple.com/v/macbook-pro/ak/images/overview/closer-look/3d_viewer_pt_closed__xhvulpfj67m2_large_2x.jpg https://www.apple.com/v/macbook-pro/ak/images/overview/close... https://www.apple.com/v/macbook-pro/ak/images/overview/closer-look/3d_viewer_pf_14_16__cnmzk9b7xtpy_large_2x.jpg https://www.apple.com/v/macbook-pro/ak/images/overview/close... Those don't look like squircles to me. If they are squircles, they're so close to simple rounded rectangles that there's no meaningful difference left. The keys could, maybe, be squircles, but I'm having a very hard time seeing the outline, the touchpad, the outline of the keyboard as anything other than rounded rectangles.

shermantanktop 2y ago

TIL about squircles: https://en.m.wikipedia.org/wiki/Squircle https://en.m.wikipedia.org/wiki/Squircle

abhinavk 2y ago

Apple uses quintic superellipses. Very similar to squircles but not quite.

roelschroeven 2y ago
What does quintic mean in this context? My first thought would be something like (x/a)^5 + (y/b)^5 = 1, but that doesn't seem to work. I only get meaningful shapes when I use even exponents. Try for yourself here: https://www.desmos.com/calculator/bfqku2rcw0 https://www.desmos.com/calculator/bfqku2rcw0
- kragen 2y ago
  |x|⁵, |y|⁵
  - roelschroeven 2y ago
    Ah that makes sense, thanks. Obvious, in hindsight.

roelschroeven 2y ago

How does that work for rectangular elements? As far as I understand it, squircles are defined by an equation similar to (x/a)^n + (y/b)^n = 1, as in https://www.desmos.com/calculator/yllozptlmt https://www.desmos.com/calculator/yllozptlmt. That works well for squares (a = b), but for rectangles the corners aren't round anymore, they become elliptic, as in https://www.desmos.com/calculator/bzxyu6ygz3 https://www.desmos.com/calculator/bzxyu6ygz3. That doesn't like as nice in my eyes, but more importantly I have the impression that the rounded corner of Apple's rectangles are circular, not elliptic. I don't have any Apple devices, but in screenshots like https://miro.medium.com/v2/resize:fit:4800/format:webp/1*oBIEr0OSVLqPtKwpc3Hy9Q.jpeg https://miro.medium.com/v2/resize:fit:4800/format:webp/1*oBI... it seems to me the corners of rectangular elements are very much not elliptic. Or certainly not nearly as obvious as in my second Desmos link. So I don't understand what's really going on. It doesn't seem to me Apple's rectangles really are superellipses. (And actually the squares in that screenshot look like simple rounded squares to me, not squircles/superellipses. The sides look too flat for squircles. I could be wrong though.)

saagarjha 2y ago
They're definitely not superellipses these days, but to answer your question in a more interesting manner: you don't have to stretch the superellipse. You can just split it so that the corners are rounded with a 1:1 aspect ratio and cheat by stretching the lines in the middle.