Calculating the tangent of a Bezier curve using the x and y coordinates of a specific point, instead of the parameter t where 0 < t < 1

Question

Calculating the tangent of a Bezier curve using the x and y coordinates of a specific point, instead of the parameter t where 0 < t < 1

Currently, I am faced with the challenge of dealing with a bezier curve intersecting with a line in the top left corner.

https://i.sstatic.net/QrgJP.png

After identifying the points at which the line and curve intersect, my goal is to determine the tangent of the bezier curve at those specific points. My existing function can find the tangent at a given point t on the curve but operates with values between 0 and 1 rather than coordinates. See below:

let bezierCurveTangent = function(start: Point, end: Point, controlPoint: Point, t: number): Point {

    let x = 2 * (1 - t) * (controlPoint.x - start.x) + 2 * t * (end.x - controlPoint.x);

    let y = 2 * (1 - t) * (controlPoint.y - start.y) + 2 * t * (end.y - controlPoint.y);

    return { x, y };
}

The question now remains, how can I calculate the tangent for a point using x and y coordinates instead of a value for t?

The equation for a point on a bezier curve follows this structure:

https://i.sstatic.net/Aol5x.png

Is it feasible to rearrange this equation to solve for t and then input that value into the function mentioned above?

It seems there should be a more efficient method to tackle this issue without the need for constant conversions between t values and various points.

javascript typescript geometry bezier

Answer 1

Answer №1

To find the intersection point of a curve and a line, simply search for it in terms of parameter t.

Given the parametric equation of a line passing through points L0, L1:

L(u) = L0 + (L1-L0)*u = L0 + DL*u

We can set up an equation system as follows:

P0x*(1-t)^2+2*(1-t)*t*P1x+t^2*P2x = L0x+u*DLx
P0y*(1-t)^2+2*(1-t)*t*P1y+t^2*P2y = L0y+u*DLy

By expressing u from the first equation and substituting it into the second one:

u = (P0x*(1-t)^2+2*(1-t)*t*P1x+t^2*P2x - L0x)/Dlx

We then further substitute it in the second equation:

(P0y*(1-t)^2+2*(1-t)*t*P1y+t^2*P2y-L0y)*Dlx=
   (P0x*(1-t)^2+2*(1-t)*t*P1x+t^2*P2x-L0x)*DLy

Finally, solve the resulting quadratic equation to obtain the solutions t1 and t2, provided they exist within the range of 0 to 1.

Answer 2

To find the intersection point of a curve and a line, simply search for it in terms of parameter t.

Given the parametric equation of a line passing through points L0, L1:

L(u) = L0 + (L1-L0)*u = L0 + DL*u

We can set up an equation system as follows:

P0x*(1-t)^2+2*(1-t)*t*P1x+t^2*P2x = L0x+u*DLx
P0y*(1-t)^2+2*(1-t)*t*P1y+t^2*P2y = L0y+u*DLy

By expressing u from the first equation and substituting it into the second one:

u = (P0x*(1-t)^2+2*(1-t)*t*P1x+t^2*P2x - L0x)/Dlx

We then further substitute it in the second equation:

(P0y*(1-t)^2+2*(1-t)*t*P1y+t^2*P2y-L0y)*Dlx=
   (P0x*(1-t)^2+2*(1-t)*t*P1x+t^2*P2x-L0x)*DLy

Finally, solve the resulting quadratic equation to obtain the solutions t1 and t2, provided they exist within the range of 0 to 1.

Answer 3

Answer №2

To solve the equation, rather than expanding and solving the polynomials, I suggest a simpler computational solution. Let P₀=(a₁,a₂), P₁=(b₁,b₂), P₂=(c₁,c₂). Consider (x,y) as the point at which you wish to determine the tangent.

Begins by shifting coordinates so that P₁ becomes the origin: let x=x'+b₁, y=y'+b₂. In the (x',y') coordinates, the curve is represented as:

B(t) = (1-t)²P₀ + t² P₂

The coordinates of P₀ and P₂ will be recalculated accordingly using prime notation for them.
Next step involves rotating and scaling the coordinate system so that P₀ and P₂ shift to points (0,1) and (1,0). Achieve this by inverting the matrix provided below:

Note that an inverse exists if the points P₀, P₁, P₂ do not lie on the same line, and the matrix looks like this:

Therefore, the new coordinates (x'',y'') are expressed as (x',y')=A(x'',y''). The curve in this new system is given by:

B(t) = (1-t)²e₁ + t²e₂

Here, e₁=(1,0) and e₂=(0,1), simplifying to:

x''(t) = (1-t)²
y''(t) = t²

If y'' is known, it's easy to find t=sqrt(y''). Note that the square root always exists (if you began with a point lying on the bezier curve) because we transformed coordinates ensuring the curve lies where x>0 and y>0. Finding (x'',y'') from (x,y) is straightforward using the formula (x'',y'')=(x+c₁, y+c₂)B. This can be understood with this code snippet:

const getT = (start: Point, end: Point, controlPoint: Point, x: number, y: number) => {
  // xp stands for x'
  const xp = x - controlPoint.x
  const yp = y - controlPoint.y
  const a1p = start.x - controlPoint.x
  const a2p = start.y - controlPoint.y
  const c1p = end.x - controlPoint.x
  const c2p = end.y - controlPoint.y

  const det = a1p * c2p - a2p * c1p

  // Variable xpp included redundantly for clarity
  const xpp = (xp * c2p - yp * c1p) / det
  const ypp = (- xp * a2p + yp * a1p) / det

  return Math.sqrt(ypp)
}

Or more concise version:

const getT = (start: Point, end: Point, controlPoint: Point, x: number, y: number) => Math.sqrt(
  (- (x - controlPoint.x) * (start.y - controlPoint.y) 
    + (y - controlPoint.y) * (start.x - controlPoint.x)) / 
  ((start.x - controlPoint.x) * (end.y - controlPoint.y) -
    (start.y - controlPoint.y) * (end.x - controlPoint.x))
)

Answer 4

To solve the equation, rather than expanding and solving the polynomials, I suggest a simpler computational solution. Let P₀=(a₁,a₂), P₁=(b₁,b₂), P₂=(c₁,c₂). Consider (x,y) as the point at which you wish to determine the tangent.

Begins by shifting coordinates so that P₁ becomes the origin: let x=x'+b₁, y=y'+b₂. In the (x',y') coordinates, the curve is represented as:

B(t) = (1-t)²P₀ + t² P₂

The coordinates of P₀ and P₂ will be recalculated accordingly using prime notation for them.
Next step involves rotating and scaling the coordinate system so that P₀ and P₂ shift to points (0,1) and (1,0). Achieve this by inverting the matrix provided below:

Note that an inverse exists if the points P₀, P₁, P₂ do not lie on the same line, and the matrix looks like this:

Therefore, the new coordinates (x'',y'') are expressed as (x',y')=A(x'',y''). The curve in this new system is given by:

B(t) = (1-t)²e₁ + t²e₂

Here, e₁=(1,0) and e₂=(0,1), simplifying to:

x''(t) = (1-t)²
y''(t) = t²

If y'' is known, it's easy to find t=sqrt(y''). Note that the square root always exists (if you began with a point lying on the bezier curve) because we transformed coordinates ensuring the curve lies where x>0 and y>0. Finding (x'',y'') from (x,y) is straightforward using the formula (x'',y'')=(x+c₁, y+c₂)B. This can be understood with this code snippet:

const getT = (start: Point, end: Point, controlPoint: Point, x: number, y: number) => {
  // xp stands for x'
  const xp = x - controlPoint.x
  const yp = y - controlPoint.y
  const a1p = start.x - controlPoint.x
  const a2p = start.y - controlPoint.y
  const c1p = end.x - controlPoint.x
  const c2p = end.y - controlPoint.y

  const det = a1p * c2p - a2p * c1p

  // Variable xpp included redundantly for clarity
  const xpp = (xp * c2p - yp * c1p) / det
  const ypp = (- xp * a2p + yp * a1p) / det

  return Math.sqrt(ypp)
}

Or more concise version:

const getT = (start: Point, end: Point, controlPoint: Point, x: number, y: number) => Math.sqrt(
  (- (x - controlPoint.x) * (start.y - controlPoint.y) 
    + (y - controlPoint.y) * (start.x - controlPoint.x)) / 
  ((start.x - controlPoint.x) * (end.y - controlPoint.y) -
    (start.y - controlPoint.y) * (end.x - controlPoint.x))
)

Calculating the tangent of a Bezier curve using the x and y coordinates of a specific point, instead of the parameter t where 0 < t < 1

Answer №1

Answer №2

Similar questions

Extract the data that was returned from the AJAX post function

The logout feature might refresh the page, yet the user remains logged in

Is there a way to remove unnecessary code from the end of a string using JavaScript?

The setter of the computed property is failing to execute

What is the process for transferring ng-model values to a table in Angular?

Ways to conceal <td>s in angularjs on specific rows during ng-repeat

When utilizing a 'Token' in the provider() aliasing within Angular 2, the Typescript compiler may display an error message stating 'Unresolved variable or type'. This issue can arise when defining

Tips for emptying the fields and restoring a form within a modal once it has been closed

Obtain every selection from the multiselect box and add them to the database

Ways to access states from a Vuex store within a Vuetify list in VueJs

What is the best method for retrieving data from a loop in a vuetify carousel?

Adjusting the size of elements and the dimensions of the browser window

How to Transfer Deleted List Items from one Unordered List to another in Angular 9 using Event Binding

The requested :id route could not be found using the findById() method in

Is there a way to expand a pie chart into a new pie chart with PHP and Javascript?

Managing Multiple Scheduled Tasks with Node.js and MongoDB

The improved approach to implementing guards in Angular

Adding an object to an array of objects with the useState hook in React - A simple guide

What is the best way to dynamically load a personalized JavaScript file for individual users depending on their PHP login credentials?

Retrieve information from an external website on the client's end