Los rectángulos con esquinas redondeadas están en todas partes

• Cuando QuickDraw para Macintosh todavía se llamaba LisaGraf, Bill Atkinson creó rutinas rápidas para círculos y óvalos, y Steve Jobs quiso ampliarlas a una forma más útil para la UI
• En ese momento, el procesador 68000 no tenía punto flotante y la multiplicación y la división también eran lentas, así que Bill optó por calcular círculos usando solo sumas y restas
• La demo de óvalos era muy rápida, pero Steve convenció a Bill mostrándole ejemplos reales dentro y fuera de la habitación y diciendo que “los rectángulos con esquinas redondeadas están en todas partes”
• Bill, que al principio lo veía innecesario y difícil, decidió volver a evaluar la dificultad de implementarlo después de ver un letrero con esquinas redondeadas
• La demo presentada al día siguiente funcionaba casi tan rápido como un rectángulo común, y RoundRects se convirtió luego en un elemento gráfico esencial de la UI de Macintosh

---

Una petición que empezó con rutinas rápidas de óvalos

• Bill Atkinson trabajaba principalmente desde su casa, pero cuando lograba un avance significativo solía ir corriendo a mostrarlo a Texaco Towers, donde estaban las oficinas de Macintosh de Apple
• El objetivo de esa visita era demostrar las nuevas oval routines, y en ese entonces QuickDraw todavía se llamaba LisaGraf
• Bill había agregado código para dibujar círculos y óvalos muy rápido, y mostró la pantalla de Lisa llenándose con óvalos de tamaños aleatorios

Las limitaciones del 68000 y el método de cálculo

• Dibujar círculos rápidamente en Macintosh no era fácil debido a las limitaciones del hardware de la época
  • Para calcular círculos, normalmente se necesita una raíz cuadrada
  • El procesador 68000 de Lisa y Macintosh no admitía operaciones de punto flotante
  • La multiplicación y la división del 68000 tampoco eran rápidas
• Bill usó un método que funcionaba solo con sumas y restas, sin multiplicaciones ni divisiones
• La clave era la propiedad de que la suma de una secuencia de números impares da el siguiente cuadrado perfecto
  • Ej.: 1 + 3 = 4
  • Ej.: 1 + 3 + 5 = 9
  • Ej.: 1 + 3 + 5 + 7 = 16
• Usando esta propiedad, ejecutaba un bucle hasta superar un umbral para decidir cuándo incrementar el valor de la coordenada dependiente, y QuickDraw podía dibujar óvalos muy rápido

La petición de Steve Jobs por rectángulos redondeados

• Cuando la demo de Bill funcionó mucho más rápido de lo esperado, Steve Jobs preguntó si también podía dibujar rectángulos con esquinas redondeadas, no solo círculos y óvalos
• Bill respondió que no había una forma de implementarlo, que sería muy difícil y que en realidad tampoco era necesario
• Steve dijo que “los rectángulos con esquinas redondeadas están en todas partes” y de inmediato señaló ejemplos dentro de la habitación
  • Pizarrón blanco
  • Algunos escritorios y mesas
• Agregó que, mirando por la ventana, también se podían ver más ejemplos casi por todos lados

Ejemplos del mundo real impulsaron la implementación

• Steve convenció a Bill de caminar un rato alrededor de la cuadra y fue señalando uno por uno los rectángulos con esquinas redondeadas que veía
• Cuando ambos pasaron junto a una señal de prohibido estacionar con esquinas redondeadas, Bill cambió de opinión
• Bill volvió a su casa para trabajar en ello, diciendo que comprobaría si realmente era tan difícil como pensaba

RoundRects se convirtió en un elemento básico de la UI

• Bill regresó a Texaco Towers la tarde siguiente y mostró una nueva demo: los rectángulos con esquinas redondeadas se dibujaban de forma elegante y muy rápida
• La velocidad era casi comparable a la de dibujar rectángulos comunes
• Bill agregó ese código a LisaGraf y nombró al nuevo elemento gráfico básico RoundRects
• Durante los meses siguientes, los roundrects se incorporaron a muchas partes de la interfaz de usuario y pronto se volvieron indispensables

[GN⁺]

Opiniones de Hacker News

• Windows usó esquinas redondeadas en los botones desde la versión 1.0 hasta la 3.11; después cambió a esquinas rectas hasta la UI con temas de XP, donde volvieron a redondearse un poco; en 8 volvieron a ser rectas y en 11 otra vez redondeadas
  https://user-images.githubusercontent.com/7389110/64139289-3...
  Aun así, sigo prefiriendo las esquinas afiladas

  • De esos, Windows 2000 todavía me parece el mejor. Salvo por el detalle de que no tiene antialiasing en las fuentes
    Windows 10 también lo hizo bastante bien, pero el problema es el desastre, sobre todo al recorrer la configuración, donde de pronto aparecen paradigmas de UI completamente distintos y uno siente que entró en un mundo donde se enredan entre sí
  • Las esquinas afiladas son peligrosas. Esas ventanas dan la sensación de que, si las rozas mal con el mouse, te vas a cortar
    Curiosamente, una vez me alojé en un hotel de Asia Oriental, quizá en un lugar con influencia tibetana, y recuerdo que todas las esquinas de la habitación eran redondeadas. Simplemente se sentía mejor y más cómodo. En Occidente, contratar a un artesano para redondear todas las esquinas de una habitación sería carísimo; aunque podría hacerse con yeso, difícilmente duraría más de 10 años y no creo que aumente el valor de reventa
  • Esa imagen muestra con claridad cuánto perdimos al pasar a las GUI planas, y lo importantes que son las sombras en los botones
    Al mismo tiempo, también confirma que realmente no me importa ni un poquito si las esquinas son redondeadas o rectas
  • Es interesante ver los temas de Windows a lo largo de los años. Personalmente, prefiero una UI que parezca hecha de fragmentos de titanio y acero antes que una aburrida paleta de colores plana tipo RGBCMYK. Hasta el nombre era Glass, y había una intención de transmitir materialidad
    Los desarrolladores pueden tener paletas de diseño como Solarized, pero no entiendo por qué Microsoft impone su voluntad y somete a todos al mismo azul horrible. Odio ese azul porque es obvio que alguien tuvo una conversación corporativa del tipo: “el amarillo parece demasiado advertencia, el naranja es demasiado ambiguo, el rojo está demasiado enojado, el morado llama demasiado la atención. El azul es seguro”
  • Es una imagen realmente buena. Para mí, XP es el mejor. El solo hecho de que sea amarillo y no gris marca una gran diferencia
    No me gusta que los widgets modernos no tengan sombreado. Entiendo que quieran verse modernos, pero simplemente se siente muy flojo
    También se nota que desde Windows Vista/7 los botones de pronto se volvieron casi el doble de grandes y aparecieron márgenes y padding por todas partes. El espacio que desperdicia la UI se está volviendo cada vez más absurdo

• Disfruté esta historia durante décadas, pero lo que más me llama la atención ahora es que Bill Atkinson estaba trabajando desde casa cuando creó el Macintosh

  • Si vas a tomar LSD, ¿no sería mejor hacerlo en casa que en la oficina?
    https://news.ycombinator.com/item?id=19238322
  • Si no recuerdo mal, hacía las tareas más complejas en casa para que no lo interrumpieran, y también trabajaba en la oficina. Era una división del trabajo saludable

• ¿El rectángulo redondeado de Apple no es ahora un squircle?
  https://medium.com/minimal-notes/rounded-corners-in-the-appl...

  • Quizá este sea un artículo anterior más cercano al original: https://www.figma.com/blog/desperately-seeking-squircles/
  • Sí. Creo recordar que probablemente cambiaron a squircles desde iOS 7

• Artículos relacionados:
  Round rectangles are everywhere - https://news.ycombinator.com/item?id=28679496 - septiembre de 2021, 26 comentarios
  History of Rounded Corners - https://news.ycombinator.com/item?id=7062706 - enero de 2014, 1 comentario
  Steve Jobs and Rounded Corners - https://news.ycombinator.com/item?id=3096927 - octubre de 2011, 1 comentario
  The story of round rectangles - https://news.ycombinator.com/item?id=1636358 - agosto de 2010, 77 comentarios

• Se subestima lo extraordinario que era el gusto de Steve Jobs, y lo genuina que era la expresión “artes liberales y tecnología”

  • Coincido en que es importante, pero no creo que esté subestimado. Al contrario, se lo valora muchísimo
  • Quizá quien sí está subestimado es Bill Atkinson. Al final es famoso por haberlo dejado todo y haberse ido, pero QuickDraw, MacPaint y HyperCard son una racha de tres logros enormes
  • No sé si “subestimado” sea exactamente la palabra adecuada aquí. De hecho, se lo celebra como prácticamente el mayor visionario del diseño y la innovación en la historia de la industria tecnológica
    Aun así, coincido en que cada vez que aparece una anécdota como esta vuelve a sorprender. Entre los numerosos narcisistas que mueven el mundo, creo que a él lo recordaré de la mejor manera
  • Chrisann Brennan, quien fue su novia y la madre de su hija, era artista. Todo eso aparece en su libro

• Un ejemplo de rectángulos redondeados agregados por razones puramente estéticas eran las ventanas del escritorio en las Mac antiguas. Cuando se encendía la pantalla durante el arranque, obviamente era rectangular, pero una de las primeras cosas que hacía el software era redondear esas esquinas, y así permanecía hasta que otro software pasaba a pantalla completa
  Windows no tenía nada de eso, y era algo claramente “inútil”, pero a mí me gustaba ese detalle

• El pasaje que dice que “durante los meses siguientes, los rectángulos redondeados se filtraron en varias partes de la interfaz de usuario y pronto se volvieron indispensables” termina mostrando que, al final, eso también era solo una moda como cualquier otro diseño. Luego se pasó a las esquinas afiladas y al diseño plano, después se volvió a las esquinas redondeadas, luego otra vez a lo angular, y de nuevo de regreso.
  Se ve este ciclo infernal desarrollándose frente a nuestros ojos. Hace más o menos un año, alguien de Chrome tuvo la brillante idea de “refrescar el diseño”, como suele pasar en las grandes empresas, y de pronto las pestañas se volvieron redondeadas y aparecieron pequeñas esquinas redondeadas alrededor de la barra de navegación.

  • Las esquinas redondeadas en realidad son un elemento bastante importante en términos de accesibilidad, y un recurso Gestalt potente en diseño. El radio del borde de un rectángulo redondeado permite distinguir de un vistazo el límite de un elemento y qué queda adentro o afuera.
    Las esquinas redondeadas ajustadas como círculos concéntricos también pueden comunicar claramente, desde la Gestalt, una relación padre-hijo.
  • Parece que lo único que no cambia en el diseño web moderno son los márgenes y el padding, que no dejan de aumentar. Todo lo demás es cíclico.
    Cuando Google hizo que las esquinas rectangulares fueran completamente redondeadas, también aumentó los márgenes y el padding. Si el diseño con texturas vuelve a ponerse de moda, creo que entonces también aumentarán más los márgenes y el padding.

• Hack de la ROM de Mac OS para crear ventanas completamente circulares: https://web.archive.org/web/20201209143138/https://macgui.co...

  • Aquí el “hack” no es la parte de dibujar ventanas redondeadas. Eso no es más que crear una nueva forma de ventana con la API del sistema operativo.
    El hack es la parte de inyectar ese código en el Finder. Un método era guardar un WDEF dentro del archivo Desktop de un disquete, y con solo insertar ese disquete se podía cambiar la nueva forma de las ventanas.
    Finder abría y mantenía abierto el resource fork de ese archivo para obtener la información de archivos del disquete. Al abrir una ventana, Finder le pedía al Resource Manager “WDEF #0”, y el Resource Manager encontraba eso dentro del archivo Desktop, o más exactamente, un WDEF que se hacía pasar por eso. No era tan difícil crear un troyano en ese OS.

• Ahora estoy aprendiendo a diseñar modelos para impresión 3D, y las esquinas redondeadas son tanto una cuestión de necesidad como de estética. Los objetos con esquinas afiladas son incómodos de agarrar y, según el material, incluso pueden causar heridas. Tampoco son higiénicos y es difícil limpiarles el polvo.
  En cambio, la matemática para generar esquinas redondeadas en formas arbitrarias es engorrosa; al imprimir, muchas veces se necesitan soportes, y después hace falta posprocesado para retirar esos soportes y lijar las curvas.

• Me da curiosidad por qué Bill dijo: “No, no hay forma de hacer eso. De hecho, sería realmente difícil”. ¿Por qué no habría sido trivial aplicar su optimización de elipses a un cuarto de círculo?

  • Yo me hice la misma pregunta hace unos años.
    Probablemente él estaba pensando en modelar un rectángulo redondeado con una sola fórmula matemática. https://news.ycombinator.com/item?id=15073696
    Eso probablemente sea imposible, porque un rectángulo redondeado no es continuo. Pero tampoco es un enfoque necesario en absoluto, ya que basta con procesar por separado los tramos de cuarto de círculo y los tramos rectos.
  • Como escribió Andy, Bill estaba haciendo una demostración muy impresionante y quizá se sintió un poco molesto porque Steve no la reconocía como correspondía.
    Además, la pregunta surgió de repente y, literalmente, era algo que nadie había hecho antes.
  • Ver que personas plenamente capaces se comportaban así alrededor de Jobs ayuda a entender por qué terminó siendo como era.
  • En el caso más común, probablemente ni siquiera eso habría sido necesario. Lo más probable es que hubieran guardado una máscara hardcodeada para redondear las esquinas, y eso habría sido mucho más rápido.