2

I do have a bezier curve, and at a certain point, I want a second bezier curve "branching off" the first curve in a smooth manner. Together with calculating the intersection point (with a percentage following the Bezier curve), I need also the control point (the tangent and weight). The intersection point is calculated with the following piece of javascript:

getBezier = function getBez(percent,p1,cp1,cp2,p2) {
    function b1(t) { return t*t*t }
    function b2(t) { return 3*t*t*(1-t) }
    function b3(t) { return 3*t*(1-t)*(1-t) }
    function b4(t) { return (1-t)*(1-t)*(1-t) }
    var pos = {x:0,y:0};
    pos.x = p1.x*b1(percent) + cp1.x*b2(percent) + cp2.x*b3(percent) + p2.x*b4(percent);
    pos.y = p1.y*b1(percent) + cp1.y*b2(percent) + cp2.y*b3(percent) + p2.y*b4(percent);
    return pos;
}

(Non IE browsers can see it in action at http://www.iscriptdesign.com -> Tutorial -> Groups & Paths). All I need now is the controlpoint or (tangent and weight) for the branchpoint ( I don't have a clue where to start, and I hope somebody can point to some code, or mathematical equation, if possible as function from the same parameters as the getBezier function above).

3
  • Is there a specific reason why you need to use a separate curve, as opposed to another cubic or quadratic segment? This is important, because the SVG spec includes support for automatically choosing the first control point of the next segment such that the curve will be smooth. See S/s and T/t here: w3.org/TR/SVG/paths.html#PathDataCubicBezierCommands
    – jbeard4
    Commented Oct 18, 2010 at 11:51
  • Well I'm trying to design a tray-stand. The stand and the tray are two different curves, and the stands supports the tray up to a certain point a the the curve but at a certain point I want a hole between the stand and the tray. At another point the stand and the tray curve will join again to finish the hole, and to make a stable symetric stand for the tray. The stands needs 2 bumps to prevent shifting the tray along its' length axis I tried to compile a little example: www.iscriptdesign.com -> tutorial -> tray-stand.
    – dr jerry
    Commented Oct 18, 2010 at 19:16
  • the red line is the upper side of the tray stand, the black line the lower side of the tray. Point is that I want the black line to follow the "ditches" in the red line just before the edge and than branch off.
    – dr jerry
    Commented Oct 18, 2010 at 19:17

2 Answers 2

1

Found and implemented it: de-Casteljau algorithm turned out to be the fastest implementable solution. It is currently present under: iScriptDesign (Tutorial ->Spit Bezier).

1
  • Thanks very much for sharing this, it came in use to me almost 4 years later. However I need some help on this. Please reply if you're still around please.
    – Noitidart
    Commented May 4, 2014 at 8:26
0

Example usage (I think, i need help from @drjerry)

I have a css3 timing function, this is called ease-in-out: cubic-bezier(.42,0,.58,1). Graphically this looks like: http://cubic-bezier.com/#.42,0,.58,1

I want to make a new timing function that is just the bottom half and then top half of this graph.

So the bottom half is ease-in: cubic-bezier(.42,0,1,1). Graphically: http://cubic-bezier.com/#.42,0,1,1

And the top half is ease-out: cubic-bezier(0,0,.58,1). Graphically: http://cubic-bezier.com/#0,0,.58,1

So now what confuses me is that according to the script at iScriptDesign it tells me they are different.

iScriptDeisgn says the starting half of ease-in-out is (which is ease-in) is: cubic-bezier(.21, 0, .355, .25). Graphically: http://cubic-bezier.com/#.21,0,.35,.25

iScriptDeisgn says the ending half of ease-in-out is (which is ease-out) is: cubic-bezier(.145, .25, .29, .5). Graphically: http://cubic-bezier.com/#.14,.25,.29,.5

Why is the ease-in and ease-out returned by the iScriptDesign split function different from the real ease-in and real ease-out? I don't get it.

Code for this example.

//////////////////START FROM ISCRIPTDESIGN
var splitBezier = function(array, perc) {
    array.unshift({x:0, y:0});
    var coll = [];
    while (array.length > 0) {
    for (var i = 0;i < array.length-1; i++) {
        coll.unshift(array[i]);
        array[i] = interpolate(array[i], array[i+1], perc);
    }
    coll.unshift(array.pop());
    }
    return {b1: [{x:coll[5].x, y:coll[5].y}, {x:coll[2].x, y:coll[2].y},{x:coll[0].x, y:coll[0].y}]
        , b2: [{x:coll[1].x - coll[0].x,y:coll[1].y-coll[0].y}, {x:coll[3].x - coll[0].x,y:coll[3].y-coll[0].y}, {x:coll[6].x - coll[0].x,y:coll[6].y-coll[0].y}]};
}

var interpolate = function (p0, p1, percent) {
    if (typeof percent === 'undefined') percent = 0.5;  
    return  {x: p0.x + (p1.x - p0.x) * percent
         , y: p0.y + (p1.y - p0.y) * percent};
}
//////////////////END FROM ISCRIPTDESIGN
var coord = function (x,y) {
  if(!x) var x=0;
  if(!y) var y=0;
  return {x: x, y: y};
}
var easeInOut = [new coord(.42,0), new coord(.58,1), new coord(1,1)];
var split50percent = splitBezier(easeInOut.slice(), .5);

So split50percent is set to:

({
    b1: [{
        x: 0.21,
        y: 0
    }, {
        x: 0.355,
        y: 0.25
    }, {
        x: 0.5,
        y: 0.5
    }],
    b2: [{
        x: 0.14500000000000002,
        y: 0.25
    }, {
        x: 0.29000000000000004,
        y: 0.5
    }, {
        x: 0.5,
        y: 0.5
    }]
})

Same thing with easeInOutSine

  • easeInOutSine:.44,.05,.55,.95
  • REAL
    • easeInSine:0.47, 0, 0.745, 0.715
    • easeOutSine:0.39, 0.575, 0.565, 1
  • iScriptDesign
    • easeInSine:.22,.03,.36,.26
    • easeOutSine:.14,.24,.28,.48
7
  • Also I think there's a problem with the endpoint returned in the b2 array. Shouldn't the endpoint be {x:1,y:1}?
    – Noitidart
    Commented May 4, 2014 at 10:03
  • I think the reason why b1 is different from real vs iScriptDesign is because iScriptDesign puts out with endpoint being {x:.5,y:.5} do you have a function like opposite of interpolate? So like extrapolate? Do you think then iScriptDesign vs real will match?
    – Noitidart
    Commented May 4, 2014 at 10:14
  • 1
    Notidart, Its quite a while ago.. the algorithm I used in iScriptdesign is taking relative values (delta's, this is reflected with the lower case c in the path attribute) So the example what iscriptdesign returns looks correct with what I would expect: Concatenating the first bezier b1, with the second gives the complete bezier. So the addition of the first endpoint to second endpoint should yield the total endpoint. And that's correct in this case (0.5,0.5) + (0.5,0.5) = (1,1). I'm not daily around on this site but often enough, in case you need more clarification :-)
    – dr jerry
    Commented May 4, 2014 at 20:28
  • 1
    Adding up (the vector of) both controlpoints of the splitted beziers will not result in the controlpoints of the original unsplitted bezier. This only holds true for the endpoints of the splitted beziers (which is b1[2] and b2[2]. In iscriptdesing's example the location of the controlpoints of the splitted beziers is the intersection of the green lines and the green lines with the original control points (vectors). The algorithm iscriptdesign is using is the universal de-casteljau's algorithm implemented in javascript in my humble opinion the "real" stuff.
    – dr jerry
    Commented May 5, 2014 at 9:52
  • 1
    Furthermore if you're considering using beziers for timelines I'd also encourage you to have a look at d3js, a much more hardened framework for doing exactly that. iScriptdesign has been primarily developed for creation, display and modification of online build models for cnc devices (like lasercutters) although it's also used for online scriptable graphics.
    – dr jerry
    Commented May 5, 2014 at 9:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.