### Rounded Corners and Squircles

October 13, 2011 When I was still doing experiments that required specialized hardware, I would enlist the services of our able machinists in their fully equipped machine shop. I would proudly show them my skillfully crafted CAD drawings, at which they were too polite to laugh, and they would ask me questions about the many details that I had left out. One question they would often ask is whether they should chamfer the edges. A chamfer is a beveled or rounded edge. The expression, "Nature abhors a vacuum," may be the paramount universal principle, but "Nature doesn't like hard edges or sharp corners," may be a close second. My son, unlike his amateur programming father, is an actual computer professional. He pointed out an interesting Steve Jobs story in his blog. Steve was a firm believer in the no-sharp-corners principle.[1] Bill Atkinson programmed QuickDraw, which was part of the Macintosh graphical user interface. The Motorola 68000 processor in the Macintosh was, as all microprocessors of the era, quite slow. There were, of course, no hardware floating-point operations, and integer multiplication and divisions were slow. Bill had devised a way to draw ovals that eschewed all the fancy math and used just additions and subtractions. As explained in Ref. 1, Bill used the fact that the sum of a sequence of odd numbers starting at one always equals a square; for example, 1 + 3 + 5 + 9 + 11 = 36. In general, Steve, who was known to be a demanding character, was not that impressed. What Steve wanted was rectangles with rounded corners, and he quickly pointed out many examples in their office and outside environments. Bill went back to his development station, and in just a few hours he devised an algorithm that drew rectangles with rounded corners that was almost as fast as his ovals algorithm.*Steve Jobs and Bill Gates at 'D5: All Things Digital' conference in Carlsbad, California, 2007.(Photo by Joi Ito, via Wikimedia Commons))*

Descartes would be proud of the extent that we've extended his concept of the graphical representation of algebraic equations in two dimensions to make our graphical user interfaces. Something like a rounded rectangle is one example of a superellipse poetically called a squircle. A squircle is an object that has qualities of both a square and a circle. The general equation for a superellipse, as shown below, was devised by the French mathematician, Gabriel Lamé, who is well known to mechanical engineers because of the Lamé parameters in elasticity. Lamé's second parameter is better known as the shear modulus. This equation generates a wide variety of closed curves, including the ordinary ellipse for n = 2. The ellipse, of course, becomes a circle when a = b. Other parameters will generate shapes that closely approximate a rectangle with rounded corners. For example, for a unit squircle, the parameters

**a**and

**b**are one, and the degree of "squareness" is set by the exponent,

**n**. Large values of n give you shapes that look more like a square.

*Squircles for n=4 (blue) and n=16 (red)*

Squircles will give you rectangles with rounded corners, but they're too computationally intensive for most purposes. I don't know how Bill Atkinson programmed rounded corners for QuickDraw, but I decided this would be an interesting programming exercise. Whenever an electrical engineer wants to smooth something, he puts it through a low pass filter. I decided to take this approach and feed a rectangle's corner multiple times through a simple low pass filter. You can see the result in the figure. The low pass filter was just,

xand the corner was passed through this filter five time. More rounding can be achieved with a larger number of passes through the filter. The actual effect will depend on the granularity of the input data points. This process is most likely not original with me, but how would I know? I'm just a computer amateur._{i}= 0.0625x_{i-2}+ 0.0125x_{i-1}+ 0.625x_{i}+ 0.125x_{i+1}+ 0.0625x_{i+2}

y_{i}= 0.0625y_{i-2}+ 0.0125y_{i-1}+ 0.625y_{i}+ 0.125y_{i+1}+ 0.0625y_{i+2}

*Rounded corner obtained by passing a rectangle's data points through a low pass filter.Graph via Gnumeric using data from a C program by the author.(C program source code))*

### Reference:

*Permanent Link to this article*

Linked Keywords: Experiment; machinist; CAD drawing; chamfer; Nature abhors a vacuum; amateur; Steve Jobs; Bill Atkinson; QuickDraw; Macintosh<; graphical user interface; Motorola 68000 processor; microprocessor; hardware floating-point operations; sequence; rectangle; algorithm; Joi Ito; Wikimedia Commons; Descartes; graphical representation of algebraic equations in two dimensions; superellipse; squircle; square; circle; equation; French; mathematician; Gabriel Lamé; Lamé parameters; elasticity; shear modulus; ellipse; electrical engineer; low pass filter; granularity; Gnumeric; C program source code.

### Google Search

Free Downloads:

STEM artwork

for your holiday gifts

Latest Books by Dev Gualtieri

Thanks to Cory Doctorow of BoingBoing for his favorable review of Secret Codes!

Other Books

- Ultra-pure Green Light - November 20, 2017

- High Energy Cosmic Rays - November 13, 2017

- Advanced Aluminum Alloys - November 6, 2017

- Joseph Polchinski - October 30, 2017

- Our Magnetic Universe - October 23, 2017

- Cavitation - October 16, 2017

- Pell Numbers - October 9, 2017

- Miniature Antennas - October 2, 2017

- Fizzy Graphene - September 25, 2017

- The First Angiosperm - September 18, 2017

- Noise Thermometry and the Boltzmann Constant - September 11, 2017

- Walking in the Rain - September 4, 2017

- Agitated Atoms - August 28, 2017

- Partial Solar Eclipse at New Jersey - August 24, 2017

- Magnetocapacitive Tunnel Junctions - August 21, 2017

- Tardigrades - August 14, 2017

- Roman Concrete - August 7, 2017

- Solar Spicules - July 31, 2017

- Schroeder Diffuser - July 24, 2017

- Rough Microparticles - July 17, 2017

- Robot Musicians - July 10, 2017

- Walter Noll (1925-2017) - July 6, 2017

- cosmogony - July 3, 2017

- Crystal Prototypes - June 29, 2017

- Voice Synthesis - June 26, 2017

- Refining Germanium - June 22, 2017

- Granular Capillarity - June 19, 2017

- Kirchhoff–Plateau Problem - June 15, 2017

- Self-Assembly - June 12, 2017

- Physics, Math, and Sociology - June 8, 2017

- Graphene from Ethylene - June 5, 2017

- Crystal Alignment Forces - June 1, 2017

- Martian Brickwork - May 29, 2017

- Carbon Nanotube Textile - May 25, 2017

- The Scent of Books - May 22, 2017

- Patterns from Randomness - May 18, 2017

- Terpene - May 15, 2017

- The Physics of Inequality - May 11, 2017

- Asteroid 2015 BZ509 - May 8, 2017

- Fuzzy Fibers - May 4, 2017

- The Sofa Problem - May 1, 2017

### Deep Archive

Deep Archive 2006-2008

**Blog Article Directory on a Single Page**