StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If I understand correctly, you are trying to determine the position and slope (tangent to the curve) of the Bezier, at every point.</p> <p>Let's assume that your start point is (ax, ay), the end point is (dx, dy) and your control points are (bx, by) and (cx, cy).</p> <p>Position is easy. First, compute the blending functions. These control the "effect" of your control points on the curve.</p> <pre><code>B0_t = (1-t)^3 B1_t = 3 * t * (1-t)^2 B2_t = 3 * t^2 * (1-t) B3_t = t^3 </code></pre> <p>Notice how B0_t is 1 when t is 0 (and everything else is zero). Also, B3_t is 1 when t is 1 (and everything else is zero). So the curve starts at (ax, ay), and ends at (dx, dy).</p> <p>Any intermediate point (px_t, py_t) will be given by the following (vary t from 0 to 1, in small increments inside a loop):</p> <pre><code>px_t = (B0_t * ax) + (B1_t * bx) + (B2_t * cx) + (B3_t * dx) py_t = (B0_t * ay) + (B1_t * by) + (B2_t * cy) + (B3_t * dy) </code></pre> <p>Slope is also easy to do. Using the method given in <a href="https://stackoverflow.com/a/4091430/1384030">https://stackoverflow.com/a/4091430/1384030</a></p> <pre><code>B0_dt = -3(1-t)^2 B1_dt = 3(1-t)^2 -6t(1-t) B2_dt = - 3t^2 + 6t(1-t) B3_dt = 3t^2 </code></pre> <p>So, the rate of change of x and y are:</p> <pre><code>px_dt = (B0_dt * ax) + (B1_dt * bx) + (B2_dt * cx) + (B3_dt * dx) py_dt = (B0_dt * ay) + (B1_dt * by) + (B2_dt * cy) + (B3_dt * dy) </code></pre> <p>And then use <code>Math.atan2(py_dt,px_dt)</code> to get the angle (in radians).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload