[HN Gopher] Curvature consistency in Apple hardware and software...
___________________________________________________________________
Curvature consistency in Apple hardware and software products
(2017)
Author : adas4044
Score : 148 points
Date : 2022-12-24 08:22 UTC (14 hours ago)
(HTM) web link (hackernoon.com)
(TXT) w3m dump (hackernoon.com)
| ginko wrote:
| 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/
| ajuc wrote:
| If I have to choose this or good thermals...
| aflam wrote:
| 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 wrote:
| 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.
| tonyarkles wrote:
| 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
| dagmx wrote:
| > 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.
| muro wrote:
| 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 wrote:
| 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.
| crazygringo wrote:
| 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.
| Waterluvian wrote:
| My apple cables are consistently the first to wear out. I
| must be using them wrong.
| dividedbyzero wrote:
| 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?
| rumori wrote:
| 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.
| ip26 wrote:
| 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.
| jsjohnst wrote:
| > 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.
| gruez wrote:
| 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.
| eternityforest wrote:
| 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.
| seltzered_ wrote:
| 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.
| pja wrote:
| 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.
| dutchCourage wrote:
| 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.
| Gigachad wrote:
| 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.
| newaccount74 wrote:
| 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.
| muro wrote:
| 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.
| tinus_hn wrote:
| Do the keys also scratch the screen like on a Dell or HP?
| kitsunesoba wrote:
| 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.
| StringyBob wrote:
| 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
| muro wrote:
| I now have the M1 MacBook Pro and it still has that issue.
| CSSer wrote:
| 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.
| tosc wrote:
| 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.
| CSSer wrote:
| You win. I chuckled. You know I was making a bit of a
| joke too, right?
| solarkraft wrote:
| 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.
| GrayShade wrote:
| This can happen on other laptops, especially to cat owners.
| djaychela wrote:
| 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.
| joezydeco wrote:
| 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.
| nomel wrote:
| The marks in my wrists look worse, to me.
| baybal2 wrote:
| [dead]
| c-smile wrote:
| 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/
| ryandrake wrote:
| 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 wrote:
| 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
| CharlesW wrote:
| Out of curiosity, are you really not able to tell which is
| which in this unlabeled image? https://imgur.com/a/xhCZgds
| noodlesUK wrote:
| (Not parent) Seeing this, it's definitely noticeable but it's
| very subtle.
| ryandrake wrote:
| On those I can see that one has a larger corner radius than
| the other but that's it.
| nickpinkston wrote:
| 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
| atoav wrote:
| 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 wrote:
| Pierre Bezier, he of the eponymous curves, worked for French
| car maker Renault for decades.
| CharlesW wrote:
| For anyone interested, a history of the "squircle":
| https://www.johndcook.com/blog/2019/04/02/history-of-the-ter...
| Terretta wrote:
| > _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"?
| dang wrote:
| 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)
| bmitc wrote:
| And yet the front part of MacBooks, where you lift the lid, is so
| sharp and pointy it can scratch you.
| virtualritz wrote:
| 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 wrote:
| 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.
| scotty79 wrote:
| More on smoothness of the curves
| https://www.youtube.com/watch?v=jvPPXbo87ds
|
| As seen on HN this month.
| AceJohnny2 wrote:
| Another upvote for Freya Holmer'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
| dang wrote:
| 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)
| SSchick wrote:
| Very relevant https://www.youtube.com/watch?v=jvPPXbo87ds
| Probably use BSplines
| tedd4u wrote:
| 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.
| progbits wrote:
| In-depth explanation of curve continuity without the fanboying:
| https://youtu.be/jvPPXbo87ds
| superzamp wrote:
| 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.
| somat wrote:
| So web 2.0 was basically css border-radius right, so what we
| need for web 3.0 to emerge is border-bezier
| CharlesW wrote:
| This looks like a good place to start...
|
| App: https://squircley.app/ Code:
| https://dev.to/georgedoescode/codepen-soften-up-your-designs...
| metadat wrote:
| 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!
| CharlesW wrote:
| I really appreciate the kind words. Happy holidays to you and
| yours!
| kitsunesoba wrote:
| 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.
| davidbarker wrote:
| 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.
| nequo wrote:
| The curvature combs are confusing to me.
|
| Is this equivalent to saying that Apple's rounded corners have a
| continuous second derivative while naive rounded corners only
| have a continuous first derivative but a discontinuous second
| derivative? Or am I misunderstanding this?
| amelius wrote:
| Isn't this sort of thing common in the automotive industry?
| [deleted]
| toiletfuneral wrote:
| [dead]
| nine_k wrote:
| 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 :)
| pmahoney wrote:
| See also "Why roller coaster loops aren't circular anymore"
|
| https://news.ycombinator.com/item?id=32005421
| yshklarov wrote:
| 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 k :=
| |(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.
| yshklarov wrote:
| 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.
| legosexmagic wrote:
| 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.
| phkahler wrote:
| It's called C2 continuity.
| yshklarov wrote:
| 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?
| jsjohnst wrote:
| Actually, you only need G2 continuity for the reflection to
| be continuous (yes, C2 is also G2 for regular curves).
| kelsolaar wrote:
| The Continuity of Splines: https://youtu.be/jvPPXbo87ds
| harywilke wrote:
| I came here to post exactly this excellent video on
| splines by Freya Holmer. This discontinuity of
| reflections effect is directly mentioned at 29 minutes in
| chapter 4 on geometric continuity.
| hbrn wrote:
| > 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
| dagmx wrote:
| 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.
| robertoandred wrote:
| Your links explicitly refer to the complete designs of entire
| devices, not a kind of curve.
| [deleted]
| whywhywhywhy wrote:
| 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 wrote:
| 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.
| rowanG077 wrote:
| 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.
___________________________________________________________________
(page generated 2022-12-24 23:01 UTC)