3次ベジェ曲線の数式

Top »

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

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

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

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

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

座標取得プログラム例

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

微分

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

dx/dt = x'(t) = 3*(y4-3*(y3+y2)-y1)*t^2 + 6*(y3-2*y2+y1)*t + 3*(y2-y1)
dy/dt = y'(t) = 3*(y4-3*(y3+y2)-y1)*t^2 + 6*(y3-2*y2+y1)*t + 3*(y2-y1)

処理削減を図る

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

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

2階微分

ddx/dtt = x''(t)
= 6*(x4-3*(x3+x2)-x1)*t + 6*(x3-2*x2+x1)
= 6*(t*(x4-2*x3+x2)+(1-t)*(x3-2*x2+x1))
ddy/dtt = y''(t)
= 6*(y4-3*(y3+y2)-y1)*t + 6*(y3-2*y2+y1)
= 6*(t*(y4-2*y3+y2)+(1-t)*(y3-2*y2+y1))

inserted by FC2 system