I’m not going to go over the mathemathics of what a Bézier curve is, there’s plenty of resources explaining that online including a lengthgy Wikipedia page that can be found here. Main thing you need to know is that there’s multiple types of Bézier curves, differentiated by the equations that give them.
For our needs we will use the Cubic Bézier curve, connecting them end to start to form a spline which we will later use as our road’s path.
The cubic curve
The cubic curve requires two anchors and two control points to define. Let’s call the anchor points Start and End and the control points SC (StartControl) and EC (EndControl). The positions of these points relative to one another define the curve’s path.
Moving the control points will result in a different curve between the same two anchor points. This exactly what we want, we need to be able to change the curve between the points without moving the anchors at all.
Now that we’ve been over what a single curve looks like let’s take a look at a spline.
Making a spline
For my purposes I only need open splines (no loops) and as such I won’t cover how to deal with closed splines but this content should put you in a better position to approach that issue if you wish to.
Besed on the image above a few things should become apparent:
First, S2 = E1. The end of the previous curve has to be the start of the current one to generate a continous spline.
Second, the start control of the current curve needs to be on the same line as the end control of the previous one and the start anchor. Failing to do this would result in a break in the curve at point S2.
Third, the distance between the current curve’s start control and the start anchor and the distance between the previous curve’s end control and end anchor needs to be the same. Not doing this means that the curve wouldn’t be centered on the anchor point and in extreme situations (control points very close to anchor) the spline will look broken.
Fourth, the distance between the control point and its related anchor point gives the “radius” of the curve around that point.
So let’s rename everything to make it easier.
Anchors are the points that our spline will definetly go through. They’re marked in red (A1, A2 and A3).
The control points define the spline between the anchor points. They’re marked in blue (A1C, A2C, A3C). You’ll notice that I haven’t included the A2C’ (prime) point. That is because that point, whilst stored and influencing the spline, will always be calculated based on the position of A2C relative to A2 in order to make sure the spline is fluid around A2.
Further notes
The actual formula that will evaluate the cubic Bézier path between two points A(x0, y0), and B(x3, y3) with control points AC(x1, y1) and BC(x2, y2) is this:
\begin{aligned} & 0 \leq t \leq 1, t \isin R \text{ → t goes from 0 (Anchor) to 1 (Next Anchor)} \\ & x(t) = (1-t)^3 x_0 + 3t(1-t)^2 x_1 + 3t^2(1-t) x_2 + t^3 x_3 \text{ → X-Axis coordinate} \\ & y(t) = (1-t)^3 y_0 + 3t(1-t)^2 y_1 + 3t^2(1-t) y_2 + t^3 y_3 \text{ → Y-Axis coordinate} \\ & \mathbf{P}(t) = (x(t), y(t)) \text{ → Point on the curve at t along it} \end{aligned}If you want to play around some more with these you can use this calculator. It has the 3 Anchor points and 4 Control points already plugged in plus the Bézier Curve evaluator. You can drag the points around to see how that affects the curve.