Curvatures and iOS7 Icon Shape

A lot has been written about the new shape of iOS7 icons. Some have discovered the way new Bézier shapes are created, while others unleashed genetic algorithms to figure out the exact shape even more precisely.

The indisputable fact is that the new shape of the icons is much smoother, more fluid, and more organic. But why is it so? Why do we perceive it differently? It all comes down to the notion of curvature. So without further ado, let’s jump straight (no pun intended) into the world of curviness.

Curvature and its Radius

Curvature is not hard to understand, as it’s easy to visualize it and have an intuitive feeling of what it describes. The straight line has a curvature of 0 since it’s not curved at all.

line curvature

A circle with a large radius has a smaller curvature than a circle with a small radius. Imagine driving on a very sharp corner (small radius); to make a turn, you have to turn the steering wheel a lot (large curvature). What’s important about circles is they have the nice property of having a constant curvature.

enter image description here

In a general case, the value of curvature along a curve might vary. Some parts may have large curvature, and some may have small:

In geometry, curvature is defined with the Greek letter kappa – Κ. Its very close companion is radius of curvature. In fact, radius of curvature is just the inverse of curvature itself:

radius of curvature

Radius of curvature corresponds directly to our circle example—the larger the radius, the smaller the curvature. As radius of curvature approaches infinity, the curvature approaches 0. You can think of a straight line as a circle with infinite radius; there is no curvature at all.

Continuity

What can we say about connected curves? The easiest descriptor is the continuity. It’s quite easy to understand what it means. If there is a gap between the curves’ ends, then, quite obviously, the curves are not continuous. As it turns out, we can define the entire plethora of continuities. In mathematics we describe the order of continuity using a capital letter C and a number in a superscript. Don’t get scared! While initially, symbols of form C⁰, C¹, or C² don’t seem to convey any message, they’re actually very straightforward. Let’s go through the different kinds of continuities a connection of two curves might have. C⁰ continuity means that segments are connected. In terms of Bézier curves, it’s very easy to maintain the C⁰ continuity; just make sure that the end point of the first segment is in the same position as the start point of second segment. Mathematically speaking, the 0th derivatives are continuous (thus C⁰).

C⁰ continuity

C¹ continuity means that there is no sharp edge at the point of connection—the first derivatives are continuous

C¹ continuity

C² continuity means that both segments have the same curvature at the point of connection—the second derivatives are continuous.

C² continuity

For the sake of completeness, let’s mention that there are also higher orders of continuity. For any n, Cⁿ means all the derivatives up to the n-th one are continuous.

C² Continuity in Real Life

While it’s very easy to notice if two curves have C¹ continuity (there are no sharp edges), it’s hard to notice if two curves are C² continuous. Our eyes and brain are not capable of doing that easily, so it might seem unimportant for our survival. It hardly is so—C² continuity is, in fact, very important. Let’s consider a case in which continuity matters a lot—the railroad. I always thought that laying out turns for a railroad was relatively straightforward—you connect straight parts with parts that are arcs of a circle, and there you go. I was blown away to learn that this is hardly the case.

Why is this wrong? The answer is centripetal force. Quoting Wikipedia

Centripetal force is a force that makes a body follow a curved path.

The centripetal force equation is extremely simple. Take the body’s mass, multiply it by its velocity squared, and divide by the radius of curvature:

centripetal force

The division is crucial here. The larger the radius of curvature, the smaller the force. For a straight line, the radius is infinite and the force is equal to 0. That’s why you don’t get any side acceleration when moving on straight road. For the curvy parts, however, the force is not equal to 0. Here’s the approximate plot of force over distance along railroad curve:

enter image description here

As you can see, as soon as we enter the curve, there is a huge, sudden jump in the force. This kind of sudden change is extremely unpleasant, not only for the people sitting inside, but also for the machine parts that don’t really like sudden hits either.

Back to icon shape

The cool thing about cubic Bézier curves is that one can arrange its control points so that connected curves achieve C² continuity.

Considering the shape returned by + (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius the big question is: does this shape have C² continuity? The answer is no. Using CornerTestView class from this awesome blog post it’s easy to calculate that the control points are not laid out to achieve curvature continuity.

The thing is, the “rounded rect” returned by UIBezierPath does not perfectly match the shape of the cutout used by Apple to render the onscreen icons. Assuming new icons are, in fact, super ellipses, then the shape would have continuous curvature.

Regardless of which shape is actually used, the noticeable difference in icon’s playfulness is caused by much smoother curvature.

Working with the Keyboard on iOS
How Do We Stream Movies to Apple TV in HUDTube?