Retângulos com cantos arredondados estão por toda parte

• Na época em que o QuickDraw para Macintosh ainda era chamado de LisaGraf, Bill Atkinson criou rotinas rápidas para círculos e elipses, e Steve Jobs queria expandi-las para uma forma mais útil na UI
• Na época, o processador 68000 não tinha ponto flutuante, e multiplicação e divisão também eram lentas, então Bill escolheu uma forma de calcular círculos usando apenas adição e subtração
• A demonstração de elipses era muito rápida, mas Steve convenceu Bill mostrando exemplos reais dentro e fora da sala, dizendo que “retângulos com cantos arredondados estão por toda parte”
• Bill, que no começo achava desnecessário e difícil, resolveu verificar novamente a dificuldade da implementação depois de ver uma placa com cantos arredondados
• A demonstração apresentada no dia seguinte funcionava a uma velocidade próxima à de retângulos comuns, e os RoundRects depois se tornaram um elemento gráfico essencial da UI do Macintosh

---

Uma demanda que começou com rotinas rápidas de elipse

• Bill Atkinson trabalhava principalmente de casa, mas, quando havia algum avanço significativo, corria até a Texaco Towers, onde ficavam os escritórios do Macintosh da Apple, para mostrá-lo
• O objetivo dessa visita era demonstrar as novas oval routines, e o QuickDraw, na época, ainda era chamado de LisaGraf
• Bill havia adicionado código para desenhar círculos e elipses muito rapidamente e mostrou a tela do Lisa sendo preenchida com elipses de tamanhos aleatórios

As limitações do 68000 e o método de cálculo

• Desenhar círculos rapidamente no Macintosh não era fácil por causa das limitações de hardware da época
  • O cálculo de círculos normalmente exige raiz quadrada
  • O processador 68000 do Lisa e do Macintosh não tinha suporte a operações de ponto flutuante
  • A multiplicação e a divisão no 68000 também não eram rápidas
• Bill usou um método que processava tudo apenas com adição e subtração, sem multiplicação nem divisão
• A ideia central era a propriedade de que a soma de uma sequência de números ímpares resulta no próximo quadrado perfeito
  • Ex.: 1 + 3 = 4
  • Ex.: 1 + 3 + 5 = 9
  • Ex.: 1 + 3 + 5 + 7 = 16
• Usando essa propriedade, ele rodava um loop até ultrapassar um valor-limite e decidia quando incrementar o valor da coordenada dependente, permitindo ao QuickDraw desenhar elipses muito rapidamente

O pedido de Steve Jobs por retângulos arredondados

• Quando a demonstração de Bill rodou muito mais rápido do que o esperado, Steve Jobs perguntou se seria possível desenhar não só círculos e elipses, mas também retângulos com cantos arredondados
• Bill respondeu que não tinha um método para implementar isso, que seria muito difícil e que, na prática, nem era necessário
• Steve disse que “retângulos com cantos arredondados estão por toda parte” e imediatamente apontou exemplos dentro da sala
  • Quadro branco
  • Algumas escrivaninhas e mesas
• Ele acrescentou que, pela janela, também havia mais exemplos em quase qualquer direção que se olhasse

Exemplos do mundo real impulsionaram a implementação

• Steve convenceu Bill a dar uma breve volta pelo quarteirão e foi apontando, um a um, os retângulos com cantos arredondados que chamavam atenção
• Quando os dois passaram por uma placa de proibido estacionar com cantos arredondados, Bill mudou de ideia
• Bill voltou para casa para trabalhar, dizendo que verificaria se era mesmo tão difícil quanto imaginava

RoundRects se tornam um elemento básico da UI

• Bill voltou à Texaco Towers na tarde seguinte e mostrou uma nova demonstração, na qual os retângulos com cantos arredondados eram desenhados de forma bonita e muito rápida
• A velocidade era quase igual à de desenhar retângulos comuns
• Ao adicionar esse código ao LisaGraf, Bill deu ao novo elemento gráfico básico o nome de RoundRects
• Nos meses seguintes, os roundrects foram incorporados a várias partes da interface de usuário e logo se tornaram indispensáveis

[GN⁺]

Comentários do Hacker News

• O Windows usou cantos arredondados nos botões do 1.0 ao 3.11, depois mudou para cantos retos até a UI temática do XP, no XP voltou a ficar levemente arredondado, no 8 ficou reto de novo e no 11 voltou a arredondar
  https://user-images.githubusercontent.com/7389110/64139289-3...
  Mesmo assim, eu ainda prefiro cantos afiados

  • Desses aí, o Windows 2000 ainda é o que acho mais bonito. Tirando o fato de não ter antialiasing de fonte
    O Windows 10 também foi bem legal, mas o problema é a bagunça total, especialmente ao navegar pelas configurações, como se você entrasse num mundo onde paradigmas de UI completamente diferentes aparecem do nada e se misturam
  • Cantos afiados são perigosos. Essas janelas passam a sensação de que você vai sangrar se esbarrar nelas com o mouse por engano
    Curiosamente, já fiquei em um hotel no Leste Asiático, talvez em algum lugar com influência tibetana, e lembro que todos os cantos do quarto eram arredondados. Simplesmente parecia melhor e mais confortável. No Ocidente, chamar um artesão para arredondar todos os cantos de um cômodo sairia caríssimo, e até daria para fazer com gesso, mas dificilmente duraria mais de 10 anos e provavelmente não aumentaria o valor de revenda
  • Essa imagem mostra com clareza o quanto perdemos na transição para a GUI plana e o quanto as sombras eram importantes nos botões
    Ao mesmo tempo, também confirma que eu realmente não ligo nem um pouco para cantos arredondados versus retos
  • É interessante ver os temas do Windows ao longo dos anos. Pessoalmente, gosto mais de uma UI que parece um pedaço de titânio e aço do que de uma paleta de cores sem graça e chapada estilo RGBCMYK. O nome era Glass, e havia uma intenção de transmitir materialidade
    Os desenvolvedores podem ter paletas de cores de design como Solarized, então não entendo por que a Microsoft impõe sua vontade e submete todo mundo ao mesmo azul horrível. Dá para imaginar perfeitamente alguma conversa corporativa do tipo: “amarelo parece muito alerta, laranja é ambíguo demais, vermelho está bravo demais e roxo chama atenção demais. Azul é seguro”. Eu odeio esse azul por causa disso
  • Imagem realmente ótima. Para mim, o XP é o melhor. O simples fato de ser amarelo e não cinza já faz diferença
    Não gosto que os widgets modernos não tenham sombreamento. Entendo a intenção de parecer moderno, mas passa uma sensação de pura preguiça
    Também dá para ver que, a partir do Windows Vista/7, os botões de repente ficaram quase duas vezes maiores e começaram a aparecer espaços em branco e padding por toda parte. O espaço desperdiçado pela UI está ficando absurdamente grande

• Gosto dessa história há décadas, mas o que mais chama atenção agora é o fato de que Bill Atkinson estava trabalhando de casa quando fez o Macintosh

  • Se você estivesse usando LSD, não seria melhor ficar em casa do que no escritório?
    https://news.ycombinator.com/item?id=19238322
  • Se bem me lembro, ele fazia o trabalho mais complexo em casa para não ser interrompido, e também trabalhava no escritório. Era uma divisão saudável

• O retângulo arredondado da Apple agora não é um squircle?
  https://medium.com/minimal-notes/rounded-corners-in-the-appl...

  • Talvez este seja um texto mais antigo, mais próximo do original: https://www.figma.com/blog/desperately-seeking-squircles/
  • Sim. Pelo que lembro, mudou para squircle talvez a partir do iOS 7

• Textos relacionados:
  Round rectangles are everywhere - https://news.ycombinator.com/item?id=28679496 - setembro de 2021, 26 comentários
  History of Rounded Corners - https://news.ycombinator.com/item?id=7062706 - janeiro de 2014, 1 comentário
  Steve Jobs and Rounded Corners - https://news.ycombinator.com/item?id=3096927 - outubro de 2011, 1 comentário
  The story of round rectangles - https://news.ycombinator.com/item?id=1636358 - agosto de 2010, 77 comentários

• O quanto o gosto de Steve Jobs era excelente, e o quanto a expressão “liberal arts and technology” era sincera, é algo subestimado

  • Concordo que isso é importante, mas não acho que seja subestimado. Pelo contrário, é extremamente valorizado
  • Na verdade, quem pode ser subestimado é o Bill Atkinson. Ele acabou ficando conhecido por largar tudo e ir embora, mas QuickDraw, MacPaint e HyperCard são uma sequência de três acertos impressionante
  • Não sei se “subestimado” é exatamente a palavra certa aqui. Ele é celebrado praticamente como o maior visionário de design e inovação da história da indústria de tecnologia
    Ainda assim, concordo que essas histórias sempre me surpreendem de novo. Entre os muitos narcisistas que movem o mundo, acho que ele é o de quem vou me lembrar com mais carinho
  • Chrisann Brennan, sua namorada e mãe de seu filho, era artista. Está tudo no livro dela

• Um exemplo de retângulo arredondado adicionado por puro motivo estético era a janela da área de trabalho nos Macs antigos. Quando a tela ligava durante o boot, ela obviamente era retangular, mas uma das primeiras coisas que o software fazia era arredondar aqueles cantos, e aquilo permanecia assim até outro software mudar para tela cheia
  O Windows não tinha nada assim e era claramente algo “inútil”, mas eu gostava desse detalhe

• O trecho “nos meses seguintes, os retângulos arredondados se infiltraram em várias partes da interface do usuário e logo se tornaram indispensáveis” acaba mostrando que isso também era só uma moda, como qualquer outro design. Aí foi para cantos afiados e design plano, depois voltou para cantos arredondados, depois ficou mais angular de novo, e depois voltou outra vez
  Dá para ver esse ciclo infernal acontecendo diante dos nossos olhos. Cerca de um ano atrás, alguém do Chrome teve a ideia brilhante de “dar uma renovada no design”, como grandes empresas costumam fazer, e de repente as abas ficaram arredondadas e surgiram pequenos cantos arredondados ao redor da barra de navegação

  • Cantos arredondados são, de fato, um elemento bem importante do ponto de vista da acessibilidade e um poderoso recurso de Gestalt no design. O raio da borda de um retângulo arredondado permite distinguir de relance os limites do elemento e o que está dentro e fora dele
    Cantos arredondados alinhados de forma concêntrica também podem transmitir com clareza, em termos gestálticos, a relação entre pai e filho
  • A única constante no design web moderno parecem ser as margens e paddings que só aumentam. Todo o resto é cíclico
    Quando o Google arredondou completamente os cantos retangulares, também aumentou ainda mais as margens e os paddings. Se o design com textura voltar a ficar na moda, acho que até então as margens e os paddings vão aumentar de novo

• Hack de ROM do Mac OS para criar janelas perfeitamente circulares: https://web.archive.org/web/20201209143138/https://macgui.co...

  • Aqui, o “hack” não é a parte de desenhar a janela redonda. Isso era apenas criar um novo formato de janela com a API do sistema operacional
    O hack era a parte de injetar esse código no Finder. Um dos métodos era armazenar o WDEF no arquivo de desktop de um disquete, e bastava inserir esse disquete para alterar o novo formato de janela
    O Finder abria o resource fork desse arquivo e o mantinha aberto para obter as informações dos arquivos do disquete. Ao abrir uma janela, o Finder pedia ao Resource Manager o “WDEF #0”, e o Resource Manager o encontrava dentro do arquivo de desktop, ou melhor, encontrava um WDEF fingindo ser exatamente isso. Naquele sistema operacional, não era tão difícil criar um cavalo de Troia

• Estou aprendendo a projetar modelos para impressão 3D agora, e cantos arredondados são tanto uma questão de necessidade quanto de estética. Objetos com cantos afiados são desconfortáveis de segurar e, dependendo do material, também podem causar ferimentos. Também não são higiênicos e são difíceis de limpar da poeira
  Em contrapartida, a matemática para gerar cantos arredondados em formas arbitrárias é complicada, muitas vezes exige suportes na hora da impressão e depois requer pós-processamento para remover esses suportes e lixar as curvas

• Fico curioso sobre por que Bill disse: “Não, não há como fazer isso. Na verdade, seria muito difícil.” Por que aplicar sua otimização de elipse a um quarto de círculo não seria algo trivial?

  • Eu fiz a mesma pergunta alguns anos atrás
    É bem possível que ele estivesse pensando em modelar o retângulo arredondado com uma única expressão matemática. https://news.ycombinator.com/item?id=15073696
    Isso provavelmente seria impossível, porque um retângulo arredondado não é contínuo. Mas também seria uma abordagem totalmente desnecessária, já que basta tratar separadamente os trechos de quarto de círculo e os trechos retos
  • Como Andy escreveu, Bill estava fazendo uma demonstração muito impressionante e talvez tenha ficado um pouco contrariado porque Steve não reconheceu isso adequadamente
    Além disso, a pergunta surgiu de repente, e era algo que, literalmente, ninguém tinha feito antes
  • Ver pessoas totalmente competentes se comportando assim ao redor de Jobs ajuda a entender por que ele se tornou esse tipo de pessoa
  • No caso mais comum, isso provavelmente nem teria sido necessário. É bem provável que eles tenham armazenado de forma hardcoded uma máscara para arredondar os cantos, e isso teria sido muito mais rápido