md`--- ## More math #### ¹Bezier curve control points The default easing function in CSS is a cubic Bezier — it has four control points — and in D3 it's a 3^rd degree polynomial. Restricting this discussion to cubic functions made it easier to implement interactivity in this notebook. However, Bezier curves with fewer or more control points can also be converted to polynomials. I think an ${tex`n^{th}`} degree curve will always have ${tex`n+1`} control points but I'm sure with why. #### ²Converting from control points to a Cartesian equation D3 defines its default cubic functions, \`d3.easePolyIn\` and \`d3.easePolyOut\`, with these equations: ${tex` f(t)_{t\leq0.5} = t^3 \newline f(t)_{t>0.5} = 1 - (1 - t)^3 = t^3 - 3t^2 + 3t `}
Getting from the four control points of a cubic Bezier curve (what CSS uses) to a cubic polynomial function (what D3 uses) involves first representing the Bezier curve as a set of parametric equations. [Javascript.info](https://javascript.info/bezier-curve) gives this version: ${tex` P = (1−t)^3P_1 + 3(1−t)^2tP_2 +3(1−t)t^2P_3 + t^3P_4 \newline `}
where each ${tex`P`} represents the ${tex`(x, y)`} pair of a control point. To make it easier to turn this into a 3^rd degree polynomial, I expanded it and got: ${tex` f(t) = (P_4 - 3P_3 + 3P_2 - P_1)t^3 + (3P_3 - 6P_2 + 3P_1)t^2 + (3P_2 - 3P_1)t + P_1 `}
This is actually two parametric equations: ${tex` x(t) = (x_4 - 3x_3 + 3x_2 - x_1)t^3 + (3x_3 - 6x_2 + 3x_1)t^2 + (3x_2 - 3x_1)t + x_1 \newline y(t) = (y_4 - 3y_3 + 3y_2 - y_1)t^3 + (3y_3 - 6y_2 + 3y_1)t^2 + (3y_2 - 3y_1)t + y_1 `}
To convert this to Cartesian form, I *think* we can set ${tex`x(t) = t`}, then substitute in the control points for their ${tex`y_n`} values, then use ${tex`y(t)`}, but I admit I am fuzzy on this step. ##### What about polynomial to Bezier? You could run this process in reverse by taking a polynomial function in the form: ${tex` f(t) = at^3 + bt^2 + ct + d `}
then setting up and solving a system of linear equations for ${tex`x(t)`} and ${tex`y(t)`} to get your control points: ${tex` a = P_4 - 3P_3 + 3P_2 - P_1\newline\newline b = 3P_3 - 6P_2 + 3P_1\newline c = 3P_2 - 3P_1\newline d = P_1\newline `}
##### Pascal's Triangle You may remember Pascal's Triangle from high school precalculus. The pattern shows up repeatedly in these functions, and could be useful for translating to other-degree Bezier curves or polynomials: ${tex`\newline \:\:\:\:\:\:\:\:1\newline \:\:\:\:\:\:1\:\:1\newline \:\:\:\:1\:\:2\:\:1\newline \:\:1\:\:3\:\:3\:\:1\newline 1\:\:4\:\:6\:\:4\:\:1\newline `} #### ³D3 easing is piecewise The default easing function in D3 is defined piecewise: one function for ${tex`t\leq0.5`} and another for ${tex`t>0.5`}. This means that we need to do some transformation in order to make the two equations run in sequence for ${tex`0 \leq t \leq 1`}. The approach implemented in the [D3 source code](https://github.com/d3/d3-ease/blob/master/src/poly.js#L31) is to scale the transition to ${tex`0 \leq t \leq 2`} and divide each function by two. For the second half of the piecewise function, we also translate the function by 1 in the X and Y dimensions. If we call these transformed functions ${tex`y'`}, we can represent them as: ${tex` y_{t\leq0.5}=f(t) \newline y_{t\leq0.5}'=f(t) / 2 \newline y_{t>0.5}=g(t) \newline y_{t>0.5}'=(g(t - 1) + 1)/2 \newline `} `