When it came to writing the book ‘Icon Design – Designing Elegant Icons’, I needed to create an icon mask for presenting my icon designs. The only way I could think of doing this at the time was to take a screenshot of an icon, enlarge it and draw a bezier curve of best fit.

While I was writing the book, I revisited the curve I was using and redrew it, again using a bezier curve of best fit, but this time based on cues from the iOS 7 grid animation that Apple provided on its website and a couple of other enlarged icons.

Like the iOS icon grid that can be assembled using simple geometrical drawing methods, I assumed that the corner curve of the icon mask would just as easily be generated using geometry.

I always thought the curve of the icon mask looked similar to the curved corner on my iMac, iPad and Apple TV. Others have already made this observation in relation to the Apple TV and Mac Mini.

And the curve on my iMac always reminded me of a hyperbola. The hyperbola is the curve that you see everyday in your home, but never really take notice of it. When a cone of light casts a curve on the wall, this curve is a hyperbola.

 

Hyperbolic Curve

A hyperbolic curve cast on a wall.

 

In the photograph above, the curves cast onto the wall by the circular rim of the glass lampshade are hyperbolic curves.
Note: The dotted line in my photo is an approximation using a bezier curve.

Lights certainly do cast beautiful hyperbolic curves, and for this reason, it’s easy to understand why Apple may be using them. Then again, it may be another conic section at play here.

 

Conic Sections

 

Conic Sections

Conic Sections Formed from Planes Intersecting with Cones

 

The hyperbola is one of four conic sections. The conic sections above are:

  • circle (upper-left).
    Where the horizontal pink plane intersects the cone, the line of intersection on the plane is a circle.
  • ellipse (lower left).
    Where the angled green plane intersects the cone as shown, the line of intersection traced on the plane is an ellipse.
  • hyperbola (upper and lower right).
    Where the vertical blue plane intersects both cones, the lines of intersection on the plane are hyperbolas.
  • parabola (lower-right).
    Where the angled purple plane intersects the cone as shown, the line of intersection on the plane is a parabola.

This is easier to see in the picture below:

 

Conic Section Curves

Conic Sections (Dotted Lines) Formed from Planes Intersecting with Cones

iOS Icon Mask – Parabolic and Hyperbolic Drawing Methods

Using the methods outlined in the book ‘Geometrical Drawing for Art Students’ by I.H. Morris, I tried to see if a parabola or hyperbola would fit the bill. According to Morris, the curve of a parabola is traced when a point moves so that its distance from the focus (F) always equals its distance from the fixed line called the directrix (DD below). The hyperbola is traced when a point moves so that its distance from the focus is always greater, in a constant ratio, than its distance from the directrix.

 

Morris's Methods for Drawing a Parabola and Hyperbola.

Problem 263 (left) To draw a parabola, the focus and directrix being given.
Problem 270 (right) To describe the curve of a hyperbola, the focus, directrix, and vertex being given.

 

Note: It’s out of print, however, you may be able to pick up an old copy of Morris’s book at your local second-hand book shop or online. My copy was published in 1935.

 

Icon Mask Curve Using Methods for Creating a Parabola (left) and a Hyperbola (right).

Application of Morris’s Problem 263 to a right angled corner (left)
Application of Morris’s Problem 270 to a right angled corner (right)

 

The two drawings on the left (above) show the application of Morris: ‘Problem 263.— To draw a parabola, the focus and directrix being given.’

The drawings on the right (above) show the application of Morris: ‘Problem 270.— To describe the curve of a hyperbola, the focus, directrix, and vertex being given…’.

In this case the resultant curves appear identical (Is this an Aha! moment or a Doh! moment?). I guess this has to do with the right-angled corner of the icon, which means the resultant curve is more likely to be an ellipse.

 

iOS Icon Mask – Method for Drawing an Ellipse

 

To describe an ellipse, the major and minor axes being given.

Problem 257 – To describe an ellipse, the major and minor axes being given. Fifth Method.

 

My next attempt was to create an ellipse generated from two circles centred on one of the iOS grid intersections. Morris provides many methods for constructing an ellipse. For this I followed: ‘Problem 257 – To describe an ellipse, the major and minor axes being given. Fifth Method.’

 

Method to describe an ellipse, the major and minor axes being given.

Application of Problem 257 to a right angled corner – To describe an ellipse, the major and minor axes being given. Fifth Method.’

 

I had to fudge things a bit because I did not know the length of the minor axis. Using CAD software, it was easy to nudge the minor axis until the ellipse was tangent to the sides of the icon mask. Again, this method seemed to create a similar curve to the iOS icon mask. I drew more ellipses, each one larger than the other. It didn’t seem to make any difference to the shape or size of the curve that makes up the corner of the mask.

 

Describing an ellipse, the major and minor axes being given.

iOS Icon Mask – Ellipse Construction

 

All these methods were producing the same curve. There were some differences, but these differences were likely to arise from my blunt drawing techniques.

 

Why Bother?

Given that Apple applies the mask to the icons, why bother trying to work out what the curve of the icon mask is?

Well, it’s to solve a problem for designers who want to inset a smaller curve within the icon mask. There are so many icons that have an inset curve that just looks awkward and out of place. Once you have a method for generating the curve, it’s easy to inset an equally elegant smaller curve.

Insetting a Matching Curve Within the iOS Icon Mask.

Insetting a Matching Curve Within the iOS Icon Mask.

 

So do any of these curves match up with the curve of the iOS icon mask? At first glance, they seem pretty close. Unfortunately, without access to a high-resolution version of Apple’s icon mask, it is difficult to verify. By enlarging an icon, the antialiasing makes the edge difficult to discern.

One check I did perform was to overlay Mike Swanson’s mask. It’s a very rough check using the low resolution image from his website, but it’s also a quick way of seeing if the above geometrical methods are out-of whack. Mike’s mask (blue shape) is derived using a genetic algorithm. The overlaid ellipses certainly don’t look out of place.

 

Initial comparison of geometrically derived ellipse with an algorithm generated mask from Mike Swanson.

 

Mike kindly sent me a high-resolution version of his mask. It turned out not to be an exact match (see below), but it was similar. Mike did say that his script was derived from testing a small icon (which is the only ‘official’ mask that Apple provides), and that when scaled up, errors (if any) would be magnified.

 

A comparison of the ellipse with Mike Swanson's mask.

A comparison of the ellipse with Mike Swanson’s mask.

 

So without an official high-resolution mask, there is no way of confirming the accuracy of any curve derived from conic sections, genetic algorithms, or otherwise. If I come across another other potentially useful method, I’ll let you know.

If you are going to give any of these geometric methods a go, the one thing you may need as a starting point is a geometrically derived iOS icon grid. To build your own geometrically derived iOS icon grid, you can follow the step-by-step procedure in my book: ‘Icon Design – Designing Elegant Icons’.

Good Luck.

%d bloggers like this: