Procedurally generating a rounded box mesh
If you haven’t heard the story about Steve Jobs, Bill Atkinson, and rounded corners, it’s a fun read. A big takeaway is that rounded corners are everywhere. Let’s take a look at procedurally generating a rounded box mesh.
First we’ll define the faces of our box. We’ll define a corner for each face (the start), then two vectors representing up and right that we can use to traverse the face and fill it with polygons:
We’ll define the dimensions of our faces such that they compose a box of unit length on each axis and centered at the origin. Later, we’ll scale these so that we can create a box of arbitrary size.
Now that we have our face definitions, let’s turn them into a mesh that we can render. We’ll write a function that takes a face definition, a width and height, and the number of steps to take across the face in both directions. The return value will be a list of vertices representing the triangles composing the face.
Alright, now for the fun part - making our box round. To keep things easy to conceptualize and visualize, let’s consider the 2D case first. Here’s how I think about it: Imagine you have a rectangle. Put a circle in it. Slide the circle around in the rectangle and note what happens at the corners and edges when the circle impacts the sides. At the edges, the circle can butt up against the side of the rectangle without issue. At the corners, however, the circle gets stuck and is prevented from filling the corners entirely. Conveniently, the arc the circle traces in the corner is precisely what we want to use for our rounded box!
