Persegi Panjang Bersudut Membulat Ada di Mana-Mana

 (folklore.org)
1 poin oleh GN⁺ 2024-06-25 | 1 komentar | Bagikan ke WhatsApp
  • Saat QuickDraw untuk Macintosh masih disebut LisaGraf, Bill Atkinson membuat rutin lingkaran dan elips yang cepat, dan Steve Jobs ingin memperluasnya ke bentuk yang lebih berguna untuk UI
  • Pada saat itu, prosesor 68000 tidak memiliki floating point, dan perkalian serta pembagian juga lambat, sehingga Bill memilih pendekatan yang menghitung lingkaran hanya dengan penjumlahan dan pengurangan
  • Demo elips itu sangat cepat, tetapi Steve meyakinkan Bill dengan mengatakan, “persegi panjang bersudut membulat ada di mana-mana,” sambil menunjukkan contoh nyata di dalam dan di luar ruangan
  • Bill yang awalnya menganggapnya tidak perlu dan sulit akhirnya meninjau ulang tingkat kesulitan implementasinya setelah melihat rambu bersudut membulat
  • Demo yang muncul keesokan harinya berjalan hampir secepat persegi panjang biasa, dan RoundRects kemudian menjadi elemen grafis penting dalam UI Macintosh

Permintaan yang Berawal dari Rutin Elips Cepat

  • Bill Atkinson biasanya bekerja dari rumah, tetapi ketika ada kemajuan berarti, ia akan bergegas ke Texaco Towers, tempat kantor Macintosh Apple berada, untuk memperlihatkannya
  • Tujuan kunjungan kali ini adalah mendemokan oval routines yang baru dibuat, dan pada saat itu QuickDraw masih disebut LisaGraf
  • Bill menambahkan kode yang menggambar lingkaran dan elips dengan sangat cepat, lalu memperlihatkan layar Lisa yang dipenuhi elips berukuran acak

Batasan 68000 dan Cara Perhitungannya

  • Menggambar lingkaran dengan cepat di Macintosh bukan hal mudah pada masa itu karena keterbatasan perangkat keras
    • Perhitungan lingkaran biasanya membutuhkan akar kuadrat
    • Prosesor 68000 pada Lisa dan Macintosh tidak mendukung operasi floating point
    • Perkalian dan pembagian pada 68000 juga tidak cepat
  • Bill menggunakan pendekatan yang hanya memakai penjumlahan dan pengurangan tanpa perkalian maupun pembagian
  • Intinya adalah sifat bahwa jumlah deret bilangan ganjil menghasilkan kuadrat sempurna berikutnya
    • Contoh: 1 + 3 = 4
    • Contoh: 1 + 3 + 5 = 9
    • Contoh: 1 + 3 + 5 + 7 = 16
  • Dengan memanfaatkan sifat ini, ia menjalankan loop sampai melewati ambang tertentu untuk menentukan kapan nilai koordinat dependen harus dinaikkan, dan QuickDraw pun bisa menggambar elips dengan sangat cepat

Permintaan Steve Jobs untuk Persegi Panjang Membulat

  • Ketika demo Bill berjalan jauh lebih cepat dari perkiraan, Steve Jobs bertanya apakah selain lingkaran dan elips, sistem juga bisa menggambar persegi panjang bersudut membulat
  • Bill menjawab bahwa ia tidak tahu cara mengimplementasikannya, itu akan sangat sulit, dan pada praktiknya juga tidak benar-benar dibutuhkan
  • Steve berkata, “persegi panjang bersudut membulat ada di mana-mana,” sambil langsung menunjuk contoh di dalam ruangan
    • papan tulis
    • beberapa meja kerja dan meja
  • Ia menambahkan bahwa di luar jendela pun, hampir ke mana pun melihat, ada lebih banyak contohnya

Contoh Dunia Nyata Mendorong Implementasi

  • Steve membujuk Bill berjalan sebentar mengelilingi blok, sambil menunjuk satu per satu persegi panjang bersudut membulat yang mencolok
  • Ketika keduanya melewati rambu larangan parkir dengan sudut membulat, Bill berubah pikiran
  • Bill pulang dan mulai mengerjakannya, sambil berkata ia akan memeriksa apakah ini benar-benar sesulit yang ia bayangkan

RoundRects Menjadi Elemen Dasar UI

  • Keesokan sore Bill kembali ke Texaco Towers dan memperlihatkan demo baru, dan persegi panjang bersudut membulat itu tergambar dengan indah dan sangat cepat
  • Kecepatannya hampir mendekati kecepatan menggambar persegi panjang biasa
  • Saat menambahkan kode itu ke LisaGraf, Bill memberi nama elemen grafis dasar baru tersebut RoundRects
  • Dalam beberapa bulan berikutnya, roundrects masuk ke berbagai bagian antarmuka pengguna dan segera menjadi elemen yang tak tergantikan

Bacaan terkait

1 komentar

 
GN⁺ 2024-06-25
Opini Hacker News

  • Windows memakai sudut membulat pada tombol sejak 1.0 sampai 3.11, lalu berubah menjadi sudut tajam sampai sebelum UI bertema di XP, sedikit membulat lagi di XP, kembali tajam di 8, lalu membulat lagi di 11
    https://user-images.githubusercontent.com/7389110/64139289-3...
    Meski begitu, saya masih lebih suka sudut tajam

    • Dari semua itu, Windows 2000 masih terlihat paling bagus. Kecuali fakta bahwa tidak ada antialiasing font
      Windows 10 juga cukup bagus, tetapi masalahnya adalah kekacauan ketika, terutama saat menjelajahi Settings, tiba-tiba muncul paradigma UI yang sama sekali berbeda dan terasa seperti masuk ke dunia tempat semuanya saling kusut
    • Sudut tajam itu berbahaya. Jendela seperti itu terasa seperti bisa membuat berdarah kalau tersenggol mouse secara tidak sengaja
      Anehnya, saya pernah menginap di hotel Asia Timur, mungkin tempat yang punya pengaruh Tibet, dan yang saya ingat semua sudut ruangannya membulat. Rasanya memang lebih baik dan nyaman. Di Barat, memanggil pengrajin untuk membulatkan semua sudut ruangan pasti sangat mahal; bisa saja memakai plester, tetapi mungkin sulit bertahan lebih dari 10 tahun dan sepertinya juga tidak menaikkan nilai jual kembali
    • Gambar itu benar-benar menunjukkan betapa banyak yang hilang saat kita beralih ke GUI datar, dan betapa pentingnya bayangan pada tombol
      Pada saat yang sama, saya juga jadi yakin bahwa saya benar-benar tidak peduli sedikit pun apakah sudutnya membulat atau tajam
    • Menarik melihat tema Windows selama bertahun-tahun. Secara pribadi, saya lebih suka UI yang terlihat seperti potongan titanium dan baja daripada palet warna datar RGBCMYK yang membosankan. Namanya saja Glass, dan memang ada niat untuk menyampaikan sifat material
      Developer bisa punya palet warna desain seperti Solarized, jadi saya tidak mengerti kenapa Microsoft memaksakan kehendaknya dan membuat semua orang tunduk pada warna biru mengerikan yang sama. Saya membenci warna biru itu karena jelas ada percakapan korporat seperti, “kuning terlalu seperti peringatan, oranye terlalu ambigu, merah terlalu marah, ungu terlalu mencolok. Biru aman”
    • Gambar yang sangat bagus. Menurut saya XP yang terbaik. Fakta bahwa warnanya kuning, bukan abu-abu, saja sudah membuat perbedaan besar
      Saya tidak suka widget modern yang tidak punya shading. Saya paham itu dimaksudkan agar terlihat modern, tetapi rasanya sangat malas
      Terlihat juga bahwa sejak Windows Vista/7, tombol tiba-tiba jadi kira-kira dua kali lebih besar dan ada margin serta padding di mana-mana. Ruang yang dibuang UI makin lama makin tidak masuk akal

  • Saya sudah menikmati cerita ini selama puluhan tahun, tetapi yang paling mencolok sekarang adalah fakta bahwa Bill Atkinson bekerja dari rumah saat membuat Macintosh

    • Kalau memakai LSD, bukankah rumah lebih baik daripada kantor?
      https://news.ycombinator.com/item?id=19238322
    • Kalau ingatan saya benar, ia mengerjakan tugas yang lebih kompleks di rumah agar tidak terganggu, dan tetap bekerja juga di kantor. Pembagian kerja yang sehat

  • Bukankah persegi membulat Apple sekarang adalah squircle?
    https://medium.com/minimal-notes/rounded-corners-in-the-appl...

  • Tulisan terkait:
    Round rectangles are everywhere - https://news.ycombinator.com/item?id=28679496 - September 2021, 26 komentar
    History of Rounded Corners - https://news.ycombinator.com/item?id=7062706 - Januari 2014, 1 komentar
    Steve Jobs and Rounded Corners - https://news.ycombinator.com/item?id=3096927 - Oktober 2011, 1 komentar
    The story of round rectangles - https://news.ycombinator.com/item?id=1636358 - Agustus 2010, 77 komentar

  • Betapa hebatnya selera Steve Jobs, dan betapa sungguh-sungguhnya ungkapan “seni liberal dan teknologi”, masih kurang diapresiasi

    • Saya setuju itu penting, tetapi tidak berpikir ia kurang diapresiasi. Justru ia sangat dihargai
    • Orang yang mungkin justru kurang diapresiasi adalah Bill Atkinson. Pada akhirnya ia terkenal karena meninggalkan semuanya, tetapi QuickDraw, MacPaint, dan HyperCard adalah tiga pencapaian beruntun yang luar biasa
    • Saya tidak yakin “kurang diapresiasi” adalah kata yang tepat di sini. Ia pada dasarnya dipuji sebagai salah satu visioner desain dan inovasi terbesar dalam sejarah industri teknologi
      Namun saya setuju bahwa setiap kali anekdot seperti ini muncul, saya kembali dibuat takjub. Di antara banyak narsisis yang menggerakkan dunia, saya rasa saya akan mengingatnya dengan paling baik
    • Chrisann Brennan, pacar sekaligus ibu dari anaknya, adalah seorang seniman. Semua itu ada di bukunya

  • Salah satu contoh persegi membulat yang ditambahkan murni karena alasan estetika adalah jendela desktop di Mac lama. Saat display menyala selama boot, tentu bentuknya persegi, tetapi salah satu hal pertama yang dilakukan software adalah membulatkan sudut-sudutnya, dan keadaan itu dipertahankan sampai software lain beralih ke mode layar penuh
    Windows tidak punya hal seperti itu, dan jelas itu hal yang “tidak berguna”, tetapi saya menyukai detail tersebut

  • Bagian yang mengatakan, “Selama beberapa bulan berikutnya, persegi membulat meresap ke berbagai bagian antarmuka pengguna, dan segera menjadi sesuatu yang tak terpisahkan,” pada akhirnya menunjukkan bahwa itu juga hanyalah tren seperti desain lainnya. Lalu beralih ke sudut tajam dan desain datar, kemudian kembali lagi ke sudut membulat, lalu kembali lagi ke bentuk bersudut, dan kembali lagi
    Saya bisa melihat siklus neraka ini terjadi di depan mata. Sekitar setahun lalu pun, seseorang di Chrome punya ide brilian seperti yang sering terjadi di perusahaan besar: “mari segarkan desainnya,” dan tiba-tiba tab menjadi membulat serta muncul sudut-sudut membulat kecil di sekitar bilah navigasi

    • Sudut membulat sebenarnya merupakan elemen yang cukup penting dari sisi aksesibilitas, dan merupakan perangkat Gestalt yang kuat dalam desain. Radius tepi persegi membulat membantu membedakan batas elemen serta bagian dalam/luarnya secara sekilas
      Sudut membulat yang diselaraskan seperti lingkaran konsentris juga dapat menyampaikan hubungan induk-anak secara jelas dari sisi Gestalt
    • Dalam desain web modern, rasanya satu-satunya hal yang tidak berubah adalah margin dan padding yang terus bertambah. Sisanya semua berputar dalam siklus
      Ketika Google membuat sudut persegi menjadi sepenuhnya membulat pun, mereka juga menambah margin dan padding. Jika desain bertekstur kembali populer, saat itu pun saya rasa margin dan padding akan makin bertambah

  • Peretasan ROM Mac OS untuk membuat jendela yang sepenuhnya berbentuk lingkaran: https://web.archive.org/web/20201209143138/https://macgui.co...

    • Di sini, yang disebut “peretasan” bukanlah bagian menggambar jendela membulat. Itu hanya membuat bentuk jendela baru dengan API sistem operasi
      Peretasannya adalah bagian menyuntikkan kode itu ke Finder. Salah satu caranya adalah menyimpan WDEF di dalam file Desktop pada floppy disk, dan cukup dengan memasukkan floppy itu, bentuk jendela baru bisa diubah
      Finder membuka dan terus mempertahankan resource fork file itu untuk mendapatkan informasi file pada floppy. Saat jendela dibuka, Finder meminta “WDEF #0” kepada Resource Manager, dan Resource Manager menemukannya di dalam file Desktop—lebih tepatnya WDEF yang berpura-pura sebagai itu. Membuat Trojan horse di OS tersebut tidak terlalu sulit

  • Saat ini saya sedang belajar merancang model untuk 3D printing, dan sudut membulat adalah soal kebutuhan sama seperti soal estetika. Benda dengan sudut tajam tidak nyaman digenggam, dan tergantung bahannya juga bisa berisiko melukai. Juga tidak higienis dan sulit dibersihkan dari debu
    Sebaliknya, matematika untuk menghasilkan sudut membulat pada bentuk arbitrer itu berantakan, sering kali membutuhkan penyangga saat dicetak, lalu setelahnya perlu post-processing untuk melepas penyangga dan menghaluskan kurva dengan amplas

  • Saya penasaran mengapa Bill berkata, “Tidak, tidak ada cara untuk melakukan itu. Sebenarnya itu akan sangat sulit.” Mengapa menerapkan optimasi elips miliknya pada seperempat lingkaran bukan hal sepele?

    • Saya juga pernah menanyakan hal yang sama beberapa tahun lalu
      Kemungkinan besar ia berpikir untuk memodelkan persegi membulat sebagai satu persamaan matematika. https://news.ycombinator.com/item?id=15073696
      Itu mungkin mustahil, karena persegi membulat tidak kontinu. Namun, pendekatan itu juga sama sekali tidak diperlukan, karena potongan seperempat lingkaran dan potongan garis lurus bisa ditangani secara terpisah
    • Seperti yang ditulis Andy, Bill sedang melakukan demonstrasi yang sangat mengesankan, dan mungkin agak kesal karena Steve tidak benar-benar mengakuinya
      Selain itu, pertanyaan itu muncul tiba-tiba, dan secara harfiah itu adalah sesuatu yang belum pernah dilakukan siapa pun sebelumnya
    • Melihat orang-orang yang sepenuhnya kompeten bertindak seperti ini di sekitar Jobs membantu memahami mengapa ia menjadi orang seperti itu
    • Dalam kasus yang paling umum, kemungkinan bahkan itu pun tidak diperlukan. Besar kemungkinan mereka menyimpan mask untuk membulatkan sudut secara hard-coded, dan itu pasti jauh lebih cepat