Determine quadratic bezier control point given start and end control points, curve length, and tension location

Question

I'm writing a program for users to quickly approximate the shape of a curved or straight bendable pipe with a quadratic bezier curve. They will enter the start and end points and provide the length of the pipe. An analogy would be someone staking down the start and end of a rope of known length.

In order to determine the shape of the curve they would click a point along the edge of the displayed pipe/rope shape where it "bows the furthest" from the start/end points. This is shown by the red cross in the diagram below. I'm showing the red cross not on the pipe to indicate that user's are allowed/likely to make an error in this selection. It seems unlikely they could select a point exactly on the curve.

Once the user has selected this point the result will be displayed as an SVG quadratic bezier: https://www.w3.org/TR/SVG/paths.html#PathDataQuadraticBezierCommands

Given that the start and end points are two of the quadratic's control points. I'd like to calculate the third control point of the quadratic bezier assuming the start/end points and length are accurate. In other words, the red point should "tension" the curve in the direction of the third control point.

I'm imagining I could initially calculate the third control point assuming the user's click (red cross) is actually on the quadratic curve using this algorithm.

Given the three control points that define the curve I could then calculate the length of the curve using this equation.

If the curve's length is within an error tolerance I'm done. If not, I could iteratively move the third control point, recalculate the length, repeating until the control point puts the length within the desired tolerance.

How would I adjust the third control point's x,y location while still maintaining the shape of the curve?

Or is there a better solution overall?

Clarifications:

The domain here is the sport of dog agility. The intent is to allow users to identify "tube tunnel" shapes on an existing competition course diagram image. The course diagrams will give the tunnel lengths and the start and end locations as specified by the judge.

Only a very rough reproduction of the tunnel shape is required.

At dog agility events the tunnel end points will be located on the course via tape measure/measuring wheel at best w/in +/- 1 ft and then the tunnel is fully extended in a visual approximation of the shape and held in place by sandbags. No measurement of the shape is performed.

The idea for this application is to allow someone on a mobile phone to only click one point (generally) on the curve to create a visual starting point of the shape. The user will be able to further refine the shape if they desire.

There are only a few allowed tunnel lengths and shapes. Most, but not all, allowed shapes can be represented using a quadratic bezier, it will be used as a starting point while maintaining the start/end/length constraints.

Answer 1

For quadratic curves, you can find that red cross by finding the intersection of the tangents at the start and end point. Now, you don't have those, but you do have the approximate tangents, because close to the start and end points, a line between a point and the star/tend is approximately equal to its tangent

However, if we do that for the shape you're showing, we can see that this is very much not a quadratic Bezier curve:

bgimg.onload = () => {
  cvs.width = 400;
  cvs.height = 350;
  const ctx = cvs.getContext(`2d`);
  ctx.drawImage(bgimg, 0, 0, 400, 350);
  ctx.lineWidth = 2;
  ctx.strokeStyle = `red`;
  
  // quadratic
  ctx.beginPath();
  ctx.moveTo(58,275);
  ctx.quadraticCurveTo(104, 92, 320, 50);
  ctx.moveTo(104, 92);
  ctx.arc(104, 92, 3, 0, 2*Math.PI);
  ctx.stroke(); 
};

.hidden {
  display: none;
}
canvas {
  border:1px solid black;
}

<canvas id="cvs"></canvas>
<img id="bgimg" class="hidden" src="https://i.stack.imgur.com/ZcqMD.png">

You can, of course, use the curve-to-baseline ratio for quadratic curves to find a different control point so that the middle of the curve overlaps with your pipe:

bgimg.onload = () => {
  cvs.width = 400;
  cvs.height = 350;
  const ctx = cvs.getContext(`2d`);
  ctx.drawImage(bgimg, 0, 0, 400, 350);
  ctx.lineWidth = 2;
  ctx.strokeStyle = `red`;

  // point "c" at the baseline midpoint
  ctx.beginPath();
  ctx.arc(177, 172, 3, 0, 2*Math.PI);  
  ctx.moveTo(58,275);
  ctx.lineTo(320, 50);
  ctx.moveTo(177,172);
  ctx.lineTo(20,0);
  // point "b" is on our curve
  ctx.moveTo(128,118);
  ctx.arc(128, 118, 3, 0, 2*Math.PI);  
  // point "a" is at b - (c-b)
  const ax = 128 - (177 - 128);
  const ay = 118 - (172 - 118);
  ctx.moveTo(ax, ay);
  ctx.arc(ax, ay, 3, 0, 2*Math.PI);
  ctx.moveTo(58,275);
  ctx.quadraticCurveTo(ax, ay, 320,50)
  ctx.stroke(); 
};

.hidden {
  display: none;
}
canvas {
  border:1px solid black;
}

<canvas id="cvs"></canvas>
<img id="bgimg" class="hidden" src="https://i.stack.imgur.com/ZcqMD.png">

But then it'll be bowed out too much so you're probably going to have to use cubic Bezier curves here, because the shapes you're working with are not quadratic.

Answer 2

I'd like to propose a different interpretation of the position the user sets the cross to. As Pomax has pointed out, the curve drawn by you is anything but a quadratic bezier. But, maybe intuitively, the cross sits at a point near where the tangents from the endpoints meet. I think this is an easy to grasp concept: Draw the cross to indicate where the tangents of the pipe ends should point.

That one is relatively easy to implement with a cubic Bezier, as the two control points must sit on the respective line connecting the endpoint to that target point. Move them nearer to or further from that point until the length approximates the given value.

Obviously, the position of the cross then has a limit of where it can be placed, otherwise the control points would have to go beyond the target point. But unlike your approach, the user can correct that error by choosing a point that leaves more "space" for the pipe length - something that can be done intuitively.

const pipeLength = 160;

const bezier = document.querySelector('#bezier');
const start = [0, 0];
const end = [100, 100];
const target = [90, 10];

let curveLength = Math.hypot(target[0] - start[0], target[1] - start[1]) +
                  Math.hypot(target[0] - end[0], target[1] - end[1]);
let part = 1, low = 0, high = 1, i= 0;

while ((i++ < 20) && Math.abs(curveLength - pipeLength) > 1) {
  const control1 = [
    target[0] * part + start[0] * (1 - part),
    target[1] * part + start[1] * (1 - part)
  ];
  const control2 = [
    target[0] * part + end[0] * (1 - part),
    target[1] * part + end[1] * (1 - part)
  ];
  
  bezier.setAttribute('d', 'M ' + [...start, 'C', ...control1, ...control2, ...end].join(' '));
  
  curveLength = bezier.getTotalLength();
  
  if (curveLength > pipeLength) {
    high = part;
  } else {
    low = part;
  }
  part = (high + low) / 2;
}

<svg viewBox="-10 -10 120 120" height = "100vh">
  <path d="M80,10h20M90,0v20" stroke="red" />
  <path d="M0,0 90,10 100,100" fill="none" stroke="red" stroke-dasharray="3 3" />
  <path id="bezier" d="M0,0 C 90,10 90,10 100,100" fill="none" stroke="blue" />
</svg>