HSPTV!掲示板

制御点を自由に増減できるベジェ線を描画したいのですが、行き詰まっています。

http://rpen.blogspot.jp/2007/05/blog-post.html
まず、上記のソースコードを参考に作ってみました。
制御点が4個の場合は正常に動くのですが10個にすると形がおかしくなります。
そもそもベジェ線とはそういうものなのか、単純に作り方が悪いのか。

#module
	#deffunc 曲線計算 array x,array y,int s,double 平均化係数,array arr
		制御点数=length(x)
		制御点数_1=制御点数-1;終点は含めない。
		制御点数_2=制御点数-2;端点は含めない。
		定数=double(制御点数)-1.0
		arr.0.0=double(x.0)
		arr.1.0=double(y.0)
		ct=1.0/s
		t=ct
		k=1.0
		終点x=double(x.(制御点数_1))
		終点y=double(y.(制御点数_1))
		repeat s, 1
			t +ct
			k -ct
			lx=double(x.0)
			ly=double(y.0)
			一時x=終点x
			一時y=終点y
			repeat 制御点数_1
				lx*k
				ly*k
				一時x*t
				一時y*t
			loop
			lx+一時x
			ly+一時y
			repeat 制御点数_2,1;端点は含めない。
				一時=定数
				repeat 制御点数_1-cnt
					一時*k
				loop
				repeat cnt
					一時*t
				loop
				lx+(一時*x.cnt)
				ly+(一時*y.cnt)
			loop
			arr.0.cnt=lx
			arr.1.cnt=ly
		loop
	return
#global
#uselib "winmm.dll"
	#cfunc timeGetTime "timeGetTime"
screen 0,1000,500
制御点数=105;曲線を制御する支点の数
品質=200;曲線の品質
平均化係数=0.25;どの程度平均化するか

試行回数=100;時間測定の精度
円半径=5;描画用
ddim arr,2,品質;曲線の計算結果を代入する変数

;とりあえずランダムに作る。
repeat 制御点数
	x.cnt=(1000/制御点数)*cnt
	y.cnt=rnd(480)+10
loop
;処理時間を測定。
開始時間=timeGetTime()
repeat 試行回数
	曲線計算 x,y,品質,平均化係数,arr
loop
title "1回あたり"+(double(timeGetTime()-開始時間)/試行回数)+"ms"

repeat
	getkey k
	mx=mousex
	my=mousey
	redraw 0
		;ここから描画やドラッグの処理。
		color 255,255,255:boxf
		color 0,0,0
		if k=1 &k_bac=0:フラグ=0
		repeat 制御点数
			circle x.cnt-円半径,y.cnt-円半径,x.cnt+円半径,y.cnt+円半径
			if limit(mx,x.cnt-円半径*4,x.cnt+円半径*4)=mx & limit(my,y.cnt-円半径*4,y.cnt+円半径*4)=my & k=1 &k_bac=0:クリックct=cnt:フラグ=1
		loop
		if k=1&フラグ=1:{
			x.クリックct=mx
			y.クリックct=my
			}
		;ここまで。

		曲線計算 x,y,品質,平均化係数,arr;曲線を計算

		;描画
		pos arr.0.0,arr.1.0
		repeat 品質
			line arr.0.cnt,arr.1.cnt
		loop
	redraw 1
	k_bac=k
	await
loop

もう1種類、独自にやってみたのですが処理に時間がかかります。
2段階にわけて処理をしているのが原因だと思いますが、
これをまとめるにはどうすればいいか・・・

#module
	#deffunc 曲線計算 array x,array y,int s,double 平均化係数,array arr
		制御点数=length(x)
		制御点数_1=制御点数-1
		平均化範囲=int(平均化係数*s)
		t=double(制御点数)/s
		ddim arr2,2,s
		;間を直線的に補完して一時変数にいれる。
		repeat s
			ct_0=t*cnt
			ct_1=int(ct_0)
			ct_2=ct_0-ct_1
			ct_3=1.0-ct_2
			arr2.0.cnt=(ct_3*x.ct_1)+(ct_2*x.limit(ct_1+1,0,制御点数_1))
			arr2.1.cnt=(ct_3*y.ct_1)+(ct_2*y.limit(ct_1+1,0,制御点数_1))
		loop
		;端点だけ平均化を適用させない。
		arr.0.0=double(x.0)
		arr.1.0=double(y.0)
		arr.0.(s-1)=double(x.制御点数_1)
		arr.1.(s-1)=double(y.制御点数_1)
		;一時変数の値を平均化してarrに代入。
		repeat s-2,1
			ct=cnt
			arr.0.ct=0.0
			arr.1.ct=0.0
			repeat 平均化範囲
				arr.0.ct+arr2.0.limit(ct-cnt,0,s-1)+arr2.0.limit(ct+cnt,0,s-1)
				arr.1.ct+arr2.1.limit(ct-cnt,0,s-1)+arr2.1.limit(ct+cnt,0,s-1)
			loop
			arr.0.ct/(平均化範囲*2)
			arr.1.ct/(平均化範囲*2)
			;dialog ""+arr.0.ct+","+arr.1.ct+""
		loop
	return
#global
#uselib "winmm.dll"
	#cfunc timeGetTime "timeGetTime"
screen 0,1000,500
制御点数=4;曲線を制御する支点の数
品質=200;曲線の品質
平均化係数=0.25;どの程度平均化するか

試行回数=100;時間測定の精度
円半径=5;描画用
ddim arr,2,品質;曲線の計算結果を代入する変数

;とりあえずランダムに作る。
repeat 制御点数
	x.cnt=(1000/制御点数)*cnt
	y.cnt=rnd(480)+10
loop
;処理時間を測定。
開始時間=timeGetTime()
repeat 試行回数
	曲線計算 x,y,品質,平均化係数,arr
loop
title "1回あたり"+(double(timeGetTime()-開始時間)/試行回数)+"ms"

repeat
	getkey k
	mx=mousex
	my=mousey
	redraw 0
		;ここから描画やドラッグの処理。
		color 255,255,255:boxf
		color 0,0,0
		if k=1 &k_bac=0:フラグ=0
		repeat 制御点数
			circle x.cnt-円半径,y.cnt-円半径,x.cnt+円半径,y.cnt+円半径
			if limit(mx,x.cnt-円半径*4,x.cnt+円半径*4)=mx & limit(my,y.cnt-円半径*4,y.cnt+円半径*4)=my & k=1 &k_bac=0:クリックct=cnt:フラグ=1
		loop
		if k=1&フラグ=1:{
			x.クリックct=mx
			y.クリックct=my
			}
		;ここまで。

		曲線計算 x,y,品質,平均化係数,arr;曲線を計算

		;描画
		pos arr.0.0,arr.1.0
		repeat 品質
			line arr.0.cnt,arr.1.cnt
		loop
	redraw 1
	k_bac=k
	await
loop

1つめのソースコードを改良してキレイなベジェ線を書くのが理想的なのですが、
自分では間違いを見つけることができませんでした。
申し訳ありませんが、皆様の知恵をお貸しいただけないでしょうか。
宜しくお願いします。

サンプルを動作させると、フリーズして応答なしになるので見れませんでした。
誰も返答無いようだし、私の説明できる範囲で（＾＾；

アドビのイラストレーターなどを触ると分かるのですが
基本的に１つの座標点から生える制御点は２つです。
２つのうち、1つはその点から先の曲線（次の点）に影響を与える制御点。
もう１つは、その点から前の曲線(前の点）に影響を与える制御点です。
なので、１つの曲線には多くても制御点が２つあれば十分でしょう。

それ以上に制御点を（プログラム的には）増やすこともできるのでしょうが、さらに曲線を増やしたい場合
制御点ではなく、座標点を増やす考え方の方が良いのではないでしょうか。

私もゲームにペジェ曲線を取り入れてみたいと、つい先日ネットを検索していたので
個人的にはタイムリーな話題でした。（＾＾

あぁ、ベジェ曲線と聞いたので普通によくあるコンピュータグラフィクス用途の3次ベジェ曲線の方かと思ったんですが、
本来の定義のN次のベジェ曲線の方なんですね。なるほど、面白そうですね。

とりあえず、ベジェ曲線は定義式を見れば分かる通り両端の点を通る曲線なので、少なくとも1つ目に提示して頂いたコードは結果が間違っています。

2つ目の方は両端は通ってますが、これだけ制御点が多い状況で一つの制御点を修正した際に曲線が動く範囲が広すぎますし、
制御点の分布に従ってカーブが緩やかに繋がるのが特徴となる曲線なので、何か違う…気がします。。。
（…実はN次のベジェ曲線は見たことないので正確な事は言えないです（笑））

ひとまず1つ目のコードはどこが間違っているんだろうかと追おうと思ったんですが、
日本語が入っているコードは精神的に受け付けなかったので、すみませんがどこが悪いかは分からないです…。
（ごめんなさい、普段そういうコード書いてないからだとは思うのですが、読んでも本当に何も頭に入ってこなかったので、自分でも少し驚いてます…）

2つ目も同様に読めなかったので、ひとまずこちらからお力になれるのはこれしかないと、
シンプルにベジェ曲線を求めるコードを書いてみました。

これもフルスクラッチなので合ってる保証はないですが、ほぼ定義通りに書いているのと、
普段イラレ等で使っているベジェ曲線の感覚からするとでこれかなぁ、という感触です。

コード的に最適化の余地はかなり有りますが、今の着眼点はそこではないので速度は置いといて、
リファレンス結果としては有用ではないかと思ってます。

//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
#module

// ベジェ曲線のt[0, 1]の座標
#deffunc bezier var p_out_x, var p_out_y, int p_control_point_num, array p_control_point_x, array p_control_point_y, double p_t, local l_n
	p_out_x = 0.0 : p_out_y = 0.0
	repeat p_control_point_num
		l_n = ipow(p_t, cnt) * ipow(1.0 -p_t, p_control_point_num -1 -cnt) * binomialCoef(p_control_point_num -1, cnt)
		p_out_x += l_n * p_control_point_x(cnt)
		p_out_y += l_n * p_control_point_y(cnt)
	loop
return

// yがint固定の累乗
#defcfunc ipow double p_x, int p_y, local l_res
	// この辺適当
	if (p_y <= 0) : return 1.0
	// ループる
	l_res = 1.0 : repeat p_y : l_res *= p_x : loop
return l_res

// 二項係数
#defcfunc binomialCoef int p_n, int p_k, local l_res
	// やばそうなのは適当に弾く
	if (p_k <= 0) : return 1.0
	// ちゃんと計算
	l_res = 1.0
	repeat p_k
		l_res *= double(p_n - cnt) /double(p_k - cnt)
	loop
return l_res

#global

//------------------------------------------------------------------------------
//------------------------------------------------------------------------------
#define SCR_WIDTH			(1000.0)
#define SCR_HEIGHT			(480.0)

screen 0, SCR_WIDTH, SCR_HEIGHT

control_point_num = 105// 制御点の数
division = 200// 分割数

// ランダムに制御点を生成する
ddim control_point_x, control_point_num
ddim control_point_y, control_point_num
repeat control_point_num
	control_point_x(cnt) = (SCR_WIDTH / control_point_num) * cnt
	control_point_y(cnt) = rnd(SCR_HEIGHT) + 10.0
loop

// 可視化
circle_radius = 4.0
dragging_point_idx = -1

repeat
	// ドラッグしたり
	getkey ml, 1
	mx = double(mousex) : my = double(mousey)

	if (((ml ^ prev_ml) != 0) && (ml != 0)) {
		dragging_point_idx = -1
		repeat control_point_num
			dx = absf(mx - control_point_x(cnt))
			dy = absf(my - control_point_y(cnt))
			dl2 = dx*dx + dy*dy
			if (dl2 < circle_radius*circle_radius) : dragging_point_idx = cnt
		loop
		prev_mx = mx : prev_my = my
	}

	if (dragging_point_idx != -1) && (ml != 0) {
		control_point_x(dragging_point_idx) += (mx - prev_mx)
		control_point_y(dragging_point_idx) += (my - prev_my)
	}

	prev_ml = ml
	prev_mx = mx : prev_my = my

	// ここから描画
	redraw 0
		color 255, 255, 255 : boxf

		// 線引く
		color 128, 128, 128
		repeat control_point_num -1
			line control_point_x(cnt+1), control_point_y(cnt+1), control_point_x(cnt), control_point_y(cnt)
		loop
		// 制御点描く
		color 0, 0, 0
		repeat control_point_num
			circle control_point_x(cnt)-circle_radius, control_point_y(cnt)-circle_radius, control_point_x(cnt)+circle_radius, control_point_y(cnt)+circle_radius
		loop
		// ベジェ曲線描く
		color 255, 128, 128
		cur_x = 0.0 : cur_y = 0.0
		repeat division
			t = double(cnt) / double(limit(division-1, 1, division))
			bezier cur_x, cur_y, control_point_num, control_point_x, control_point_y, t
			if (cnt) {
				line cur_x, cur_y
			} else {
				pos cur_x, cur_y
			}
		loop

	redraw 1
	await 20
loop

詳しくないのであまりちゃんとした回答出来なくて申し訳ないですが、何かの参考になれば。

お二人とも、返信有難うございます。
>>サンプルを動作させると、フリーズして応答なしになるので見れませんでした。
私が貼ったソースコードの「制御点数=105;曲線を制御する支点の数」の部分、105ではなく10の間違いでした。
恐らくこれと、処理時間を測定する処理に時間がかかって応答なしになったものと思われます。
以後、このようなミスがないよう気を付けます。

>>日本語が入っているコードは精神的に受け付けなかった
変数に日本語が使える言語は少ないので、やはり違和感を覚える方は多いんですかね。
皆さんが見る掲示板に貼る時は気を付けます、貴重なご意見ありがとうございました。

3kさんが貼っていただいたソースコード、さっそく実行してみました。
理想通りのベジェ線で感動しています。
こういうベジェ線はN次ベジェ線というんですね、勉強になりました。

皆さんのおかげで目的は達成できたので、この質問は解決とします。
お二人とも、本当にありがとうございました。

＞ソラさん
サンプル提示の際は、それが動作できないと回答率下がるような気がしたので（＾＾；

＞3kさん
おお、なるほどーN次ベジェになるとこうなるんですね（＾＾
やっと３次ベジェの表現まで理解できつつあるところなので助かります。

あと、日本語変数名は確かに違和感がありますね。