The 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.
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)
> 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"?
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.
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.
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 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).
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.
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.
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.
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?
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 :)
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.
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.
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.
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.
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.
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
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.
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.