Visualizing how x/y bezier curve values change
Say we want to graph how the y-value (output) changes with respect to the bezier curve parameter, t. For example, we want to see how the y-value changes when the y control points are 0 and 1. This should look like:
The formula for the cubic bezier is as follows:
B(t) = (1 - t)3P0 + 3(1 - t)2tP1 + 3(1 - t)t2P2 + t3P3
Substituting P1 = 0 and P2 = 1 into the above equation (P0 = 0 and P3 = 1 are implied), we end up with:
y(t) = 3t2 - 2t3
But with an <svg> we do not have a way of plotting this function as-is. It turns out that we can actually plot it using a bezier curve. This can be done by having a curve where the output follows the y value, and the spacing of the points is linear. As a result, the curve drawn will follow y(t).
When using the control points 1/3 and 2/3, the resulting function will be linear. To see this, we can start with the formula, and substitute in P0 = 0 and P3 = 1, we get:
B(t) = 3(1 - t)2tP1 + 3(1 - t)t2P2 + t3
Expanding things out:
B(t) = (3t - 6t2 + 3t3) * P1 + (3t2 - 3t3) * P2 + t3
And then putting in P1 = 1/3 and P2 = 2/3:
B(t) = (t - 2t2 + t3) + (2t2 - 2t3) + t3
And once we remove the terms that cancel out, we are left with:
B(t) = t
We can now use this linear function for our X control points, and use the original x/y control points as the y control points. So we can construct an SVG path using a bezier curve that follows the y-value/x-value for the given control points with something like:
<path d="M 0 0 C 0.3333 P1, 0.6666 P2, 1 1" />