Given a linear function f (x), how to obtain a quadratic bezier control point

Question

I did a lot of research on this topic and found a couple of posts that were helpful, but I just can't figure it out.

I am developing a very simple structural analysis application. In this application, I need to display a graph showing the internal beam voltage. The graph is obtained by the formula:

y = (100 * X / 2) * (L - X) 

where L is the known beam length (say, its 1 for simplicity). And X is a value from 0 to the length of the beam. Thus, the final formula:

 y = (100 * X / 2) * (1 - x) where 0 < X < 1. 

Assuming my starting and ending points are P0 = (0,0) and P2 = (1,0) . How can I get P2 (breakpoint)? I searched on the Wikipedia page, but I'm not sure how to get the control point from the formula of a quadratic Bezier curve:

 B(t) = (1 - t)^2 * P0 + 2*(1 - t)*t * P1 + t^2 * P2 

I'm sure it should be such an easy problem to fix ... Can someone help me?

PS: I also found this, How to find a mathematical function defining a Bezier curve that seems to explain how to do the opposite of what I'm trying to achieve. I just can't figure out how to do this.

Answer 1

We want the quadratic curve defined by y to correspond to the quadratic Bezier curve defined by B(t) .

Among the many points that must correspond, there is a peak that occurs at x = 0.5 . When x = 0.5 ,

 y = (100 * x / 2) * (1 - x) 100 1 25 y = ---- * --- = ---- = 12.5 4 2 2 

So let's position B(0.5) = (0.5, 12.5) :

 B(t) = (1-t)^2*(0,0) + 2*(1-t)*t*(Px, Py) + t^2*(1,0) (0.5, 12.5) = B(0.5) = (0,0) + 2*(0.5)*(0.5)*(Px, Py) + (0.25)*(1,0) 0.5 = 0.5 * Px + 0.25 12.5 = 0.5 * Py 

The solution for Px and Py , we get

 (Px, Py) = (0.5, 25) 

And here is a visual confirmation (in Python) that we found the right point:

 # test.py import matplotlib.pyplot as plt import numpy as np x = np.linspace(0, 1, 100) y = (100*x/2)*(1-x) t = np.linspace(0, 1, 100) P0 = np.array([0,0]) P1 = np.array([0.5,25]) P2 = np.array([1,0]) B = ((1-t)**2)[:,np.newaxis]*P0 + 2*((1-t)*t)[:,np.newaxis]*P1 + (t**2)[:,np.newaxis]*P2 plt.plot(x, y) plt.plot(B[:,0], B[:,1]) plt.show() 

Running python test.py , we see that the two curves overlap:

---

How did I find out to choose t = 0.5 as the parameter value when B(t) reaches its maximum height?

Well, basically it was based on intuition, but here's a more formal way to prove it:

The y-component of B'(t) is 0 when B(t) reaches its maximum height. So, taking the derivative of B(t) , we see that

 0 = 2*(1-2t)*Py t = 0.5 or Py = 0 

If Py = 0, then B (t) is a horizontal line from (0,0) to (1,0). Rejecting this degenerate case, we see that B(t) reaches its maximum height at t = 0.5 .

Answer 2

Your quadratic Bezier curve formula has a typo in the mean. It should be:
B(t) = (1 - t)^2 * P0 + 2 * (1 - t) * t * P1 + t^2 * P2
This means that you must take P1=(1,50) , which @unutbu found and halved the coordinates to get P1=(.5,25) . (It doesn’t matter if you are planning a parametric equation yourself, but if you want something like LaTeX \qbezier(0,0)(.5,25)(1,0) , you will need a fixed point.)

The control point P1 defined so that the tangent lines in P0 and P2 intersect at P1 . This means that if (P1)x=(P2)x , the graph should be vertical on the right side (which you do not need).

In response to your comment, if you have square y=f(x) , then it is symmetrical about its axis (almost tautologically). Thus, the maximum / minimum will occur on average at the roots (as well as the control point).