Les rectangles aux coins arrondis sont partout

 (folklore.org)
1 points par GN⁺ 2024-06-25 | 1 commentaires | Partager sur WhatsApp
  • À l’époque où QuickDraw pour Macintosh s’appelait encore LisaGraf, Bill Atkinson avait créé des routines rapides pour les cercles et les ellipses, et Steve Jobs voulait les étendre à une forme plus utile pour l’interface utilisateur
  • Le processeur 68000 de l’époque n’avait pas de calcul en virgule flottante, et la multiplication comme la division étaient lentes, si bien que Bill a choisi une méthode qui calculait les cercles avec des additions et des soustractions uniquement
  • La démo des ellipses était extrêmement rapide, mais Steve a convaincu Bill en lui montrant des exemples concrets dans la pièce et à l’extérieur, en disant : « Les rectangles aux coins arrondis sont partout »
  • Bill, qui jugeait d’abord cela inutile et difficile, a changé d’avis après avoir vu un panneau aux coins arrondis et a décidé de revérifier la difficulté de l’implémentation
  • La démo présentée le lendemain fonctionnait à une vitesse proche de celle d’un rectangle ordinaire, et les RoundRects sont ensuite devenus un élément graphique essentiel de l’interface du Macintosh

Une demande née d’une routine d’ellipse rapide

  • Bill Atkinson travaillait surtout depuis chez lui, mais lorsqu’il faisait une avancée importante, il se précipitait aux Texaco Towers, où se trouvait le bureau Macintosh d’Apple, pour la montrer
  • Cette fois, le but de la visite était de faire la démonstration des nouvelles oval routines, et à l’époque QuickDraw s’appelait encore LisaGraf
  • Bill avait ajouté du code capable de dessiner des cercles et des ellipses très rapidement, et il a montré un écran Lisa rempli d’ellipses de tailles aléatoires

Les contraintes du 68000 et la méthode de calcul

  • Dessiner rapidement des cercles sur le Macintosh n’était pas simple à cause des limites matérielles de l’époque
    • Le calcul d’un cercle nécessite généralement une racine carrée
    • Les processeurs 68000 du Lisa et du Macintosh ne prenaient pas en charge les opérations en virgule flottante
    • La multiplication et la division sur le 68000 n’étaient pas rapides non plus
  • Bill a utilisé une méthode qui ne faisait intervenir que des additions et des soustractions, sans multiplication ni division
  • L’idée centrale reposait sur la propriété selon laquelle la somme des nombres impairs donne le carré parfait suivant
    • Exemple : 1 + 3 = 4
    • Exemple : 1 + 3 + 5 = 9
    • Exemple : 1 + 3 + 5 + 7 = 16
  • En exploitant cette propriété, il faisait tourner une boucle jusqu’à dépasser un seuil pour décider quand incrémenter la valeur de la coordonnée dépendante, ce qui permettait à QuickDraw de dessiner des ellipses très rapidement

La demande de Steve Jobs pour les rectangles arrondis

  • Quand Steve Jobs a vu que la démo de Bill allait bien plus vite que prévu, il lui a demandé s’il pouvait dessiner non seulement des cercles et des ellipses, mais aussi des rectangles aux coins arrondis
  • Bill a répondu qu’il n’avait aucune idée de la manière de les implémenter, que ce serait très difficile, et qu’en pratique cela n’était pas nécessaire
  • Steve a rétorqué : « Les rectangles aux coins arrondis sont partout », en montrant immédiatement des exemples dans la pièce
    • le tableau blanc
    • certains bureaux et certaines tables
  • Il a ajouté qu’il y en avait encore davantage presque partout où l’on regardait par la fenêtre

Des exemples du monde réel qui ont forcé l’implémentation

  • Steve a convaincu Bill de faire un petit tour autour du pâté de maisons, en lui montrant un à un les rectangles aux coins arrondis qui sautaient aux yeux
  • Lorsque les deux hommes sont passés devant un panneau de stationnement interdit aux coins arrondis, Bill a changé d’avis
  • Bill est rentré chez lui pour travailler, en disant qu’il allait vérifier si c’était vraiment aussi difficile qu’il le pensait

Les RoundRects deviennent un élément de base de l’interface

  • Bill est revenu aux Texaco Towers l’après-midi suivant avec une nouvelle démo, et les rectangles aux coins arrondis étaient dessinés de manière magnifique et très rapide
  • La vitesse était presque proche de celle d’un rectangle ordinaire
  • En ajoutant ce code à LisaGraf, Bill a donné à ce nouvel élément graphique de base le nom de RoundRects
  • Au cours des mois qui ont suivi, les roundrects ont été intégrés à différentes parties de l’interface utilisateur, et ils sont vite devenus indispensables

À lire aussi

1 commentaires

 
GN⁺ 2024-06-25
Avis sur Hacker News

  • Windows utilisait des boutons à coins arrondis de la version 1.0 à 3.11, puis est passé à des coins anguleux jusqu’à l’interface à thèmes de XP, avant de redevenir légèrement arrondi avec XP, de revenir à des angles vifs avec 8, puis à nouveau arrondi avec 11
    https://user-images.githubusercontent.com/7389110/64139289-3...
    Malgré tout, je préfère toujours les angles vifs

    • Parmi tous ceux-là, Windows 2000 reste à mes yeux celui qui a la meilleure apparence. Mis à part l’absence d’anticrénelage des polices
      Windows 10 s’en sortait plutôt bien aussi, mais le vrai problème, c’est ce chaos où, surtout quand on navigue dans les réglages, des paradigmes d’interface complètement différents surgissent soudainement et se mélangent les uns aux autres
    • Les angles vifs sont dangereux. Ces fenêtres donnent l’impression qu’on pourrait saigner en les frôlant par erreur avec la souris
      Curieusement, j’ai séjourné un jour dans un hôtel en Asie de l’Est, peut-être dans un endroit marqué par l’influence tibétaine, et je me souviens que tous les coins de la chambre étaient arrondis. C’était simplement plus agréable et plus rassurant. En Occident, faire venir un artisan pour arrondir tous les coins d’une pièce coûterait probablement très cher, et même si on pouvait le faire en plâtre, ça tiendrait difficilement plus de dix ans et je doute que cela augmente la valeur à la revente
    • Cette image montre très clairement tout ce que nous avons perdu avec le passage aux GUI plates, et à quel point les ombres sont importantes sur les boutons
      En même temps, elle me confirme aussi que je me soucie vraiment très peu de savoir si les coins sont arrondis ou anguleux
    • C’est intéressant de voir les thèmes Windows au fil des années. Personnellement, je préfère une interface qui ressemble à des morceaux de titane et d’acier plutôt qu’à une palette de couleurs RGBCMYK plate et ennuyeuse. Ça s’appelait Glass, après tout, et il y avait une intention de transmettre une matérialité
      Les développeurs peuvent avoir des palettes de couleurs comme Solarized, alors je ne comprends pas pourquoi Microsoft impose sa volonté pour soumettre tout le monde au même bleu atroce. Je déteste ce bleu parce qu’on imagine très bien une conversation d’entreprise du genre : « le jaune fait trop alerte, l’orange est trop ambigu, le rouge est trop en colère, le violet ressort trop. Le bleu est sûr »
    • C’est vraiment une excellente image. Pour moi, XP reste le meilleur. Le simple fait qu’il soit jaune au lieu d’être gris fait déjà une grande différence
      Je n’aime pas l’absence d’ombres sur les widgets modernes. Je comprends l’idée de vouloir paraître moderne, mais ça donne juste une impression de paresse extrême
      On voit aussi qu’à partir de Windows Vista/7, les boutons deviennent soudainement environ deux fois plus gros et que des marges et paddings apparaissent un peu partout. L’espace gaspillé par l’UI devient de plus en plus absurde

  • J’apprécie cette histoire depuis des décennies, mais ce qui me frappe le plus aujourd’hui, c’est que Bill Atkinson travaillait à domicile quand il concevait le Macintosh

    • Si on prend du LSD, ce n’est pas mieux à la maison qu’au bureau ?
      https://news.ycombinator.com/item?id=19238322
    • Si je me souviens bien, il faisait les tâches les plus complexes chez lui pour ne pas être dérangé, et il travaillait aussi au bureau. Une répartition saine du travail

  • Le rectangle arrondi d’Apple, ce n’est pas plutôt un squircle maintenant ?
    https://medium.com/minimal-notes/rounded-corners-in-the-appl...

  • Articles liés :
    Round rectangles are everywhere - https://news.ycombinator.com/item?id=28679496 - septembre 2021, 26 commentaires
    History of Rounded Corners - https://news.ycombinator.com/item?id=7062706 - janvier 2014, 1 commentaire
    Steve Jobs and Rounded Corners - https://news.ycombinator.com/item?id=3096927 - octobre 2011, 1 commentaire
    The story of round rectangles - https://news.ycombinator.com/item?id=1636358 - août 2010, 77 commentaires

  • À quel point le goût de Steve Jobs était remarquable, et à quel point l’expression « les humanités et la technologie » était sincère chez lui, c’est encore sous-estimé

    • Je suis d’accord sur l’importance, mais pas sur le fait que ce soit sous-estimé. Au contraire, c’est très largement reconnu
    • La personne vraiment sous-estimée, ce serait plutôt Bill Atkinson. On se souvient surtout du fait qu’il a tout laissé derrière lui, mais QuickDraw, MacPaint et HyperCard, c’est un triplé phénoménal
    • Je ne suis pas sûr que « sous-estimé » soit le mot exact ici. Il est pratiquement célébré comme le plus grand visionnaire du design et de l’innovation de l’histoire de l’industrie tech
      Cela dit, je suis d’accord pour dire que ce genre d’anecdote continue de me surprendre à chaque fois. Parmi tous les narcissiques qui font tourner le monde, je pense que c’est lui que je garderai en meilleure mémoire
    • Chrisann Brennan, sa petite amie et la mère de son enfant, était artiste. Tout cela figure dans son livre

  • Un exemple de rectangle arrondi ajouté pour des raisons purement esthétiques était la fenêtre du bureau sur les anciens Mac. Quand l’écran s’allumait pendant le démarrage, elle était bien sûr rectangulaire, mais l’une des premières choses que faisait le logiciel était d’arrondir ses coins, et cet état persistait jusqu’à ce qu’un autre logiciel passe en plein écran
    Windows n’avait rien de ce genre, et c’était clairement « inutile », mais j’aimais ce souci du détail

  • Le passage « au cours des mois qui ont suivi, les rectangles aux coins arrondis se sont infiltrés dans plusieurs parties de l’interface utilisateur, jusqu’à devenir rapidement indispensables » montre qu’au fond, ce n’était qu’une mode comme une autre. Puis on est passé aux angles vifs et au flat design, avant de revenir aux coins arrondis, puis de repartir vers quelque chose de plus anguleux, et ainsi de suite
    On voit ce cycle infernal se dérouler sous nos yeux. Il y a environ un an, quelqu’un chez Chrome a eu, comme c’est souvent le cas dans les grandes entreprises, l’idée brillante de « rafraîchir le design », et soudain les onglets sont devenus arrondis et de petits coins arrondis sont apparus autour de la barre de navigation

    • Les coins arrondis sont en réalité un élément assez important du point de vue de l’accessibilité, et un puissant outil de Gestalt en design. Le rayon de bordure d’un rectangle arrondi permet de distinguer d’un coup d’œil les limites d’un élément, ainsi que son intérieur et son extérieur
      Des coins arrondis alignés de manière concentrique peuvent aussi transmettre très clairement, au sens de la Gestalt, une relation parent-enfant
    • Dans le design web moderne, on a l’impression que les seules constantes sont les marges et le padding qui ne cessent d’augmenter. Tout le reste est cyclique
      Quand Google a complètement arrondi les coins des rectangles, ils ont aussi augmenté encore les marges et le padding. Si le design texturé redevient à la mode, on aura probablement encore plus de marges et de padding

  • Hack de la ROM de Mac OS pour créer des fenêtres parfaitement circulaires : https://web.archive.org/web/20201209143138/https://macgui.co...

    • Ici, le « hack » ne consiste pas à dessiner des fenêtres arrondies. Cela revient simplement à créer une nouvelle forme de fenêtre via l’API du système d’exploitation
      Le hack, c’est la partie où ce code est injecté dans le Finder. Une méthode consistait à stocker le WDEF dans le fichier desktop d’une disquette, et le simple fait d’insérer cette disquette permettait de changer la nouvelle forme des fenêtres
      Le Finder ouvrait alors le resource fork de ce fichier afin d’obtenir les informations sur les fichiers de la disquette, puis le gardait ouvert. Lorsqu’on ouvrait une fenêtre, le Finder demandait « WDEF #0 » au Resource Manager, qui le trouvait dans le fichier desktop — ou plus exactement un WDEF qui prétendait l’être. Sur cet OS, il n’était pas très difficile de créer un cheval de Troie

  • Je suis en train d’apprendre à concevoir des modèles pour l’impression 3D, et les coins arrondis relèvent autant de la nécessité que de l’esthétique. Les objets aux arêtes vives sont inconfortables à saisir et, selon le matériau, peuvent même blesser. Ce n’est pas hygiénique non plus, et la poussière y est difficile à nettoyer
    À l’inverse, les mathématiques nécessaires pour générer des coins arrondis à partir d’une forme arbitraire sont assez sales, et l’impression exige souvent des supports, qu’il faut ensuite retirer puis poncer pour lisser les courbes

  • Je me demande pourquoi Bill a dit : « Non, il n’y a aucun moyen de faire ça. En fait, ce serait vraiment difficile. » Pourquoi appliquer son optimisation des ellipses à un quart de cercle n’était-il pas trivial ?

    • Je me suis posé la même question il y a quelques années
      Il est probable qu’il envisageait de modéliser le rectangle arrondi avec une seule formule mathématique. https://news.ycombinator.com/item?id=15073696
      Ce serait probablement impossible, car un rectangle arrondi n’est pas continu. Mais c’est aussi une approche totalement inutile, puisqu’il suffit de traiter séparément les quarts de cercle et les segments droits
    • Comme l’a écrit Andy, Bill faisait une démonstration très impressionnante, et il était peut-être un peu contrarié que Steve ne lui en donne pas vraiment le crédit
      De plus, la question était sortie de nulle part, et au sens littéral, personne n’avait jamais fait cela auparavant
    • Le fait que des gens tout à fait compétents se comportaient ainsi autour de Jobs aide à comprendre pourquoi il est devenu la personne qu’il était
    • Dans le cas le plus courant, cela n’aurait sans doute même pas été nécessaire. Il est très probable qu’ils aient simplement enregistré en dur un masque pour arrondir les coins, ce qui aurait été bien plus rapide