Curvature consistency in Apple hardware and software products (2017)
hackernoon.comThe curvature is not unique to apple though. This is widely used in car manufacturing for example. Turns out not having a hard transition between no curvature (straight surface) and some kind of radius (so a curvature of 1/r) looks like shit on very reflective surfaces, because a perfect flat mirror suddenly transitions into a stretched or squashed one.
So you can go and make those transitions flawless by making sure the curvature combs transition into each other as well (basically a set of spaced out lines which you draw perpendicular to the line in question where the magnitude equals the curvature). If the curvature combs meet at the transition, the transition looks okay. If the curvature combs are tangential to each other it looks better. You can also add a second order curvature comb to the first one and make sure these connect as well etc.
Pierre Bézier, he of the eponymous curves, worked for French car maker Renault for decades.
For anyone interested, a history of the "squircle": https://www.johndcook.com/blog/2019/04/02/history-of-the-ter...
Ok, we've taken uniqueness out of the title above.
(Submitted title was "Apple's Unique Device Curvature". I assume that rewrite was intended to replace the linkbaitiness of the article title, which is in keeping with the site guidelines: https://news.ycombinator.com/newsguidelines.html)
Thanks, and sorry for letting myself being baited. But I think the history of those curves before Apple is seriously interesting.
> So you can go and make those transitions flawless by making sure the curvature combs transition into each other as well (basically a set of spaced out lines which you draw perpendicular to the line in question where the magnitude equals the curvature).
Would this be like the illustrations in the article labled "curvature comb showing tangency" and "cuvature comb showing curvature continuity"?
This is standard knowledge in product design.
Most people doing font design also have a keen understanding of this.
Even if often more intuitively that through maths.
That said, in 2D you can get away with tangent continuity (C1) and stuff looks good.
I.e. while people may be able to tell the difference between a square with corners that have been rounded using quadratic arcs and one that uses cubic arcs or is a superellipse of some sort, these are all still looking fine.
In 3D, outlines will also look ok but a soon as you have shading anything that is not curvature continuous (C2) will stick out sorely.
The term most often used for the visual artifact that ensures is 'broken highlights' (see the photos in the article).
For example, if you write displacement or bump shaders and you transition between ('smooth') functions and want to maintain a smooth surface appearance, smoothstep()[0] is not enough. It is only C1 continuous.
You need a higher order variant, e.g. Ken Perlin's own improved version that is C2 continuous[1].
CAD software usually has zebra strip analysis shading which makes these things stick out so they can be fixed by rebuilding/retopologizing surfaces.
All major roads do this too. If the transition from a straight line to moving on a circular path happened instantly, then drivers would have to instantly turn their steering wheels to the correct angle for the turn. Very very occasionally i'll encounter a turn with that discontinuity and it feels really unsafe and jarring. I wouldn't be surprised if some residential roads were intentionally designed this way to help limit speed.
The squircle was actually Nokia's design language they used for Meego[1]. Back then Apple just used basic squares with rounded edges, the "unique" curverture mentioned here happened later.
I wish they would put in at least some basic effort into smoothing that sharp edge where wrists often rest when using the MacBook, rather than just the curvature of the corner. Any cheap laptop is nicer to my wrists than a MacBook.
Apple has beautiful squircle curves the rest of us can't have unless we want expensive CAD tools and extra JS files, but they also have plenty of sharp transitions. Look at their cables, that have no strain relief, being a bad influence on every other cable for a decade.
It's basically just Bauhaus design but with a few nice soft features, it's gonna be a bit uncomfortable, it's gonna be expensive, it might compromise functionality, all to create a sense of precision, authenticity, and high-endness.
What are you talking about, every Apple USB and Lightning cable I've ever had has had strain relief on both ends.
There's the main plug in a plastic housing, and then there's an extra-thick rubber part about a centimeter long which is the strain relief wrapped around the cable, and then the rest of the cable itself. Clearly visible in any product photograph close-up.
Yes & it doesn’t work very well. Or at least it didn‘t,
Apple has been notorious for sacrificing good strain relief on their cables in pursuit of aesthetics for years. Possibly things have improved now that Ive has left, but there was a period a few years ago when everyone I knew with a Macbook had wrapped the power cable in electrical tape because the cable housing had failed just above the (useless) strain relief sleeve you describe.
I think it was less the strain relief and more the rubber they used. It would go gummy and fall apart after a few years. I absolutely remember around 2013 everyones MacBook charger would fail like this.
But they have changed the design a lot since then so I no longer think this is an issue. The brick is now usb c so you can swap the cable without needing an expensive brick, and the MagSafe cables they now include are braided instead of rubber.
The USB-C charging cable from the 2020 M1 Macbook still has the issue of straining just after the strain relief. It's not a good cable. The only good thing about it is that is a standard cable and you can replace it with a more reliable one.
Whether the cables with the braided sleeve are better is something that remains to be seen.
I had the same with my previous MBP, I had the machine for ten years and had to purchase two new power bricks along the way. Thankfully the new cables are nicely braided and replaceable without buying an entire new brick.
My apple cables are consistently the first to wear out. I must be using them wrong.
It's always weird to read things like that because I definitely mistreat my cables, and I've had lots die, but my Apple ones hold up very well. I have just one Lighthing cable that recently broke and that one was from 2013 IIRC so I guess that's ok. Everything else seems to hold up about as well as expensive Anker cables, if not better, including Macbook chargers going back to 2005 or so. I'm in the EU though, maybe the cables I get are different in some way?
All my Apple cables have fallen apart, granted it took them 3-5 years, but still. Never had so many issues with any other brand. And it’s something I see with everybody I know. I’m in central Europe.
> It's always weird to read things like that because I definitely mistreat my cables, and I've had lots die, but my Apple ones hold up very well.
Just wanted to say, you aren’t alone. I don’t do anything special with mine, I’m sure I mistreat them as much as the next person, but like never have the kind of damage I’ve seen others have or complain about.
Different folks mistreat in different ways. I’m struck by the number of people who will yank their laptop to move the power brick, for example, which is of course the worst case scenario for cable strain relief and leads to premature socket failure in the laptop.
I wonder if temperature is a factor and heat degrades the plastic in Apple's cables faster. I live in Asia where summers are hot and humid, and on the Intel MacBooks my MagSafe plug would always be super hot due to the high power draw when working. Once your cable gets a kink and slight damage, the resistance increases and it gets even warmer and you end up in a cable death spiral.
On the other hand all my cables are just fine, apple cables included. It's probably not due to lack of use; I use them nearly every day for years now.
They used to have a more flexible strain relief https://i.imgur.com/yAywo.jpg
Over time their strain relief has gotten shorter or longer https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2012/03...
So a lot of people's memories about Apple's strain relief may come from one of their darker periods when they were super short, stiff and useless.
In my personal experience their previous laptop MagSafe had absolutely useless strain relief and mine would always start going bad within 6-12 months. https://cdn.vox-cdn.com/uploads/chorus_asset/file/13878908/2...
The current braided MagSafe cables actually have zero visible strain relief but seem like they're simply stronger, mine has held up well so far.
Every Apple Lightning cable I own has a tear around the cable housing just outside of the strain relief.
There's guides on how to workaround it using things like Sugru or tape, but still frustrating.
Ok, maybe I should have said very minimal and near ineffective strain relief. A cheap braided USB-C generally has 2 or 3 times the length and thickness.
Also: if they could create a gap between the screen and the keys, so the screen is not always smudged after closing the MacBook. Aka, if you use your MacBook as a laptop, the screen will be dirty even if you are careful to never mistakenly touch it.
For at least one gen of MacBooks (maybe the ill-fated 2016 MacBook Pros?), this was actually a design fault. In the battle for thinness there was not enough separation between screen and keys when closed, leading to damage to screen coating over time. Newer versions had a slightly larger rubber lip on the screen to increase the separation - as I noticed after getting a replacement for a damaged model
I now have the M1 MacBook Pro and it still has that issue.
On the brightside, if you ignore it until you can’t see your screen properly it’s like the heavens have opened once you finish cleaning it.
Have you tried putting gravel in your socks at the beginning of the day? It feels great when you get home and finally take them off.
You win. I chuckled. You know I was making a bit of a joke too, right?
I have the M1 MacBook Pro and I don't have this issue (I also didn't have it on my 2019, 2017, 2012, etc MacBooks Pro).
Do you put your laptop in a bag where it gets squished between books and other stuff to cause the display to be pushed in?
I had an M1 pro and have an M1 air, both with screen protectors (that are matte but quick to show smudges) and haven't noticed this.
This can happen on other laptops, especially to cat owners.
I haven't had a much trouble with this on my MacBooks, but based on observation (relatively small sample size, so take with grain of salt) this is exacerbated by tightly packing them in e.g. a bag with books/tablets/etc or stacking things on them. As long as I've avoided those situations I don't get key tracks.
I always put something between the screen and the keys when I close it - not only finger grease, but eventually you get damage on the screen from grit on the keys or the hard edge by the track pad. A sheet of A4 paper was the thing for a while, but then I got some of the material you get in new laptops and use that now (it's made from recycled PET, and black).
Bad design, imo.
Do the keys also scratch the screen like on a Dell or HP?
But then you would have a rounded surface matched up with a sharp one (the top of the display) when you close the lid and that wouldn't look sexy at all. Two rounded edges would be even worse.
The marks in my wrists look worse, to me.
The front edge of the Dell XPS 17 is not just square, but distinctly sharp. It's terrible.
The curvature combs are confusing to me.
Is this equivalent to saying that Apple’s rounded corners have a continuous second derivative while naïve rounded corners only have a continuous first derivative but a discontinuous second derivative? Or am I misunderstanding this?
That is roughly correct. For a curve with smooth parametrization f(t) = (x(t), y(t)), with f'(t) ≠ 0 for all t, the curvature at the point f(t) is defined to be κ := |(f'(t)/|f'(t)|)'| -- the magnitude of the first derivative of the unit tangent vector. This is a nonnegative quantity, and is well defined, that is, independent of the specific parametrization of the curve (as legosexmagic said, you need to do something like this to get a quantity independent of the parametrization, but it is essentially a "normalized" second derivative).
The curvature comb consists (it seems to me) of a normal line segment at each point, whose length is directly proportional to the curvature there.
Oops, my mistake: that is not the definition of curvature! The outer derivative must be taken with respect to arclength, rather than with respect to t.
thats pretty much it yes. the reason they dont just say 2nd derivative is that the derivative isnt a geometry property. you can have two curves with the same shape but different derivatives.
curvature only depends on the shape of the object.
It's called C2 continuity.
The Continuity of Splines: https://youtu.be/jvPPXbo87ds
I came here to post exactly this excellent video on splines by Freya Holmér. This discontinuity of reflections effect is directly mentioned at 29 minutes in chapter 4 on geometric continuity.
Thank you.
Actually, you only need G2 continuity for the reflection to be continuous (yes, C2 is also G2 for regular curves).
Do you know whether it's usual nowadays in industrial design to make curves that are actually smooth (I mean, derivatives of all orders are continuous) and not just C2? Or is it technically challenging for some reason, or not useful?
Isn't this sort of thing common in the automotive industry?
It's very common on railways.
You don't want a train to suddenly experience a sideways force as it enters a curve. So the 2nd derivative of the position, acceleration, should not instantly go from 0 to a constant, instead, it should grow smoothly, like pictured in TFA. So you want a non-zero 3rd derivative, and possibly even a non-zero 4th derivative.
Cubic splines of course give you a nice 3rd derivative. In fact, you can't make a perfect circle using cubic splines, because of that. Draw your device's shape in Illustrator or Inkscape, and you likely make it Apple-like :)
See also "Why roller coaster loops aren’t circular anymore"
I can finally put some words on this. Tangentially (no pun intended) in CSS, the poor rendering you get out of an ambitiously border-radius'ed button has been driving me mad for years; time to get down the rabbit hole to see how to replicate that look on the web.
I had the exact same thought: How to do this in CSS?
Please follow-up on this thread with any discoveries or learnings, would be interesting and cool to learn how to replicate the nice soft curve for web assets. Depending on how many different semi-reasonable approaches exist, this subject and analysis would also make for a compelling and blog article.
Edit: Thank you Charles - wow you're so quick to have unearthed and replied with squircle resources in the time it took for me to compose the three sentences above.
p.s. CharlesW: thanks for your helpful and informative comments in general, I consistently look forward to reading your comments whenever I see one. Cheers and happy holidays!
It's not CSS, but for cases where it makes sense to export assets (e.g. SVGs or PNGs) Sketch has squircles as an option for corner curvature on roundrects, calling it "smooth corners" (v.s. "round corners"). As far as I can see Figma does not offer this, but I am not well versed in Figma so the option may just be hiding in some obscure panel.
I really appreciate the kind words. Happy holidays to you and yours!
This looks like a good place to start…
App: https://squircley.app/ Code: https://dev.to/georgedoescode/codepen-soften-up-your-designs...
This blog post is from 5 years ago, but it explains how you can use CSS Houdini to make smooth corners. It's quite a lot of work, though.
https://iamvdo.me/en/blog/smooth-corners-with-css-houdini
I would love it to be built into browsers as standard.
So web 2.0 was basically css border-radius right, so what we need for web 3.0 to emerge is border-bezier
The fun hardware aspects of this are how they choose to form curves for the aluminum MacBooks using cold forging to get create the broad curves of the device and then post-machining the keyboard, chamfered (angled) edges, and form tapping the screw boss threads - ie pressing not cutting the threads into the material.
Variable radii curves take forever to machine and must be polished, so that's only done on the cold forging die (and takes forever to do), so the die can then impart the geometry on the aluminum blank in only seconds in the forging press.
This is also how high-end aluminum car wheels are made with all their complex curvature.
Funny enough, they don't cover the forging in this video that describes most of the rest of the process, so I think Apple must've not wanted to talk about it, as least back then.
This is all very standard stuff in product design. It’s more just a surprise to UI designers because 2D design tools are very poor and don’t include superellipse as an option.
I recall this being annoying for me as an app developer trying to perfect the app icon. You upload the app icon as a square image, and Apple applies the round corners when they distribute it. I wanted to preview how it’d look on the App Store (back when every app submission would take weeks to get approved), but found the rounded corners from GIMP just didn’t match. At least they had stopped applying gloss effects by then which totally ruined the colors.
Last year I wanted to have a table custom built using those shapes. It's easy with CNC: https://shapescience.xyz/blog/creating-a-super-ellipsis-tabl...
Very cool article! Thanks for sharing. Is numpy just global in Python now? I see it everywhere, and I eventually sound it out. Yet I never fail to have a few moments where I go, “Wait, what is ‘np’? Oh, yeah… Numpy.” And I always feel like just listing it as an import in the snippet would’ve solved it.
Just a “standard” convention. I’ve been doing a bunch of analysis work lately and almost all of the scripts start with something like:
import numpy as np import pandas as pd import seaborn as sns import sympy as sp
> It’s unlikely you can do it at home…
I think you could if you had a small bench top cnc or laser cutter.
You’d have to split up the DXF into pieces that fit on your bed, but you’d be able to make a template by joining the parts together.
Then rough cut your workpiece to the template, followed by a flush bit router.
More on smoothness of the curves https://www.youtube.com/watch?v=jvPPXbo87ds
As seen on HN this month.
Another upvote for Freya Holmér's amazing video "The Continuity of Splines".
She covers the insightful "reflection test" around the 28:05 mark: https://youtu.be/jvPPXbo87ds?t=1685 and actual "curvature combs" at 32:26.
Finally, she covers the continuity of curvature combs that B-Splines exhibit around the 54:00 mark: https://youtu.be/jvPPXbo87ds?t=3240
In-depth explanation of curve continuity without the fanboying: https://youtu.be/jvPPXbo87ds
Even though I knew this, the video is so good that I watched the whole thing in a single sitting. Thanks for sharing.
Very relevant https://www.youtube.com/watch?v=jvPPXbo87ds Probably use BSplines
AFAIK Alias (which the article say is in use at Apple) uses non-rational uniform B-splines (or NURBS). Covered at 1:02:35 in the awesome video you linked.
> Apple doesn’t have the patent on this.
But they do: D558,757 and D670,286. Don't people remember Apple v. Samsung case?
Your links explicitly refer to the complete designs of entire devices, not a kind of curve.
Afaik those patents don’t describe continuous curvature, but just general curved bodies.
Apple’s use of continuous curvature in iPhones came around iOS 7 iirc. I might be mistaken but I think they’re subtly but consequentially different subjects.
So who else is sometimes confused with the new strange curves on the notifications? For some time now I often think they are a stack when they ar not. It’s because of the shape, not sure how to put this in words but the lower part of the curves is way more stretched out than than the vertical. It’s made worse because of my dark mode and dark bg probably.
I guess I have really bad eyes but I can’t tell the difference at all. They both look like rounded corners to me. I don’t think the aesthetic effect is that pronounced. I’d like to see the author do a blind taste test and be able to identify this magical “curvature comb” without seeing the brands.
Out of curiosity, are you really not able to tell which is which in this unlabeled image? https://imgur.com/a/xhCZgds
(Not parent) Seeing this, it’s definitely noticeable but it’s very subtle.
On those I can see that one has a larger corner radius than the other but that's it.
I think it’s definitely something that’s visible in 3d on a somewhat reflective surface, but it’s definitely harder to tell projected top down in 2d for me.
edit: it’s definitely subtly noticeable in the image posted by sibling
And yet the front part of MacBooks, where you lift the lid, is so sharp and pointy it can scratch you.
I have never liked this roundness in any product. It somehow reminds of children toys. Apple has them. Most cars have them. It just give this supreme baby toy vibe to me. I never knew what it's called but this article finally explained it.
Related:
Apple’s Icons Have That Shape for a Very Good Reason - https://news.ycombinator.com/item?id=16294455 - Feb 2018 (5 comments)
Apple’s Icons Have That Shape for a Very Good Reason - https://news.ycombinator.com/item?id=13484728 - Jan 2017 (5 comments)
Isn't that because those corners are rendered as Bezier curves that are H/W accelerated?
Usually, small radii are emulated by beziers: https://spencermortensen.com/articles/bezier-circle/
If I have to choose this or good thermals...