3 ms·
A similar principle works in UI design and industrial design. Rounded rectangles often just slap circle arcs on the corners—but that looks unnatural because you
by aasasd 4y ago
A similar principle works in UI design and industrial design. Rounded rectangles often just slap circle arcs on the corners—but that looks unnatural because you don't get such a shape if you bend a straight rod. In this approach the turning radius changes from infinity to a constant at one point, but the proper way is to change it gradually. Bezier curves accomplish that, I think.
Once you see this, you begin to notice it everywhere, just like with kerning. Apple used both ways on iPhones for rounding the phone's corners, iirc. Also I've been told that the principle applies to road turns: you don't want people to have to suddenly turn into the curve. (In related news, I wish a month of bad hiccups on Herman Tilke.)
- smugma 4y agoApple went from using roundrects to squircles a decade ago: https://99percentinvisible.org/article/circling-square-designing-squircles-instead-rounded-rectangles/ https://99percentinvisible.org/article/circling-square-desig...
- aasasd 4y agoIIRC from when I read about this concept for the first time: Apple managed to revert to bad rounding on the phone shape at some point. And probably reverted back later, but I can't confirm that. Basically, the reader is advised to check the rounding before buying their next phone.
- suyjuris 4y agoI once implemented rounded rectangles by drawing circles with regards to arbitrary p-norms [1,2] – I did not think about it at the time, but the derivatives are probably quite nice. (It did have the advantage of using the same code for rounded rectangles and for circles.) [1] https://en.wikipedia.org/wiki/Norm_(mathematics)#p-norm https://en.wikipedia.org/wiki/Norm_(mathematics)#p-norm [2] https://en.wikipedia.org/wiki/Lp_space#/media/File:Vector-p-Norms_qtl1.svg https://en.wikipedia.org/wiki/Lp_space#/media/File:Vector-p-...
- aasasd 4y agoPretty sure that's how squircles are supposed to be mathematically implemented—at least in the option based on superellipses: https://en.wikipedia.org/wiki/Squircle https://en.wikipedia.org/wiki/Squircle