【数学＆プログラミング教材】ベジュ曲線の作図｜Excel VBA
- yuji fukami
- 4 日前
- 読了時間: 8分
＜概要 ベジュ曲線の作図＞
本記事は、実際の受託案件をもとに作成した**「数学教材 × プログラミング学習」**を兼ねた解説記事です。
今回ご紹介する内容は、ココナラ経由で継続的にご依頼をいただいている数学教材制作案件の一環として作成したもので、テーマは ベジェ曲線の計算方法と、その実装方法 です。
単に数式としてベジェ曲線を学ぶのではなく、Excel VBA を使って実際に曲線を作図することで、
ベジェ曲線がどのような計算で成り立っているのか
制御点をどう扱うと曲線が変化するのか
プログラム上でどのように計算・描画されているのか
といった点を、視覚的かつ実装ベースで理解できる教材として構成しています。
記事内では、Excel VBA で構築したベジェ曲線作図ツールを例に取り上げ、添付画像のように 制御点と曲線の関係を確認しながら、計算の流れと実装の考え方を順を追って解説していきます。
本記事の目的は、「ゼロから完全に自作できるようになること」ではなく、
ベジェ曲線とは何か
どのような計算で曲線が描かれているのか
それを Excel VBA ではどう実装するのか
といった 技術的な全体像を理解することにあります。
数学としてのベジェ曲線と、プログラミングによる曲線作図の橋渡しとして、教材・学習用の参考資料として活用していただければ幸いです。
＜ベジュ曲線の計算式＞
＜サンプルマクロのダウンロード＞
本記事で解説しているベジュ曲線の作図は、Excel VBAを使って実際に動作する形で実装しています。
サンプルマクロは、以下からダウンロードできますので、まずは実際に動かしながら確認してみてください。
なお、この時点ではコードの中身をすべて理解する必要はありません。
後半の「ベジュ曲線の実装｜Excel VBA」パートで、処理の流れや考え方を含めて、全体の構造をあらためて解説しています。
「まず触ってみる → 後から仕組みを理解する」という流れで読み進めてもらうことを想定していますので、学習用・検証用としてぜひ活用してみてください。
＜ベジュ曲線の実装｜Excel VBA＞
ここからは、Excel VBA を使って実際にベジェ曲線を実装していく流れについて説明していきます。
まず完成形として、Excel VBA で構築したベジェ曲線作図ツールの動作を下記の動画で紹介します。
このツールでは、ワークシート上に配置した特定の四角形シェイプをキャンバスとして扱う仕組みになっています。
キャンバス内をクリックすると、
黒い点が「通過点」
赤い点が「制御点」
として順番に配置されていき、それらの点情報をもとに ベジェ曲線が自動的に計算・作図されます。
また、単に描画するだけでなく、
制御点や通過点をドラッグして移動する
点の位置が変更されるたびに曲線を再計算する
といった動作にも対応しており、点を動かす → 曲線が即座に描き直されるというインタラクティブな仕組みになっています。
登録しているマクロ一覧
本ツールでは、キャンバス用の図形やボタンに、それぞれ専用のマクロを登録しています。コードの解説に入る前に、まずは どの操作に、どのマクロが紐づいているのか を整理しておきます。
今回使用しているマクロは、主に次の 3 つです。
キャンバス：「S_図形クリックで点作図」
→ キャンバスをクリックした位置に点（円）を作図する
作図しなおし：「S_ベジュ曲線作図」
→ 既存の点情報をもとに、ベジェ曲線を再計算・再作図する
すべての点消去：「S_全ての点消去」
→ 点・接続線・ベジェ曲線をまとめて削除する
これらのマクロを組み合わせることで、「クリックして点を置く → 曲線が描かれる → 点を動かすと曲線が更新される」という一連の動作を実現しています。
実装の全体構成について
ここからは、実際に どのような流れでベジェ曲線を作図しているのか を、コードの重要な部分に絞って解説していきます。
解説は、次の 4 つの機能に分けて進めます。
①クリックした位置に点（円）を作図する
②通過点と制御点の順番取得
③ベジュ曲線の作図
④4点からベジュ曲線の座標を計算する処理
①クリックした位置に点（円）を作図する
最初の入口となる処理が、キャンバスをクリックした位置に「点」を作図するマクロです。下図の赤枠部分が、この処理の要点になります。
まず、上側の赤枠ではクリック時点のカーソル座標を取得しています。ここでは GetXYDocumentFromCursor(False) を使い、現在のマウス位置（X・Y座標）をまとめて取得しています。セル座標やシート上の位置計算を自前で組む必要がなく、クリック位置をそのまま作図処理へ渡せる点がポイントです。※この座標取得の仕組みは、別記事で詳しく解説しています。
GetXYDocumentFromCursor → https://www.softex-celware.com/post/getxydocumentfromcursor
次に、下側の赤枠では取得した座標に「点」を作図しています。実体としては「半径4の円（小さな丸）」を描画しており、ここでは汎用プロシージャ DrawCircle を利用しています。
DrawCircle(CursorXY.X, CursorXY.Y, 半径, Sheet) のように呼び出すだけで円シェイプを作成できるため、円を描くための座標調整やシェイプ設定を毎回書かずに、シンプルに実装できます。※円の作図（DrawCircle）の詳細も別記事で解説しています。
DrawCircle → https://www.softex-celware.com/post/drawcircle
このマクロが実行されるたびに、新しい点が1つずつ追加され、追加後は自動でベジュ曲線の再計算処理が呼び出されるため、クリック操作だけで曲線を更新できる構成になっています。
②通過点と制御点の順番取得
ベジュ曲線の作図では、「通過点 → 制御点 → 制御点 → 通過点」という 4点1セットの並びを繰り返しながら点を配置していきます。
実際の操作を動画で見ると分かるように、何も点がない状態からクリックを始めると、点は次の順番で追加されます。
1点目：通過点（黒）
2点目：制御点（赤）
3点目：制御点（赤）
4点目：通過点（黒）
5点目：制御点（赤）
6点目：制御点（赤）
7点目：通過点（黒）
8点目：制御点（赤）
…
このように、1・4・7・…番目が通過点、それ以外は制御点、という一定のルールで点の種類が切り替わっています。
この判定を行っているのが、Judge_147 関数です。この関数では、「すでに作成されている点の個数」をもとに、次に追加する点が 通過点か制御点か を自動的に判定しています。
具体的には、削除済み（または作成済み）の点の個数に1を足した番号を基準にし、その番号が1・4・7・…といった位置に該当する場合は通過点、それ以外の場合は制御点として扱います。
これにより、ユーザーは「今は通過点を置く」「次は制御点を置く」といったことを意識する必要がなく、クリック操作だけで直感的に点を配置できるようになっています。
点の並びルールをコード側に集約することで、操作性とロジックの両立を実現している点が、この仕組みのポイントです。
③ベジュ曲線の作図
この処理では、すでに配置されている「通過点」と「制御点」をもとに、ベジュ曲線全体を再計算し、シート上に描き直しています。
具体的な流れは、次の4ステップです。
1つ目は、シート上に作図済みの点（通過点・制御点）を一覧として取得する処理です。ここでは GetShapeByNameLike を使い、点シェイプのみをまとめて取得しています。同時に UBoundEmpty0 を利用することで、点が存在しない場合は早期に処理を終了しています。
GetShapeByNameLike → https://www.softex-celware.com/post/getshapebynamelike
UboundEmpty0 → https://www.softex-celware.com/post/uboundempty0
2つ目は、取得した点を「4点1組（通過点 → 制御点 → 制御点 → 通過点）」として順番に取り出し、ベジュ曲線を構成するための座標を計算する準備です。この段階では、まだ作図は行わず、計算結果を配列として蓄積していきます。
3つ目は、作図前の初期化処理です。すでに描かれているベジュ曲線がある場合は、DeleteShapeNameLike を使って一旦削除し、再描画できる状態に戻します。
DeleteShapeNameLike → https://www.softex-celware.com/post/deleteshapenamelike
4つ目で、すべての座標が揃ったあとに、DrawPolyLineAddPolyLine を使ってベジュ曲線を1本のポリラインとして作図します。この順番により、クリック操作のたびにベジュ曲線が常に最新の状態で描き直される構成になっています。
DrawPolyLineAddPolyLine → https://www.softex-celware.com/post/drawpolylineaddpolyline
4点からベジュ曲線の座標を計算する処理
UnionArray2D_UL → https://www.softex-celware.com/post/unionarray2d_ul
点シェイプから位置ベクトルを定義する処理
ベジュ曲線の計算では、点の位置を「X・Y座標」ではなく位置ベクトルとして扱っています。
ここでは、点シェイプの中心座標を取得し、それを clsVector2D クラスのインスタンスとして定義しています。
2次元ベクトルクラスモジュール clsVector2D → https://www.softex-celware.com/post/clsVector2d
シェイプの Top・Left・Width・Height から中心座標を求め、その値をベクトルとして設定することで、ベジュ曲線の計算式をそのままコード上で表現できるようになります。
この仕組みにより、数式で表したベジュ曲線の定義と、VBA上の計算処理が1対1で対応する形となり、可読性と拡張性の高い実装になっています。
④全ての点消去
最後に用意しているのが、作図状態をリセットするための「全ての点消去」 ボタンです。
この処理では、シート上に作図された
点（円）
点をつないだ接続線
ベジュ曲線
をまとめて削除し、キャンバスを初期状態に戻します。
実装自体は非常にシンプルで、DeleteShapeNameLike という汎用プロシージャを使い、シェイプ名に含まれる文字列を条件に削除しています。
DeleteShapeNameLike → https://www.softex-celware.com/post/deleteshapenamelike
＜ソースコード＞
最後に、本記事で解説してきたExcel VBA の実装ソースコード一式を掲載します。
本ツールの VBA プロジェクト構成は、プロジェクトエクスプローラー上では、下記のような構成になっています。
標準モジュールは、
Mod01_ベジュ曲線作図
Mod99_アドインから
の 2 つに分かれており、ベジェ曲線の作図処理本体と、汎用的に使っている共通処理を分離しています。
また、クラスモジュールとしてclsVector2D を使用しており、ベクトル演算（加算・乗算など）をクラスとして扱うことで、ベジェ曲線の計算処理をできるだけ分かりやすく記述しています。
以下では、それぞれのモジュールについて、実際に使用しているソースコードをそのまま掲載しています。全体の流れを振り返りながら、参考資料としてご覧ください。
