Roads

I originally planned to use quadratic Bezier curves to represent roads, since that’s what Flash has built in. However, the experiments I did on this project later led to [this tutorial on curved road representation](http://www.redblobgames.com/articles/curved-paths/), where I found that circular arcs were a better representation. If I resume this project, I will use circular arcs.

This demo shows what roads might look like, and also shows a quadratic bezier curve approximating a circular arc. When the arc angle is less than 1/6th of the circle, the bezier curve seems to be a reasonable approximation, but I may still have to subdivide it to make it match an arc.

On the left the road is represented by two Bezier curves. On the right the road is represented by straight segments and a circular arc joining them. (Note: I’m drawing the arc using the Bezier approximation, which isn’t good if the angle is sharp.) The arcs not only look better, the construction naturally joins segments together; the Bezier curves don’t automatically meet. Before making the demo I had expected the most natural drag handle to be the center of the circle, but while playing around you’ll see that it can go off screen. Instead, the best drag handles are going to be the small yellow dots on the road itself, showing where the transition from straight line to arc occurs.

Demo

(Note: github no longer allows me to embed the demo on the wiki page)