Article 3FS5V Apple design, squircles, and curvature

Apple design, squircles, and curvature

by
John
from John D. Cook on (#3FS5V)

A "squircle" is a sort of compromise between a square and circle, but one that differs from a square with rounded corners. It's a shape you'll see, for example, in some of Apple's designs.

squircle1.svg

A straight line has zero curvature, and a circle with radius r has curvature 1/r. So in a rounded square the curvature jumps from 0 to 1/r where the flat side meets the circular corner. But in the figure above there's no abrupt change in curvature but instead a smooth transition. More on that in just a bit.

To get a smoother transition from the corners to the flat sides, designers use what mathematicians would call Lp balls, curves satisfying

lp_ball_rect.svg

in rectangular coordinates or

lp_ball_polar.svgin polar coordinates.

When p = 2 we get a circle. When p = 2.5, we get square version of the superellipse. As p increases the corners get sharper, pushing out toward the corner of a square. Some sources define the squircle to be the case p = 4 but others say p = 5. The image at the top of the post uses p = 4. [*]

To show how the curvature changes, let's plot the curvature on top of the squircle. The inner curve is the squircle itself, and radial distance to the outer curve is proportional to the curvature.

Here's the plot for p = 4.

curvature4.svg

And here's the plot for p = 5.

curvature5.svg

If we were to make the same plot for a rounded square, the curvature would be zero over the flat sides and jump to some constant value over the circular caps. We can see above that the curvature is largest over the corners but continuously approaches zero toward the middle of the sides.

Related: Swedish Superellipse

[*] Use whatever value of p you like. The larger p is, the closer the figure becomes to a square. The closer p is to 2, the closer the figure is to a circle.

You can even use smaller values of p. The case p = 1 gives you a diamond. If p is less than 1, the sides bend inward. The plot below shows the case p = 0.5.

lpball_0.5.svg

As p gets smaller, the sides pull in more. As p goes to zero, the figure looks more and more like a plus sign.

w4z_OtT_CwQ
External Content
Source RSS or Atom Feed
Feed Location http://feeds.feedburner.com/TheEndeavour?format=xml
Feed Title John D. Cook
Feed Link https://www.johndcook.com/blog
Reply 0 comments