Divide bezier curve into two equal halves

Splitting a bezier into two curves is fairly simple. Look up De Casteljau's Algorithm. https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm

Update

De Casteljau is simpler than it looks. That WP article could be clearer for non-mathermeticians. So I'll explain more simply.

Imagine you have a bezier defined by the points A,B,C & D. Where A and D are the endpoints and B and C are the control points.

So, say you wanted to find the value of the curve at point 't' along the curve (where t is in the range 0..1. You can do it this way by geometry:

1. Find the point E that is at 't' along the straight line AB.
2. Find the point F that is at 't' along the straight line BC.

3. Find the point G that is at 't' along the straight line CD.

4. Find the point H that is at 't' along the straight line EF.

5. Find the point J that is at 't' along the straight line FG.

6. Finally, find the point K that is at 't' along the straight line HJ.

K is also equal to the point that is 't' along the bezier. This is De Casteljau's Algorithm.

But usefully, it also gives us the control points of the two beziers that would result if the curve was split at point K. The two bezier curves are: A,E,H,K and K,J,G,D.

In your case t=0.5, so finding the two curves is just a sequence of additions and divides-by-2.

  E = (A+B)/2
  F = (B+C)/2
  G = (C+D)/2
  H = (E+F)/2
  J = (F+G)/2
  K = (H+J)/2

Obviously each of these calculations has to be done for x and y.

Hope this helps.

Here is a formula for Splitting a bezier into two curves.

var w = 800, h = 560;

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

var pts = [{x:20, y:20},
           {x:20, y:100},
           {x:200, y:100},
           {x:200,  y:20}];
var t = 0.5;

function lerp(a, b, t)
{
    var s = 1 - t;
    return {x:a.x*s + b.x*t,
            y:a.y*s + b.y*t};
}


function splitcurve()
{
    var p0 = pts[0], p1 = pts[1], p2 = pts[2], p3 = pts[3];
    var p4 = lerp(p0, p1, t);
    var p5 = lerp(p1, p2, t);
    var p6 = lerp(p2, p3, t);
    var p7 = lerp(p4, p5, t);
    var p8 = lerp(p5, p6, t);
    var p9 = lerp(p7, p8, t);

    var firsthalf = [p0, p4, p7, p9];
    var secondhalf =  [p9, p8, p6, p3];

    console.log(firsthalf);
    console.log(secondhalf);

    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineWidth=5;
    ctx.bezierCurveTo(20,100,200,100,200,20);
    ctx.strokeStyle="black";
    ctx.stroke(); 

    ctx.beginPath();
    ctx.moveTo(p0.x,p0.y);
    ctx.lineWidth=5;
    ctx.bezierCurveTo(p4.x,p4.y,p7.x,p7.y,p9.x,p9.y);
    ctx.strokeStyle="blue";
    ctx.stroke(); 

    ctx.beginPath();
    ctx.moveTo(p9.x,p9.y);
    ctx.lineWidth=5;
    ctx.bezierCurveTo(p8.x,p8.y,p6.x,p6.y,p3.x,p3.y);
    ctx.strokeStyle="red";
    ctx.stroke(); 
}

splitcurve();

The answer to this question given by Paul LeBeau was very helpful for me. I thought that others would benefit even more if there was a visual to go along with that answer, which I provide below.

The following diagram illustrates the points described in Paul LeBeau's answer. See that answer for the relevant explanation. The actual diagram shows the special case of t=0.5, but the general principles are identical for any value of t between 0 and 1. The heavy black lines show the "control lines" for the original curve while the red lines show them for the first "half-curve".