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.

Hearne

It seems the answer lies at the end of the link you mentioned – Shaft

I'm a math noob, so if you could help me understand with some code that would end my days of suffering – Hearne

I'll post an answer soon – Shaft

if you picked up graphics programming, you're probably going to want to give pomax.github.io.bezierinfo a read over. At least the first few sections. – Norvol

@Mike'Pomax'Kamermans Your link does not work. It seem you meant this page. – Shaft

indeed, link had a . instead of a / – Norvol

also have a look at https://mcmap.net/q/226299/-draw-svg-bezier-curve which gives you working code for arbitrarily complex curves. – Norvol

Answer 1

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

Haubergeon