4 ms·

Round rectangles are everywhere (1981)

74 points by omarfarooq 5y ago

dang 5y ago
Related ongoing thread: Procedurally generating a rounded box mesh - https://news.ycombinator.com/item?id=28677064 https://news.ycombinator.com/item?id=28677064 - Sept 2021 (21 comments, particularly https://news.ycombinator.com/item?id=28677781 https://news.ycombinator.com/item?id=28677781) Past submissions of the folklore.org article: History of Rounded Corners - https://news.ycombinator.com/item?id=7062706 https://news.ycombinator.com/item?id=7062706 - Jan 2014 (1 comment) Steve Jobs and Rounded Corners - https://news.ycombinator.com/item?id=3096927 https://news.ycombinator.com/item?id=3096927 - Oct 2011 (1 comment) The story of round rectangles - https://news.ycombinator.com/item?id=1636358 https://news.ycombinator.com/item?id=1636358 - Aug 2010 (77 comments)
spoonjim 5y ago
I don’t think the Valley will ever see a PM/product marketer as great as Jobs.
- hnlmorg 5y ago
  Infamous maybe.
- deleted 5y ago
  [deleted]
potiuper 5y ago
Article & Source Code: http://wg20.criticalcodestudies.com/index.php?p=/discussion/80/code-critique-roundrects-apple-quickdraw-source-code http://wg20.criticalcodestudies.com/index.php?p=/discussion/...
ThePhysicist 5y ago
Windows 11 just re-introduced rounded rectangles for window borders, and I kind of like it. Also seems we're leaving flat surfaces behind for something more skeuomorphic again.
- ehnto 5y ago
  I started writing a comment akin to "fads recycle" but then I got to thinking, the past decade or more has seen UI fads come and go blazingly fast because of how quickly the web moved, which is probably why I think this is just another loop around the cycle. But in OS land, specifically in Windows land, this is actually a pretty big step in a product with few refactor opportunities. Win doesn't have the luxury of changing the UI every 6 months like websites/apps do, and so they're placing a pretty big bet on this UI being a reasonably long lived product. I wonder how much that influences their willingness to chase trends.
  - hnlmorg 5y ago
    Microsoft change UIs more frequently than any other OS. Take the last ~20 years of NT: - 2000 (looked a bit like 9x but with a little bit of polish) - XP (massive bold colours and chunky themes) - Vista (transparency and rounded edges galore) - 7 (a lot like Vista but refined a little so feels less like a toy) - 8 (another massive redesign. Now everything looks like Windows 1.0 in HD) - 10 (a lot like 8 but refined so feels less like a toy) In that 20 years we've seen 4 completely unique UIs with another 2 relatively significant updates too. That's an average of a complete redesign every 5 years! Compare that to the Mac where OSX/macOS has had a few relatively significant updates but nothing as grand as any of the 4 overhauls that Windows has had. Likewise with KDE. In 20 years we've had the release of KDE 3, 4 and 5. 4 and 5 are visually very similar. KDE 3 differs quite a bit from 4 but still nothing as contrasting as Windows 7 to 8. Same is true for GNOME and other Linux desktop environments too.
    - hobs 5y ago
      I would just note that a completely unique UI/complete redesign is saying a lot when I still have to use control panel items that have been around since I used Windows XP.
      - hnlmorg 5y ago
        A lot of the control panel items date further back than that :)
bryanrasmussen 5y ago
this made me think, what's the math for a rounded rectangle then https://math.stackexchange.com/questions/1649714/whats-the-equation-for-a-rectircle-perfect-rounded-corner-rectangle-without-s https://math.stackexchange.com/questions/1649714/whats-the-e...
- andi999 5y ago
  Interesting read. The stackexchange is about rounded rectangle, but I think the article is about rectangles with rounded corners (which is different and easier to implement).
jmiskovic 5y ago
I recently got tip on a 3D version of round rectangles, called octasphere: https://prideout.net/blog/octasphere/ https://prideout.net/blog/octasphere/ It's not a direct-to-screen rendering technique like the article, rather a way to procedurally construct the 3D mesh based on few parameters (W,H,D, radius, # of subdivisions). Just like rectangles in 2D, boxes in 3D are too simple and have harsh sharp edges. Adding rounded edges makes them nicer to look at. Additionally, the octasphere method gives you capsules and spheres and everything in-between. Edit: Oh look - there's a front page article that talks about this in-depth: https://wwwtyro.net/2021/09/24/rounded-box.html https://wwwtyro.net/2021/09/24/rounded-box.html
bonzini 5y ago
I am curious why the rounded rectangle would be hard to draw. The circle primitive is already going to exploit symmetry and draw four (or eight) symmetric points at a time, computing them centered at (0,0) and shifting them to the center of the circle. Why would it be hard to shift those four pixels by four different centers (the four corners of the rectangle plus/minus the radius)? Filling them would not be any harder, either, and drawing thick lines would be harder but---again---just as hard as drawing a circle with thick lines.
- Someone 5y ago
  To draw a rounded rect, you don’t want to draw four lines and four quarter circles. That will run into problems if you want to use transfer modes such as XOR, fill with a pattern (phases of the patterns won’t match), etc. On the Mac, you also needed to do clipping against arbitrary regions (https://www.folklore.org/StoryView.py?project=Macintosh&story=I_Still_Remember_Regions.txt https://www.folklore.org/StoryView.py?project=Macintosh&stor...). Doing that at reasonable speed wasn’t easy at the time. I didn’t check the source (https://computerhistory.org/blog/macpaint-and-quickdraw-source-code/ https://computerhistory.org/blog/macpaint-and-quickdraw-sour...) but I guess the drawing routines created scanlines top-to-bottom (that’s how regions worked on the Mac), and Bill tweaked a copy of the oval drawing code to insert extra pixels in each line and extra identical lines for the straight vertical parts.
  - bonzini 5y ago
    Yes, you'd do it in a single routine to not mess up patterns etc., but the math to find the start and end for each scanline is the same as for Bresenham-style ovals.
- Jyaif 5y ago
  You don't write a routine that draws circles and then think that rounded rectangles are going to be hard, that's just not going to happen. Either this part of the story is made up, or Bill Atkinson was playing mind games with Steve Jobs.
  - 5y ago
guzik 5y ago
It is amazing that in those days, interface design belonged more to R&D departments (having people from academia) than marketing and design. For example, professors, PHDs and their students (Jef Raskin, Bill Atkinson) worked on Macintosh design. Similarly at Xerox Park.
- shrimpx 5y ago
  Given the limited capabilities of that hardware, it probably would have been a waste to have non-technical design teams coming up with unimplementable ideas.
bjarneh 5y ago
Very interesting story. All the stories about Jobs it seems he got more "intense" if he didn't get his way.
- Lio 5y ago
  From stories I've heard, Clive Sinclair also had a very "intense" personality. Something about the early computer industry is it's tolerance of rough, lumpy personalities. Not sure exactly how to express this but I hope we don't totally loose that sort of space as the industry matures. These personalities are both difficult to work with but also very interesting.

74 points by omarfarooq 5y ago

dang 5y ago

Related ongoing thread: Procedurally generating a rounded box mesh - https://news.ycombinator.com/item?id=28677064 https://news.ycombinator.com/item?id=28677064 - Sept 2021 (21 comments, particularly https://news.ycombinator.com/item?id=28677781 https://news.ycombinator.com/item?id=28677781) Past submissions of the folklore.org article: History of Rounded Corners - https://news.ycombinator.com/item?id=7062706 https://news.ycombinator.com/item?id=7062706 - Jan 2014 (1 comment) Steve Jobs and Rounded Corners - https://news.ycombinator.com/item?id=3096927 https://news.ycombinator.com/item?id=3096927 - Oct 2011 (1 comment) The story of round rectangles - https://news.ycombinator.com/item?id=1636358 https://news.ycombinator.com/item?id=1636358 - Aug 2010 (77 comments)

spoonjim 5y ago

I don’t think the Valley will ever see a PM/product marketer as great as Jobs.

hnlmorg 5y ago
Infamous maybe.
deleted 5y ago
[deleted]

potiuper 5y ago

Article & Source Code: http://wg20.criticalcodestudies.com/index.php?p=/discussion/80/code-critique-roundrects-apple-quickdraw-source-code http://wg20.criticalcodestudies.com/index.php?p=/discussion/...

ThePhysicist 5y ago

Windows 11 just re-introduced rounded rectangles for window borders, and I kind of like it. Also seems we're leaving flat surfaces behind for something more skeuomorphic again.

ehnto 5y ago
I started writing a comment akin to "fads recycle" but then I got to thinking, the past decade or more has seen UI fads come and go blazingly fast because of how quickly the web moved, which is probably why I think this is just another loop around the cycle. But in OS land, specifically in Windows land, this is actually a pretty big step in a product with few refactor opportunities. Win doesn't have the luxury of changing the UI every 6 months like websites/apps do, and so they're placing a pretty big bet on this UI being a reasonably long lived product. I wonder how much that influences their willingness to chase trends.
- hnlmorg 5y ago
  Microsoft change UIs more frequently than any other OS. Take the last ~20 years of NT: - 2000 (looked a bit like 9x but with a little bit of polish) - XP (massive bold colours and chunky themes) - Vista (transparency and rounded edges galore) - 7 (a lot like Vista but refined a little so feels less like a toy) - 8 (another massive redesign. Now everything looks like Windows 1.0 in HD) - 10 (a lot like 8 but refined so feels less like a toy) In that 20 years we've seen 4 completely unique UIs with another 2 relatively significant updates too. That's an average of a complete redesign every 5 years! Compare that to the Mac where OSX/macOS has had a few relatively significant updates but nothing as grand as any of the 4 overhauls that Windows has had. Likewise with KDE. In 20 years we've had the release of KDE 3, 4 and 5. 4 and 5 are visually very similar. KDE 3 differs quite a bit from 4 but still nothing as contrasting as Windows 7 to 8. Same is true for GNOME and other Linux desktop environments too.
  - hobs 5y ago
    I would just note that a completely unique UI/complete redesign is saying a lot when I still have to use control panel items that have been around since I used Windows XP.
    - hnlmorg 5y ago
      A lot of the control panel items date further back than that :)

bryanrasmussen 5y ago

this made me think, what's the math for a rounded rectangle then https://math.stackexchange.com/questions/1649714/whats-the-equation-for-a-rectircle-perfect-rounded-corner-rectangle-without-s https://math.stackexchange.com/questions/1649714/whats-the-e...

andi999 5y ago
Interesting read. The stackexchange is about rounded rectangle, but I think the article is about rectangles with rounded corners (which is different and easier to implement).

jmiskovic 5y ago

I recently got tip on a 3D version of round rectangles, called octasphere: https://prideout.net/blog/octasphere/ https://prideout.net/blog/octasphere/ It's not a direct-to-screen rendering technique like the article, rather a way to procedurally construct the 3D mesh based on few parameters (W,H,D, radius, # of subdivisions). Just like rectangles in 2D, boxes in 3D are too simple and have harsh sharp edges. Adding rounded edges makes them nicer to look at. Additionally, the octasphere method gives you capsules and spheres and everything in-between. Edit: Oh look - there's a front page article that talks about this in-depth: https://wwwtyro.net/2021/09/24/rounded-box.html https://wwwtyro.net/2021/09/24/rounded-box.html

bonzini 5y ago

I am curious why the rounded rectangle would be hard to draw. The circle primitive is already going to exploit symmetry and draw four (or eight) symmetric points at a time, computing them centered at (0,0) and shifting them to the center of the circle. Why would it be hard to shift those four pixels by four different centers (the four corners of the rectangle plus/minus the radius)? Filling them would not be any harder, either, and drawing thick lines would be harder but---again---just as hard as drawing a circle with thick lines.

Someone 5y ago
To draw a rounded rect, you don’t want to draw four lines and four quarter circles. That will run into problems if you want to use transfer modes such as XOR, fill with a pattern (phases of the patterns won’t match), etc. On the Mac, you also needed to do clipping against arbitrary regions (https://www.folklore.org/StoryView.py?project=Macintosh&story=I_Still_Remember_Regions.txt https://www.folklore.org/StoryView.py?project=Macintosh&stor...). Doing that at reasonable speed wasn’t easy at the time. I didn’t check the source (https://computerhistory.org/blog/macpaint-and-quickdraw-source-code/ https://computerhistory.org/blog/macpaint-and-quickdraw-sour...) but I guess the drawing routines created scanlines top-to-bottom (that’s how regions worked on the Mac), and Bill tweaked a copy of the oval drawing code to insert extra pixels in each line and extra identical lines for the straight vertical parts.
- bonzini 5y ago
  Yes, you'd do it in a single routine to not mess up patterns etc., but the math to find the start and end for each scanline is the same as for Bresenham-style ovals.
Jyaif 5y ago
You don't write a routine that draws circles and then think that rounded rectangles are going to be hard, that's just not going to happen. Either this part of the story is made up, or Bill Atkinson was playing mind games with Steve Jobs.
- 5y ago

guzik 5y ago

It is amazing that in those days, interface design belonged more to R&D departments (having people from academia) than marketing and design. For example, professors, PHDs and their students (Jef Raskin, Bill Atkinson) worked on Macintosh design. Similarly at Xerox Park.

shrimpx 5y ago
Given the limited capabilities of that hardware, it probably would have been a waste to have non-technical design teams coming up with unimplementable ideas.

bjarneh 5y ago

Very interesting story. All the stories about Jobs it seems he got more "intense" if he didn't get his way.

Lio 5y ago
From stories I've heard, Clive Sinclair also had a very "intense" personality. Something about the early computer industry is it's tolerance of rough, lumpy personalities. Not sure exactly how to express this but I hope we don't totally loose that sort of space as the industry matures. These personalities are both difficult to work with but also very interesting.