Cubic & Quadratic

by soulwire

HTML

<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var s = {x:0, y:100};
var e = {x:200, y:100};
var c = {x:100, y:50};
var d = {x:80, y:200};
var f = {x:160, y:0};

// Approximate the curve length
function curveLength(sx, sy, cx, cy, ex, ey) {

    var ax = sx - 2 * cx + ex;
    var ay = sy - 2 * cy + ey;
    var bx = 2 * cx - 2 * sx;
    var by = 2 * cy - 2 * sy;

    var a = 4 * (ax * ax + ay * ay);
    var b = 4 * (ax * bx + ay * by);
    var c = bx * bx + by * by;

    var abc = 2 * Math.sqrt(a + b + c);
    var a2  = Math.sqrt(a);
    var a32 = 2 * a * a2;
    var c2  = 2 * Math.sqrt(c);
    var ba  = b / a2;

    return (a32 * abc + a2 * b * (abc - c2) + (4 * c * a - b * b) * Math.log((2 * a2 + ba + abc) / (ba + c2))) / (4 * a32);
};

function quadratic(t, x, y, z) {
  var ti = 1 - t;
  var ts = ti * ti;
  return ts * x + 2 * ti * t * y + t * t * z;
}

function cubic(t, w, x, y, z) {
  var ti = 1 - t;
  var ts = ti * ti;
  // linear combination of two quadratic curves
  return ti * (ts * w + 2 * ti * t * x + t * t * z) + t * (ts * w + 2 * ti * t * y + t * t * z);
}

ctx.fillStyle = '#F00000';
ctx.beginPath(); ctx.arc(s.x,s.y,2,0,Math.PI*2); ctx.stroke();
ctx.beginPath(); ctx.arc(e.x,e.y,2,0,Math.PI*2); ctx.stroke();
ctx.beginPath(); ctx.arc(c.x,c.y,2,0,Math.PI*2); ctx.stroke();
ctx.beginPath(); ctx.arc(d.x,d.y,2,0,Math.PI*2); ctx.stroke();
ctx.beginPath(); ctx.arc(f.x,f.y,2,0,Math.PI*2); ctx.stroke();

for(var x, y, t = 0; t < 1; t += 0.01) {
  
  x = quadratic(t, s.x, c.x, e.x);
  y = quadratic(t, s.y, c.y, e.y);
  ctx.fillStyle = '#111111';
  ctx.fillRect(x,y,1,1);
  
  x = cubic(t, s.x, d.x, f.x, e.x);
  y = cubic(t, s.y, d.y, f.y, e.y);
  ctx.fillStyle = '#00FF00';
  ctx.fillRect(x,y,1,1);
}