Divide bezier curve into two equal halves

Question

I have the bezier curves between 2 points. I'd like to cut all curves into two equal half. One of my idea is if I can control 't' value I'll draw 2 curves by t = [0,0.5] and t = [0.5,1] but I don't know how. Below is my code. I won't mind any other idea or suggestion

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>D3 test</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>

    <script>
    var Over = function(){
        d3.select(this)
        .style("stroke-opacity", 0.25);
    }
    var Out = function(){
        d3.select(this)
        .transition().duration(200)
        .style("stroke-opacity", 0);
    }

    function curve(n,x1,y1,x2,y2){

        var xr = (x1+x2)/2,
            yr = (y1+y2)/2,
            euDist = Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)),
            x3 = -y1+xr+yr, x4 = -y2+xr+yr,
            y3 =  x1+yr-xr, y4 =  x2+yr-xr,
            ctrl , curveDescription;

        svg.append('path')
            .attr("stroke", 'blue')
            .attr('fill','none')
            .style("stroke-opacity",0.25)
            .attr('d', 'M'+x3+','+y3+'L'+x4+','+y4)
            .attr('stroke-width',strokeWidth);

        for(var j=0;j<=n;j++){
            ctrl = [(x4-x3)*j/n+x3 , (y4-y3)*j/n+y3] ,                  
            curveDescription=   
                    'M' +x1+','     +y1+ 
                    'Q' +ctrl[0]+','+ctrl[1]+','
                        +x2+','     +y2;

            svg.append('path')
                .attr("stroke", 'blue')
                .attr('fill','none')
                .style("stroke-opacity",0.25)
                .attr('d', curveDescription)
                .attr('stroke-width',strokeWidth);  

            svg.append('path')
                .attr("stroke", 'blue')
                .attr('fill','none')
                .style("stroke-opacity",0)
                .on("mouseover", Over)
                .on("mouseout", Out)
                .attr('d', curveDescription)
                .attr('stroke-width',strokeWidth*25);

        }

    }
    </script>

</head>

<body>
    <script>
    var w = 1268 , h = 680 , strokeWidth = 2;

    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h)

    curve(5, 100,100, 400,500);


    </script>
</body>
</html>

i can't directly include it so i upload it instead . – Orio Sep 09 '13 at 08:04 — Orio, Sep 09 '13 at 08:04

score 29 · Accepted Answer · edited Mar 14 '19 at 13:16

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:

Find the point E that is at 't' along the straight line AB.
Find the point F that is at 't' along the straight line BC.
Find the point G that is at 't' along the straight line CD.
Find the point H that is at 't' along the straight line EF.
Find the point J that is at 't' along the straight line FG.
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.

Your explanation make me understand it , thank you very much ^_^ — Orio, Sep 11 '13 at 08:31
Very helpful answer! Thanks. In another answer I have added a diagram that illustrates the points you described. — Andrew Willems, Apr 05 '16 at 18:54
Most of Bezier easing curves have 2 configurable control points (B and C), while A is (0, 0) and D is (1, 1). When we split the curve in two, how can "normalize" again the new curves so that both have A and B at (0, 0), (1, 1) ? — Xys, Mar 20 '23 at 21:36

score 21 · Answer 2 · edited May 23 '17 at 12:00

21

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".

edited May 23 '17 at 12:00

Community

1
1

answered Apr 05 '16 at 18:54

Andrew Willems

11,880
10
53
70

Thanks for this Andrew. – Paul LeBeau Apr 06 '16 at 05:02
what if we have cubic curve but in different shape? I tried this approach on a different cubic curve which is forming a (x cube) like shape, this approach couldn't be able to find the centre. – hmali May 31 '19 at 05:49
@hmali, that is unlikely to be the case, as De Casteljau's formula literally follows from the (recursive) definition of the Bézier curve. In the past it even was the go-to algorithm for drawing Bézier curves. – Wilco Oct 25 '19 at 13:30

score 11 · Answer 3 · answered Nov 09 '14 at 17:47

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();

Divide bezier curve into two equal halves

3 Answers3

Linked