Given f(x) linear function, how to obtain a Quadratic Bezier control point

Question

I've been doing a lot of research on the topic and found a couple of post that where helpful but I just can't get this right.

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

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

where L is the known length of the beam (lets say its 1 for simplicity). And X is a value between 0 and the Length of be beam. So the final formula would be:

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

Assuming my start and end points are P0 = (0,0) and P2 = (1,0). How can I obtain P2 (control point)?? I have been searching in the Wikipedia page but I am unsure how to obtain the control point from the quadratic bezier curve formula:

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

I'm sure it must be such an easy problem to fix… Can anyone help me out?

P.S.: I also found this, How to find the mathematical function defining a bezier curve, which seems to explain how to do the opposite of what I am trying to achieve. I just can't figure out how to turn it around.

Answer 1

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

Among the many points that must match is the peak which occurs at x = 0.5. When x = 0.5,

y = (100 * x / 2) * (1 - x)

    100     1      25
y = ---- * ---  = ---- = 12.5
     4      2       2

Therefore, let's arrange for 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

Solving for Px and Py, we get

(Px, Py) = (0.5, 25)

And here is visual confirmation (in Python) that we've 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 the two curves overlap:

---

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

Well, it was mainly based on intuition, but here is a more formal way to prove it:

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

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 B(t) reaches its maximum height when t = 0.5.

Answer 2

Your quadratic bezier curve formula has a typo in the middle term. It should be:
B(t) = (1 - t)^2 * P0 + 2 * (1 - t) * t * P1 + t^2 * P2
This means you should take the P1=(1,50) that @unutbu found and divide the coordinates in half to get P1=(.5,25). (This won't matter if you're plotting the parametric equation on your own, but if you want something like LaTeX's \qbezier(0,0)(.5,25)(1,0), then you'll need the corrected point.)

The P1 control point is defined so that the tangent lines at P0 and P2 intersect at P1. Which means that if (P1)x=(P2)x, the graph should be vertical on its righthand side (which you don't want).

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