Piecewise Bezier curve

The degree of Bessel curve is too high , There may be a problem that computing performance and control points have little impact

Piecewise Bessel curve can solve this problem , Just solve the smoothing problem at the segment

Let's just draw a conclusion ： When the control points on both sides and the section junction point Collinear and The line segment formed Equal length when , Satisfy the smoothness of curve

Intermediate point p1.xy = (p0.xy + p2.xy) / 2

Detailed principle

 

 

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.translate(10, 10); //  Remap... On canvas  (0,0)  Location , Avoid spillovers 

function drawCircle(x, y, color, r = 6) {
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.fill();
}

function drawPath(path) {
  ctx.beginPath();
  path.forEach((p, i) => {
    if (i) {
      ctx.lineTo(p.x, p.y);
    } else {
      ctx.moveTo(p.x, p.y);
    }
  });
  ctx.stroke();
}

function bezier(pointList, t) {
  if (pointList.length === 1) {
    return pointList[0];
  } else {
    // B(t)=(1-t)Bp0p1…pn-1(t) + tBp1p2…pn(t)
    var p1 = bezier(pointList.slice(0, -1), t);
    var p2 = bezier(pointList.slice(1), t);
    var p = {
      x: (1 - t) * p1.x + t * p2.x,
      y: (1 - t) * p1.y + t * p2.y,
    };
    return p;
  }
}

//  The first curve 
var startPoint = { x: 0, y: 0 };
var endPoint = { x: 500, y: 300 };
var pointList = [
  startPoint,
  //  In the middle is the control point 
  { x: 50, y: 200 },
  { x: 450, y: 200 },
  endPoint,
];
draw(pointList, "green");

//  The second curve 
var startPoint2 = endPoint;
var endPoint2 = { x: 700, y: 100 };
var pointList2 = [
  startPoint2,
  //  In the middle is the control point 
  {
    x: startPoint2.x * 2 - pointList[2].x,
    y: startPoint2.y * 2 - pointList[2].y,
  },
  { x: 800, y: 200 },
  endPoint2,
];
draw(pointList2, "black");

function draw(pointList, color) {
  //  draw a curve 
  ctx.strokeStyle = color;
  var path = [];
  for (var i = 0; i <= 100; i++) {
    path.push(bezier(pointList, i / 100));
  }
  drawPath(path);

  var startPoint = pointList[0];
  var endPoint = pointList[pointList.length - 1];
  //  Red start and end points 
  [startPoint, endPoint].forEach((p) => {
    drawCircle(p.x, p.y, "red");
  });

  //  Blue control point 
  pointList.slice(1, -1).forEach((p) => {
    drawCircle(p.x, p.y, color);
  });
}