three.jsおよびその React 向けのAPIを提供するreact-three-fiberを用いて、様々な曲線を実装した。
動作は macOS Catalina 10.15.3(19D76)上で動作する Google Chrome 81.0.4044.113 により確認した。
ソースコードはGithubで閲覧可能である。この課題に特に関係のあるファイルとして、task.ts、kappa.ts、R2Task.tsxが挙げられる。
課題スライドに示されたものの中では、以下のものを実装した。
3次元空間上に一般のn次ベジェ曲線を描画した。計算方法は単純な多項式評価(, (3D(カメラ操作によりy座標を確認できる)))と de Casteljau のアルゴリズム()の双方を実装した。de Casteljau のアルゴリズムを使用している際には曲線の分割操作((例B3の曲線の t≦0.7 の切り取り))も可能である。
さらに、有理ベジェ曲線も単純な多項式評価により実装した()。これにより円弧(の一部)を原理的には正確に描画できる(, 参考: id:metanest, メモ: 有理ベジェ曲線による円弧 - ksmakotoのhatenadiary)。
3次元空間上の Catmull-Rom スプラインを実装した。ノット列として Uniform ()、Chordal ()、Centripetal ()の3種を実装した。
3次元空間上の非一様有理 B-スプラインを実装した((一様), (開一様), (非一様), (非一様、有理、3D))。0除算エラーの対処は Alistair Buxton, computational geometry - Potential Division by zero in the construction of NURBS basis functions: how to handle? - Mathematics Stack Exchangeを参考にした。
講義で提示された @Rijicho_nl, UX最強のベジェ曲線「κ-Curves」を完全に理解する - Qiitaを参考に、3次元空間上の κ-Curves を実装した(, (3D、非ループ))。なお、現在は当該資料に JavaScript による実装(🐰)が掲載されているが、実装開始時にはなかったため、C# による実装を移植した。
制御点をn(平方数)個与えたとき、それを √n 個ごとに区切ったものを用いた有理ベジェ曲面の描画を実装した(, (重みつき))。計算には de Casteljau のアルゴリズムではなく、単純な多項式評価を用いた。