WingNews logo WingNews
top | item 34115041

Curvature consistency in Apple hardware and software products (2017)

174 points| adas4044 | 3 years ago |hackernoon.com

88 comments

order

atoav|3 years ago

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.

fmajid|3 years ago

Pierre Bézier, he of the eponymous curves, worked for French car maker Renault for decades.

dang|3 years ago

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)

Terretta|3 years ago

> 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"?

virtualritz|3 years ago

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.

[0] https://en.m.wikipedia.org/wiki/Smoothstep

[1] https://en.m.wikipedia.org/wiki/Smoothstep#Variants

yummypaint|3 years ago

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.

ginko|3 years ago

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.

[1] https://interuserface.net/2011/06/own-a-shape/

muro|3 years ago

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.

eternityforest|3 years ago

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.

muro|3 years ago

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.

joezydeco|3 years ago

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.

xnx|3 years ago

The front edge of the Dell XPS 17 is not just square, but distinctly sharp. It's terrible.

nequo|3 years ago

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?

yshklarov|3 years ago

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.

legosexmagic|3 years ago

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.

amelius|3 years ago

Isn't this sort of thing common in the automotive industry?

superzamp|3 years ago

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.

metadat|3 years ago

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!

somat|3 years ago

So web 2.0 was basically css border-radius right, so what we need for web 3.0 to emerge is border-bezier

nickpinkston|3 years ago

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.

https://www.youtube.com/watch?v=sxbiIpXZfG8

whywhywhywhy|3 years ago

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.

zeroimpl|3 years ago

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.

aflam|3 years ago

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...

CSSer|3 years ago

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.

dagmx|3 years ago

> 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.

scotty79|3 years ago

More on smoothness of the curves https://www.youtube.com/watch?v=jvPPXbo87ds

As seen on HN this month.

progbits|3 years ago

In-depth explanation of curve continuity without the fanboying: https://youtu.be/jvPPXbo87ds

milosmns|3 years ago

Even though I knew this, the video is so good that I watched the whole thing in a single sitting. Thanks for sharing.

hbrn|3 years ago

> Apple doesn’t have the patent on this.

But they do: D558,757 and D670,286. Don't people remember Apple v. Samsung case?

https://patents.google.com/patent/USD558757S1/en

https://patents.google.com/patent/USD670286S1/en

robertoandred|3 years ago

Your links explicitly refer to the complete designs of entire devices, not a kind of curve.

dagmx|3 years ago

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.

teekert|3 years ago

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.

ryandrake|3 years ago

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.

noodlesUK|3 years ago

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

bmitc|3 years ago

And yet the front part of MacBooks, where you lift the lid, is so sharp and pointy it can scratch you.

rowanG077|3 years ago

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.

ajuc|3 years ago

If I have to choose this or good thermals...