My road applet on this page[1] no longer works on my computer, so I decided to build something in svg. This is a quick & dirty afternoon project.
The idea is that roads in a game like Transport Tycoon or SimCity should be drawn from the edge of a grid tile to another edge. Edges could be either horizontal or vertical. The resulting curve will depend both on orientation of the edges and on the grid distance between them. The original applet was interactive and let you draw out your own curves. This project is mainly for me, so I instead drew them all (see Ladder of Abstraction[2]) to get a sense of what the family of curves looks like.
Bezier curves
Note that some are pretty stretchy, with tight curves at the endpoints. Not pleasant. Maybe in a game you’d disallow certain awkward shapes.
Biarcs
I like circular arcs as an alternative to bezier curves. Here’s the article explaining why[3]. In general we need up to two arcs to represent a curved road segment.
In the grid setting, the “C-shaped” asymmetric biarcs contain straight lines plus 90° arcs. The “S-shaped” symmetric biarcs contain two arcs that are equal in size and shape, but mirrored around a center point. Many but not all of these could be expressed in a simpler form as arc-line-arc, where both arcs are 90°. This suggests that a set of tiles that build only 90° arcs could be used to build all the other combinations. Some of these S-shaped biarcs exceed the expected bounding box; using arc-line-arc would solve that too.
Am I going to do anything with this? I don’t know. Games like Locomotion and P1Sim have tiles for curved roads and tracks, and I might want to do the same in some future project. I’m also curious how this extends to hexagons. That’s for another day; this was just a quick afternoon project.