3 ms·
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
by 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 agoThey'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.