canvas学習ノート-ベッセル曲線

3.4ベッセル曲線
canvasでは、ベッセルカーブを描くapiが2つ用意されています.

ctx.quadraticCurveTo(cpx, cpy, x, y);

二次ベッセル曲線、(cpx,cpy)制御点(x,y)終点

ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

三次ベッセル曲線,(cp 1 x,cp 1 y)制御点一,(cp 2 x,cp 2 y)制御点二,(x,y)終点
余談:
ベッセル曲線の数学的基礎は1912年に広く知られたバーンスタイン多項式である.自動車の車体を補助するための工業設計が最初に使われた.
CSS 3のtransition-timing-function属性は、値をとると三次ベッセル曲線方程式に設定できますtransition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1) .
canvas図面の例:

//   
ctx.moveTo(200, 100);
ctx.quadraticCurveTo(230, 250, 350, 200);
//   
ctx.moveTo(450, 250);
ctx.bezierCurveTo(530, 150, 650, 300, 700, 200);

青はコントロールポイント
問題1:canvasはどのように点を制御して曲線を描くのか、あるいはこれを使わない場合は、自分で曲線を描くのはどのように操作すればいいのか.
これはn次Bessel曲線の方程式です.
二(三)次方程式を重点的に見ます.
B(t)は曲線上の点、tは0~1の間で値をとり、P 0始点、P 2終点、P 1制御点
tは0~1の間から値を大きくし、B(t)は曲線上の点を取り出し、P 0からP 1に移動する

const bx = (1-t)*(1-t)*start.x + 2*t*(1-t)*control.x + t*t*end.x;
const by = (1-t)*(1-t)*start.y + 2*t*(1-t)*control.y + t*t*end.y;

問題2:私はどのように制御点がどのように選ぶべきなことを知っていて、特に終点の動態のデータを始める時(つまり、私達が使う時、よく起点P 0終点P 1だけを知っています):
これは曲線の傾きによって、可視化のニーズが選択される可能性のある方法が一致しないが、ほぼ原理が似ている.
始点と終点の 上から選択して 、次に曲線の

// curveness     (0-1)
const cp = {
  x: ( start.x + end.x ) / 2 - ( start.y - end.y ) * curveness,
  y: ( start.y + end.y ) / 2 - ( end.x - start.x ) * curveness
};

余談:
cp点の解について:
セグメントの中点:
const mid = [ ( start.x + end.x)/2, ( start.y + end.y )/2 ];
始点と終点によってベクトルvを得ることもできる.
const v = [ end.x - start.x, end.y- start.y ];
このベクトルを時計回りに90度回転させ、それに垂直なベクトルv 2を得る.
const v2 = [ v.y, -v.x ];
中間制御点の座標は(ベクトルv 2にcurvenessを乗じて中間点座標を加算)
const cp = { x: mid.x + v2.x curveness, y: mid.y + v2.y curveness} = { x:( start.x + end.x )/2 - ( start.y - end.y ) * curveness, y:( start.y + end.y )/2 - ( end.x - start.x ) * curveness}