How to convert quadratic bezier curve code into cubic bezier curve?

Question

So I've recently picked up graphics programming and I wanted to compute a cubic Bézier curve. I found this excellent answer on quadratic Bézier but I don't know how to convert this to a cubic Bézier curve.

It seems the answer lies at the end of the link you mentioned — polfosol ఠ_ఠ, Jun 05 '16 at 13:16
I'm a math noob, so if you could help me understand with some code that would end my days of suffering — Arjan Singh, Jun 05 '16 at 13:18
if you picked up graphics programming, you're probably going to want to give https://pomax.github.io.bezierinfo a read over. At least the first few sections. — Mike 'Pomax' Kamermans, Jun 05 '16 at 16:22
@Mike'Pomax'Kamermans Your link does not work. It seem you meant [this page](https://pomax.github.io/bezierinfo). — polfosol ఠ_ఠ, Jun 05 '16 at 16:38
also have a look at http://stackoverflow.com/questions/37616929/draw-svg-bezier-curve which gives you working code for arbitrarily complex curves. — Mike 'Pomax' Kamermans, Jun 05 '16 at 16:48

score 22 · Accepted Answer · edited Jun 05 '16 at 15:50

For cubic Bézier curve, as you see in the link you shared, the green lines are obtained from the same procedure as the quadratic one. the differences are: you have two green lines, and then you need to calculate a blue line based on them. So the for loop changes as:

for( float i = 0 ; i < 1 ; i += 0.01 )
{
    // The Green Lines
    xa = getPt( x1 , x2 , i );
    ya = getPt( y1 , y2 , i );
    xb = getPt( x2 , x3 , i );
    yb = getPt( y2 , y3 , i );
    xc = getPt( x3 , x4 , i );
    yc = getPt( y3 , y4 , i );

    // The Blue Line
    xm = getPt( xa , xb , i );
    ym = getPt( ya , yb , i );
    xn = getPt( xb , xc , i );
    yn = getPt( yb , yc , i );

    // The Black Dot
    x = getPt( xm , xn , i );
    y = getPt( ym , yn , i );

    drawPixel( x , y , COLOR_RED );
}

How to convert quadratic bezier curve code into cubic bezier curve?

1 Answers1

Linked