La fórmula para representar la silueta superelipsoidal de los iconos de iOS 7

Con la llegada de iOS 7 Apple cambió la máscara que aplica sobre los iconos de las aplicaciones. Recordemos que los desarrolladores empaquetan con su aplicación una imagen del icono con un tamaño de 120×120 para el iPhone y de 152×152 pídeles en el iPad. Sí, cuadrados.

Después es iOS quien se encarga de aplicarle una máscara para darle este efecto de cuadrado con las esquina redondeadas, que por cierto esta figura geométrica se llama superelipse o también curva de Lamé. Si tenéis unos vagos conocimientos de análisis matemático y geometría sabréis que la fórmula por la cual se define esta figura es muy parecida a la de una elipse corriente:

Esta fórmula es la que define la máscara, la silueta, la superelipse que se superpone sobre los iconos de iOS 7, tanto en el iPad como en el iPhone y iPod touch. Lo interesante es pues poder coger esta fórmula para poder usarla en nuestros diseños de iconos si lo que queremos es por ejemplo hacer un icono para una aplicación de iOS 7.

El problema es que hay una pequeña diferencia con los iconos originales de iOS 7, casi inapreciable, como se puede observar con el icono de Tweetbot más arriba. Esta superposición muestra la diferencia –la nuestra es la n=5–. La fórmula entonces no sería realmente esa, pero es la forma más cerca de la original, ya que Apple no facilita ninguna plantilla para que los diseñadores puedan trabajar, lo hace iOS detrás de las cortinas sin más utilizando la función UIBezierPath.

Este mismo procedimiento puede servir para representar cualquier otra figura geométrica que pueda representarse matemáticamente. Lo haremos gracias a una útil pero desconocida herramienta integrada en OS X desde Tiger 10.4, Grapher. Grapher permite eso, representar funciones 2D o 3D a partir de ecuaciones. Por lo que si introducimos la ecuación anterior obtendremos la figura que estábamos buscando.

Grapher nos permite exportar nuestra representación, a parte de TIFF o JPG, a archivos EPS o PDF, ideales para ser trabajados en Illustrator por ejemplo o con el programa de diseño que empleemos. Con esto podemos representar cualquier forma geométrica, guardarla y usarla más tarde en nuestros diseños.