This is a vey short blog post to show how to change a quadratic Bézier to a cubic Bézier curve. I'm doing this in SVG.

What I want to achieve is taking something like this:

  <path d="M50,230 Q130,20 250,175"></path>

And code it like this:

  <path d="M50,230 C103.333,90 170,71.667 250,175"></path>

In the next pen you can see juxtaposed a quadratic Bézier curve (wider, linen stroke ) and a cubic Bézier curve (red stroke), and their corresponding control points.

The starting and the end points of the cubic Bézier are the same as the quadratic's.

C_start = Q_start
C_end = Q_end

To calculate the control points of the cubic curve you need to know that they are located at:
2/3 distance between the starting point (start) and the control point (Q_cp) of the quadratic Bézier and at
2/3 distance between the end point and the control point (Q_cp) of the quadratic Bézier.

C_cp1 = Q_start + 2/3 *(Q_cp – Q_start) // first control point of the cubic curve
C_cp2 = Q_end + 2/3 *(Q_cp – Q_end); // second ontrol point of the cubic curve

I've putted all this in a function. The function takes 2 arguments:
The first argument is the previous command splitted into an array. In the example above previous = ["M",50,230];

The second argument is the quadratic Bézier command, also splitted into an array. In the example above command = ["Q",130,20,225,175];

  function Q2C_helper(previous,command){
// previous = ["M",50,230];
// command = ["Q",130,20,225,175];

for(let i = 1; i< previous.length; i++){previous[i] = parseFloat(previous[i])}
for(let i = 1; i< command.length; i++){command[i] = parseFloat(command[i])}

let Q = [[previous[previous.length-2],//x
          previous[previous.length-1] //y
         ],
        command];

let cp1 = {}
let cp2 = {}
cp1.x = Number(Q[0][0] + 2/3 * (Q[1][1] - Q[0][0]));
cp1.y = Number(Q[0][1] + 2/3 * (Q[1][2] - Q[0][1]));
cp2.x = Number(Q[1][3] + 2/3 * (Q[1][1] - Q[1][3]));
cp2.y = Number(Q[1][4] + 2/3 * (Q[1][2] - Q[1][4]));

return (["C",cp1.x,cp1.y,cp2.x,cp2.y,Number(command[3]),Number(command[4])])   
}

Where would you use this?

For example when you intent to morph one SVG shape into another, you need two shapes with the same number of points and the same commands. I prefer them in C (all cubic Bézier).


166 0 0