Usage:
- Drag: Move Control Points
- Alt+Drag: Camera Pan
- Alt+Shift+drag: Camera Zoom
Color:
- Green Line: Uniform Knots
- Red Line: Chordal Knots
- Blue Line: Centripetal Knots
実装の説明
3次Catmull-Romスプライン曲線を、異なる3つのKnot列の求め方(Uniform,
Chordal, Centripetal)で描画した。色とKnot列の対応は上記の通りである。
knot間の区間をセグメントと呼ぶことにすると、そのセグメントの中を一様にユーザが指定したStep数で区切り、折線で描画した。これは二次ベジェ曲線の実装と同様の方針である。
考察
近い2制御点に挟まれたセグメント、遠い2制御点に挟まれたセグメントにおける挙動が異なった。
Uniformでは前者に近づくほど制御点から離れて膨れていく傾向にあり、後者に近づくほど制御点に近づく。Uniformでは特に右下の2点を極度に近づけると自己交差を生じた。
Chordalは円弧により近いような曲線になった。前者のセグメントほど制御点に近づき、後者のセグメントほど膨れる。
Centripetalはその中間のような特性を示した。
感想
WebGLでデモを実装することで、bezier-curve及びcatmull-rome-splineへの理解が深まり、数式の気持ちが分かった。
式を追うだけでなく、実装して、なおかつユーザが手軽にいじれるDemoを作ることの意義がわかった。
パラメトリック曲線の章は全体的に面白かった。
実装までは時間がなく取り組めなかったが、C2-interpolation,
kappa-curveなどの最新の論文も軽く参照してみた。
これらの論文は数学的なInsightが優れていて、なおかつそれが役に立つ形で示されていて非常に面白かった。