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.
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
in rectangular coordinates or
in 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.
And here’s the plot for p = 5.
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.
More squircle posts
[*] 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.
As p gets smaller, the sides pull in more. As p goes to zero, the figure looks more and more like a plus sign.
13 thoughts on “Apple design, squircles, and curvature”
The difference is subtle, but I think I like p=5 better than p=4.
While squircles are interesting, Apple uses NURBS/Beziers, which are fascinating as well.. :)
It might be interesting to learn the ‘favorite’ p in an environment in which it is a freely choose-able parameter. Aesthetics & visibility are not the same, so where, other than advertising & package design, might that occur? Is there anywhere that this question could be significant?
Rumor has it that Apple uses (Bezier curves approximating) the case p = 5 for square-ish icons.
Incidentally, I used the Lp curves in a statistical application:
Sometimes John’s posts roar off into air so thin that it triggers my asthma. Then he posts something so elegant and practical that it takes my breath away. (1)
I’m designing and 3D printing a custom box for my friend’s son’s Pokemon cards. The box has to be both safe (no sharp corners or edges) and nearly indestructible (strong). So rounded corners are a must. I initially went with thick sides for strength, but the print time would be quite long, not to mention the amount of filament used.
Squircles to the rescue! A rectangular interior and a squirclular-ish exterior with a whiff of structural infill between should do nicely.
Now I just need the 3D version, a sphere-cube, which would be called, what, a “sphube”? But I need the shape to wrap the relative LxWxH of a 60-card Pokemon deck. I found one paper describing a “squircular ellipsoid” (2), though I need something more general. Perhaps a form of super-quadric or super-ellipsoid? (3)
(1) No matter what, I’m often winded after John posts one of his posts. And I really like using ‘posts’ as both a noun and a verb.
(3) https://en.wikipedia.org/wiki/Superquadrics and https://en.wikipedia.org/wiki/Superellipsoid
On second thought, for maximum crush resistance, shouldn’t the sides be a flattened/weighted catenary smoothly meeting the rounded corners? (1)
How did you make these pictures?
I worked in polar coordinates and used PolarPlot in Mathematica.
Re: BobC, sphube: I make a bubble the shape of a cube, and fill it with smoke to make it more visible. I notice that the liquid that forms the bubble’s enclosing film, tends to concentrate along the edges & at the corners, where surface tension is the greatest because the curvature is the greatest & reduces the intra-bubble fluid pressure. Wishing I could do it in microgravity, I’d like to experiment with inserting more fluid into the bubble membranes to control the shape of the sphube filled with smoke.
These were called superellipses by Danish architect Piet Hein in the 1960’s. Martin Gardner wrote a superb article about these curves in his book “Mathematical Carnival”. Bridge overpasses, coffee cups, etc, use the curves beautifully. They were probably discovered by French thermodynamicist and mathematician Gabriel Lame’ in the mid 1800’s.
“Approaches” means smooth and continuous. Why are you saying “jump.”
Is there a name for the shape in the last figure? Where p=0.5? It’s the dough leftover when I cut out cookies most efficiently, and I’ve always wondered.
Yes, it’s called an asteroid. Same root as an asteroid in astronomy: star-like.