スプライン曲線で遊ぶサイト
を作った。The Continuity of Splines が最高の動画だったため……
https://ikr7.github.io/curves
以前やった 折れ線をなめらかにつなぐアルゴリズム を真面目に考えようと思ったので……
SVG を React で動かしている
開発メモ
曲率も表示したい
計算は簡単そう https://w3e.kanazawa-it.ac.jp/math/category/kika/heimenkika/henkan-tex.cgi?target=/math/category/kika/heimenkika/curvature_parameterization.html&pcview=2
tの関数としての曲率をベジェ曲線として描けるのか?→できそう…?
違う、そもそも曲率はスカラ値だから
スプラインに曲率を(適当なファクターを書けて)足したもの、をベジェ曲線として描きたい
それぞれの曲線や点とかを別コンポーネント化したい。props として制御点(と、端点をカクチョウした点)の配列を受け取る。-
→ほぼした
リファクタリング案
パラメータ表示された3次曲線$ p(t) = p_0 + p_1 t + p_2 t^2 + p_3 t^3 を表す型があって
type CubicCurve = [Point, Point, Point, Point]
CubicCurveを描画する関数があるdrawCubicCurve(curves: CubicCurve[]) => SVGPathElement
内部で b-スプライン曲線をベジェ曲線の集まりとして書く をやってベジェの集まりに変換する
色とかのスタイル情報は、まあ適当に…
各スプラインについて、CubicCurveの集まりに変換する関数もある
cardinal(points: Point[], scale: number) => CubicCurve[]
bSpline(points: Point[]) => CubicCurve[]
各スプラインについて、