スプライン補間 学習・計算ツール

3次スプライン補間の計算結果だけでなく、数式の導出、条件式、行列方程式、右辺ベクトル、解ベクトル、係数表、各区間の補間式までを段階的に確認できる学習用Webアプリです。

通常スプライン補間、パラメトリックスプライン補間、閉曲線スプライン補間に対応しています。

公開ページ

• Webアプリ: https://cubic-spline-learning-tool.netlify.app/
• GitHub: https://github.com/YujiFukami/Spline_Study_WebApp

主な機能

• 点群データのテキスト入力
  • カンマ区切り、タブ区切り、空白区切りに対応
• 補間後の出力点数指定
• 補間結果のグラフ表示
• 補間後点群のCSVコピー・保存
• 通常補間、パラメトリック補間、閉曲線補間の切替
• 数式導出と実際の数値をSTEPごとに表示
• 条件式ごとの係数行列・右辺ベクトルの色分け
• 行列セル、右辺ベクトル、係数値のクリック詳細表示
• 元の点、補間曲線、補間後の点、座標ラベルの表示切替
• 参考記事と公式サイトへのリンク

対応する補間モード

通常スプライン補間

Y = f(X) として補間するモードです。

X座標が単調増加している点列を対象に、自然スプライン条件で補間します。各区間の式、区間幅、条件式、行列方程式を確認できます。

パラメトリックスプライン補間

X = x(t), Y = y(t) として補間するモードです。

X座標が単調増加でない曲線や折り返しのある曲線を扱う場合に利用できます。X(t) と Y(t) の表示成分を切り替えながら、右辺ベクトルや係数の違いを確認できます。

閉曲線スプライン補間

入力点列を閉じた輪郭として扱うモードです。

最後の点から最初の点へ戻る区間も含め、周期条件で滑らかに閉じるように補間します。最後の区間から先頭区間へ戻る特殊な条件行は、行列内で濃い色で強調表示されます。

学習表示の構成

アプリ内では、補間計算を以下の順序で確認できます。

1. 概要
2. 点列、区間幅、未知数、条件式数の整理
3. 既知の定数項 d の確認
4. 条件式の導出
5. 係数行列と右辺ベクトルの一般式
6. 入力データに基づく実際の行列・ベクトル
7. 解ベクトル
8. 各区間の係数表
9. 確定した補間式

行列の各行は、条件式の種類に応じて色分けされています。

• 終点通過条件
• 1階導関数連続条件
• 2階導関数連続条件
• 自然境界条件
• 周期条件
• 閉曲線の「最後→最初」の特殊条件

使用方法

1. アプリを開く

公開ページにアクセスするか、ローカルで index.html をブラウザで開きます。

ローカルサーバーで確認する場合:

python -m http.server 8000

その後、ブラウザで http://localhost:8000/ を開きます。

2. 補間モードを選ぶ

以下から選択します。

• 通常補間
• パラメトリック補間
• 閉曲線補間

3. 点群データを入力する

例:

0,0
1,2
2,1
3,3
4,2.5
5,4

閉曲線補間では、最後に先頭点を重複して入力する必要はありません。

4. 出力点数を指定する

「補間後の出力点数」に指定した数が、CSVに出力される点数になります。

5. 実行する

「実行」ボタンを押すと、グラフ、CSV、学習用の計算過程が更新されます。

技術構成

• HTML
• CSS
• JavaScript
• Chart.js
• MathJax

ビルドツールを使わない静的Webアプリとして構成しています。

ファイル構成

.
├── index.html
├── css/
│   └── style.css
├── js/
│   ├── spline-engine.js
│   └── ui-controller.js
├── lp/
│   └── index.html
├── favicon.svg
├── LICENSE
├── README.md
└── test.js

公開に必要な画像のみ、リポジトリ内に含めています。個人環境の作業ファイル、Excel検証ファイル、ローカルショートカットなどは公開対象に含めません。

計算エンジン

js/spline-engine.js に補間計算をまとめています。

• 通常スプライン補間
• パラメトリックスプライン補間
• 閉曲線スプライン補間
• 行列作成
• ガウス・ジョルダン法による逆行列計算
• 行列積による係数計算

js/ui-controller.js は、入力、実行、グラフ描画、学習表示、クリック詳細表示を担当します。

入力チェック

主な検証内容:

• 点数が3点以上であること
• 各行が2列であること
• X, Y が数値であること
• 通常補間では X が単調増加していること
• 同一X値の重複がないこと
• 出力点数が有効範囲内であること

参考記事

• 三次スプライン補間の導出及び Excel VBA での実装
  https://www.softex-celware.com/post/spline-excelvba

• 閉曲線のスプライン補間｜数式導出からExcel VBAで実装まで
  https://www.softex-celware.com/post/closed-spline-interpolation-excel-vba

開発元

Softex Celware
https://www.softex-celware.com/

ライセンス

このリポジトリは LICENSE に記載されたライセンスに従って公開されています。