20181105 贝塞尔曲线绘制

看到一个数学公式，坐在那里干干看着，一直也不明白，有什么意思，所以就画一下试试。♪(^∇*)

二次贝塞尔曲线

    // 公式 B(t)=(1-t)^2*P0 + 2*t*(1-t)P1 + t^2*P2; t∈[0,1]
    // P0:startPoint, P1:controlPoint, P2:endPoint
    let factory = new CanvasCtx('#canvas2');
    const {
      ctx, width, height
    } = factory;

    let quadraticBezierCreator = (p0, c1, p1) => {
      return (t = 1) => (1 - t) * (1 - t) * p0 + 2 * t * (1 - t) * c1 + t * t * p1
    };

    let p0, c1, p1;
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.fillStyle = '#000';

    let t = 0, x, y;

    function render() {

      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = '#0f0';
      ctx.arc(...p0, 5, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(...p1, 5, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = '#f00';
      ctx.arc(...c1, 5, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();

      ctx.save();
      ctx.fillStyle = '#000';
      ctx.beginPath();
      ctx.arc(x(t), y(t), 2, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();

      t += 0.01;
      if (t <= 1) {
        requestAnimationFrame(render)
      } else {
        t = 0;

        setTimeout(function () {
          ctx.save();
          ctx.strokeStyle = '#f00';
          ctx.lineWidth = 5;
          ctx.beginPath();
          ctx.moveTo(...p0);
          ctx.quadraticCurveTo(...c1, ...p1);
          ctx.stroke();
          ctx.restore();
        }, 100);
      }
    }


    select('#render1').onsubmit = e => {
      e.preventDefault();

      p0 = select('#sp1').value.split(',').map(d => parseFloat(d));
      c1 = select('#cp1').value.split(',').map(d => parseFloat(d));
      p1 = select('#ep1').value.split(',').map(d => parseFloat(d));

      x = quadraticBezierCreator(p0[0], c1[0], p1[0]);
      y = quadraticBezierCreator(p0[1], c1[1], p1[1]);

      ctx.fillStyle = 'rgba(255,255,255,0.3)';
      ctx.clearRect(0, 0, width, height);

      render();
    }

二次贝塞尔.gif

二次贝塞尔曲线_20181105185358.png

三次贝塞尔曲线

    // B(t) = P0*(1-t)^3 + 3*P1*t*(1-t)^2 + 3*P2*t^2*(1-t) + P3*t^3; t∈[0,1]
    // P0:startPoint, P1:controlPoint1, P2:controlPoint2, P3:endPoint
    const pow = Math.pow;
    const bezierCurveCreator = (p0, p1, p2, p3) => t => {
      return p0 * pow((1 - t), 3) + 3 * p1 * t * pow((1 - t), 2) + 3 * p2 * t * t * (1 - t) + p3 * pow(t, 3)
    };

    const {ctx, width, height} = new CanvasCtx('#canvas3');

    let p0, p1, cp1, cp2, x, y, t = 0;
    ctx.fillStyle = '#000';

    function render2() {

      // start end
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = '#0f0';
      ctx.arc(...p0, 5, 0, Math.PI * 2);
      ctx.arc(...p1, 5, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();

      // control
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = '#f00';
      ctx.arc(...cp1, 5, 0, Math.PI * 2);
      ctx.arc(...cp2, 5, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();

      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = '#000';
      ctx.arc(x(t), y(t), 2, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
      t += 0.01;
      if (t <= 1) {
        requestAnimationFrame(render2);
      } else {
        t = 0;
        setTimeout(function () {
          ctx.save();
          ctx.strokeStyle = '#f00';
          ctx.lineWidth = 5;
          ctx.beginPath();
          ctx.moveTo(...p0);
          ctx.bezierCurveTo(...cp1, ...cp2, ...p1);
          ctx.stroke();
          ctx.restore();
        }, 100);
      }

    }

    function getValues(selector) {
      return select(selector).value.split(',').map(d => parseFloat(d))
    }

    select('#render2').onsubmit = e => {
      e.preventDefault();
      p0 = getValues('#sp2');
      p1 = getValues('#ep2');
      cp1 = getValues('#cp2-0');
      cp2 = getValues('#cp2-1');

      x = bezierCurveCreator(p0[0], cp1[0], cp2[0], p1[0]);
      y = bezierCurveCreator(p0[1], cp1[1], cp2[1], p1[1]);

      ctx.clearRect(0, 0, width, height);
      render2();
    }

三次贝塞尔.gif

三次贝塞尔曲线_20181105185730.png

代码终究是一个实践的艺术，所以还是得动起来。 O(∩_∩)O哈哈~
白日欺人，难逃清夜之鬼报；红颜失志，空贻皓首之悲伤。 ------ 《菜根谭》

====
https://www.cnblogs.com/hyb1/p/3875468.html 动画图片来源
====