2次ベジェ曲線の数式

Top »

ベジェ曲線は媒介変数表示で定義される。tを0~1で変化させると、曲線上の点を取得できる。

(x1,y1)始点
(x2,y2)制御点
(x3,y3)終点

x = x(t) = t^2*x3 + 2*t*(1-t)*x2 + (1-t)^2*x1
y = y(t) = t^2*y3 + 2*t*(1-t)*y2 + (1-t)^2*y1

tについて降べきの順に整理すると

x = x(t) = (x3-2*x2+x1)*t^2 + 2*(x2-x1)*t + x1
y = y(t) = (y3-2*y2+y1)*t^2 + 2*(y2-y1)*t + y1

座標取得プログラム例

function getPointQB(t,x1,y1,x2,y2,x3,y3) {
	var tp = 1 - t;
	var x = t*t*x3 + 2*t*tp*x2 + tp*tp*x1;
	var y = t*t*y3 + 2*t*tp*y2 + tp*tp*y1;
	return [x,y];
}

微分

これを微分すると、接点の角度などがわかる。

dx/dt = x'(t) = 2*(x3-2*x2+x1)*t + 2*(x2-x1)
dx/dt = y'(t) = 2*(y3-2*y2+y1)*t + 2*(y2-y1)

処理削減

dx/dt = x'(t) = 2*(t*(x3-x2)+(1-t)*(x2-x1))
dy/dt = y'(t) = 2*(t*(y3-y2)+(1-t)*(y2-y1))

function getDiffQB(t,x1,y1,x2,y2,x3,y3) {
	var tp = 1 - t;
	var dx = 2*(t*(x3-x2)+tp*(x2-x1));
	var dy = 2*(t*(y3-y2)+tp*(y2-y1));
	return Math.atan2(dy,dx);
}

2階微分

ddx/dtt = x''(t)
= 2*x3-4*x2+2*x1
= 2*(x3-2*x2+x1)
ddy/dtt = y''(t)
= 2*y3-4*y2+2*y1
= 2*(y3-2*y2+y1)

inserted by FC2 system