Get coordinates of half of the length of the bezier curve

Question

I have an ellipse which is drawn with 4 beziercurves.

I want to draw a point on every beziercurve.

The point should be in the middle of the length of the beziercurve (half of the length of the bezier curve).

How do I get the coordinates of this points?

Ist there a formula or a algorithm which can do that?

picture which hopefully will describe my question

Possible duplicate: https://stackoverflow.com/questions/16227300/how-to-draw-bezier-curves-with-native-javascript-code-without-ctx-beziercurveto. — Petr Broz, Sep 18 '18 at 08:50
Possible duplicate of [How to draw Bezier curves with native Javascript code without ctx.bezierCurveTo?](https://stackoverflow.com/questions/16227300/how-to-draw-bezier-curves-with-native-javascript-code-without-ctx-beziercurveto) — sɐunıɔןɐqɐp, Sep 18 '18 at 08:59
My problem is not to draw the beziercurve but to find out the coordinates of the center of the beziercurve — coder041, Sep 18 '18 at 09:12
Can you provide the method which you are drawing the bezier with? If you are using ctx, please, provide the actual coordinates. — gazdagergo, Sep 18 '18 at 09:54
This is a maths question. The fact that you want to use it in an application is irrelevant. Just google the question itself and then come back if you need help doing it in Javascript (once you know how to actually do it). — Reinstate Monica Cellio, Sep 18 '18 at 10:52
I'm voting to close this question as off-topic because the art of finding such formulas has a home on https://math.stackexchange.com/ — Peter B, Sep 18 '18 at 11:15
@Archer Thank you for your answer. I have searched google and forums for the last 3 houres and still haven't found a solution. — coder041, Sep 18 '18 at 11:46
@coder041, I edited my answer. I hope you can use it now (in spite of it got a downvote it is fully working with example). Please, let me know if you have any question regarding. — gazdagergo, Sep 18 '18 at 12:01
you're showing an ellipse, which is literally impossible to draw with Bezier curves, so to draw any kind of ellipse (including circles) you need multiple Beziers. If you can show how many Beziers you're using, and what order they are, then this question has an answer. Otherwise, there's not enough information. If you really do mean "on the ellipse", then Beziers are irrelevant and you want the maths for finding a point on an ellipse at some distance or angle. — Mike 'Pomax' Kamermans, Sep 18 '18 at 19:17
@Mike'Pomax'Kamermans The ellipse is drawn with 4 bezier curves. I want the coordinates of the middlepoint on the bezier curve in the right bottom corner. — coder041, Sep 19 '18 at 06:14
Then please update your illustration to show just one curve rather than four, and phrase your question in terms of that one curve, and probably explain what you mean with "the middle point" (i.e. expressed in term of some angle, or some distance ratio, etc.) — Mike 'Pomax' Kamermans, Sep 19 '18 at 15:46

gazdagergo · Answer 1 · 2018-09-19T11:36:07.210

My solution is also not a real ellipsis, as @Mike'Pomax'Kamermans highlighted, but an ellipsis-like bezier curve. If half means the 3:1 division point of the length of the bottom curve (and not 45 degree from the axis) the solution looks like this with ctx and using @ivan-kuckir's interpolation function:

function interpolate(a, b, frac){
  var nx = a.x+(b.x-a.x)*frac;
  var ny = a.y+(b.y-a.y)*frac;
  return {x:nx,  y:ny};
}

function getDivisionPointOfBezier(cp1, cp2, cp3, cp4, frac) {
  var p1 = interpolate(cp1, cp2, frac);
  var p2 = interpolate(cp2, cp3, frac);
  var p3 = interpolate(cp3, cp4, frac);

  var p4 = interpolate(p1, p2, frac);
  var p5 = interpolate(p2, p3, frac);

  var p6 = interpolate(p4, p5, frac);
  return p6;
}

// control points of the ellipsis bezier
var cp1 = {x:0, y:50};
var cp2 = {x:0, y:100};
var cp3 = {x:200, y:100};
var cp4 = {x:200, y:50};
var cp5 = {x:200, y:0};
var cp6 = {x:0, y:0};


var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


ctx.beginPath();

// bottom half-curve
ctx.moveTo(cp1.x, cp1.y);
ctx.bezierCurveTo(cp2.x, cp2.y, cp3.x, cp3.y, cp4.x, cp4.y);

// top half-curve
ctx.moveTo(cp4.x, cp4.y);
ctx.bezierCurveTo(cp5.x, cp5.y, cp6.x, cp6.y, cp1.x, cp1.y);

ctx.stroke();

// draw red point
var divPoint = getDivisionPointOfBezier(cp1, cp2, cp3, cp4, 0.75);
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.arc(divPoint.x,divPoint.y,5,0,2*Math.PI);
ctx.fill();

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>

This drawing represents the calculation on the bottom part. This how the bézier algorithm is calculating the position of each point (black dots represent the control points), and we are looking for the 3:1 division point.

Get coordinates of half of the length of the bezier curve

1 Answers1