【幾何学×Processing】第4回点と線が織りなす「三角形」の真実：内角の和180°をコードと平行線で証明する

2026年11月12日

URLをコピーしました！

記事の途中でスライダーを動かして、三角形の形がどう変わっても合計180度が崩れない様子をリアルタイムに確認できます。

今回の記事の目的

第3回『【幾何学×Processing】第3回私たちが line() で描いているのは「直線」ではない？線の定義と3つの分類』で学んだ「線分」が3つ結合することで生まれる、幾何学の最小単位「三角形」の構造的な必然性を理解する。
「三角形の内角の和は180度」という初等幾何学の定理を、丸暗記ではなく「1本の平行線と錯角のワープ」によって視覚的に納得する。
画面上の頂点座標がどれほど極端に変形しても、数学的な合計値が1ミリも揺るがない「不変の調和」をコードと図解の双方から体感する。

ワタタク

どうもクリエイティブコーダーのワタタクです。

記事の目的に書いてある第3回では、「私たちが画面上に line() で描いているものは、無限に伸びる『直線』ではなく、両端に明確な境界を持つ『線分』である」というお話をしました。数学的な厳密さを持ってピクセルと向き合うことで、コードの1行1行に宿る解像度が一段上がったのではないでしょうか。

さて、第4回となる今回のテーマは、その「線分」を3本組み合わせて初めて生まれる形「三角形」です。

2本の線分を繋いでも「角（くの字）」ができるだけですが、3本目を繋いで空間をキュッと閉じると、そこには突如として「面」と「内角」が立ち現れます。あらゆる3Dポリゴンやメッシュ構造の最小単位であり、これ以上要素を減らすことができない図形の原点です。

そして、この三角形には、私たちが小学校の算数で必ず叩き込まれる絶対のルールがあります。

「三角形の3つの内角を足すと、どんな形でも絶対に180度になる」

学校では、ノートに描いた三角形をハサミでチョキチョキ切り落とし、3つの角を突き合わせて「ほら、半円（一直線＝180度）になったでしょ！」と実験させられた記憶があるかもしれません。ですが、コードで無数の座標を扱い、時に針のように細長い三角形や巨大な三角形を動的に生成するプログラマーの視点からすると、一つの疑問が湧きます。

「たまたま手元で切った紙がそうだっただけで、動的に生成される無数の三角形すべてで例外がないと、なぜ言い切れるのか？」

ハサミで切る必要はありません。

今回は、「底辺と平行な補助線を1本走らせる」という幾何学的な視点を使うことで、なぜ三角形が180度という完璧な調和を保ち続けるのかを、Processingの思考実験とともに美しく解き明かしていきます。

そもそも三角形とは何かについてを詳しく知りたいからは以下の記事を参考にしてください。

3本の「線分」が交わるとき：空間が閉じるという大事件

第3回でお話しした通り、Processingで line(x1, y1, x2, y2) を実行したときに描かれるのは、両端が決まっている「線分（Line Segment）」です。

1本の線分：ただの「長さ」と「傾き」
2本の線分をつなぐ：向きが変わる「角（くの字）」
3本目の線分で端と端を結ぶ：空間がピタッと閉じられ、「内側」と「外側」が生まれる

Processing

// 3本の線分を結んで三角形をつくる
line(ax, ay, bx, by); // 線分AB
line(bx, by, cx, cy); // 線分BC
line(cx, cy, ax, ay); // 線分CA

Copy

// 3本の線分を結んで三角形をつくる
line(ax, ay, bx, by); // 線分AB
line(bx, by, cx, cy); // 線分BC
line(cx, cy, ax, ay); // 線分CA

3本の線分で領域を閉じた瞬間、その内側に3つの角（内角：A, B, C）が誕生します。

これが多角形（Polygon）の最小単位であり、3D空間のあらゆる立体（メッシュ）を構成する基本骨格です。

そして、この3つの角の角度をそれぞれ計算して足し合わせると、どんな形の三角形であっても、驚くべきことに必ずひとつの数値に収束します。

角A + 角B+ 角C = 180°

ハサミの実験の限界：コードの世界では通用しない

小学校の算数では、紙に描いた三角形をハサミで切り刻み、3つの角を突き合わせて「ほら、半円（一直線＝180度）になったね」と教わります。

しかし、Processingやp5.jsでジェネラティブアートを作っている私たちは知っています。

// 頂点の座標が毎フレーム乱数で激しく変動する
float ax = random(width);
float ay = random(height);

Copy

// 頂点の座標が毎フレーム乱数で激しく変動する
float ax = random(width);
float ay = random(height);

針のように極限まで尖った細長い三角形、画面の端と端にまたがる巨大な三角形、あるいはほぼ一直線に潰れかけた三角形。画面上には毎秒何千パターンもの三角形が動的に生成されます。

「紙を切って確かめる」という物理的な実験は、目の前にあるたった1枚の紙に対する確認にはなっても、「プログラムが生成し得る無数の三角形すべてで絶対に破綻しない」という保証にはなりません。

私たちが知りたいのは、個別の実験結果ではなく、「なぜそうならざるを得ないのか」という構造的なロジックです。

たった1本の「平行な補助線」が、幾何学を解き明かす

この謎を解く鍵は、ハサミではなく、たった1本の「平行線（Parallel Line）」です。

底辺となる線分BCと完全に同じ傾きを持つまっすぐな補助線 L を、頂点Aを通過するように1本スーッと引いてみてください。

// 底辺BCと平行な線を、頂点Aを通るように引くイメージ
stroke(150);
// 補助線 L の描画
line(0, ay, width, ay);

Copy

// 底辺BCと平行な線を、頂点Aを通るように引くイメージ
stroke(150);
// 補助線 L の描画
line(0, ay, width, ay);

この補助線を引いた瞬間、画面上に幾何学の美しい対称性が立ち現れます。

「Z（ゼット）」の軌跡：錯角による角度のワープ

平行な2本の線のあいだをナナメの線分（辺AB）が貫くと、アルファベットの「Z」のような形が形成されます。

このとき、平行線の性質によって、内側の折れ曲がった角度同士は完全に一致します（錯角）。

左側の辺ABを辿る：底辺にある「角B（青）」が、Zのラインを通って、頂点Aの左側の空間へそのままワープして配置されます。
右側の辺ACを辿る：今度は逆向きのZ（逆Z）ができ、底辺にある「角C（黄）」が、頂点Aの右側の空間へそのままワープして配置されます。
頂点Aの内部には：三角形の頭頂部である「角A（赤）」が最初から鎮座しています。

結果として、頂点Aの周囲には、「角B（青）＋角A（赤）＋角C（黄）」が隙間なくぴったり並ぶことになります。

そして、その3つが合体して作っている土台は何でしょうか？

私たちが最初に引いた、頂点Aを通る「まっすぐな補助線（一直線）」そのものです。

一直線は角度にして 180°（半円）

紙を切って集めなくても、「頂点Aに平行線を1本引く」という視点の転換だけで、三角形の3つの角の合計が常に180°（半円）になることが完璧に証明されます。

実際に操作してに検証する「不変の調和」【EXPLORABLE EXPLANATION】

「理屈は分かったけれど、頂点Aを極端に動かしても本当に成立するのか？」

言葉で理解した幾何学を、指先の感覚に落とし込むためのインタラクティブ図解を用意しました。

スライダーを動かして、頂点Aの座標を左右・上下に激しく揺さぶってみてください。

不変の幾何学：三角形の内角の和 = 180°

Interactive Proof

角A (赤) 角B (青) 角C (黄)

頂点Aの水平移動中央

頂点Aの高さ（三角形の変形）標準

内角の合計（角A + 角B + 角C）

–° + –° + –° = 180.0°

※頂点をどれだけ極端に動かしても、頂点Aに集まった3つの角は常に一直線（半円）を描き続けます。

スライダーを左右の限界値まで引っ張ってみてください。

三角形が極端な鈍角三角形に変形し、角Aが押しつぶされて広がっても、そのぶん角Bや角Cが鋭く縮み、頂点Aに集まった3色の扇形は常に狂いなく一直線を描き続けます。

幾何学における「証明」とは、暗記した式を唱えることではなく、「どう変形しようとも崩れない構造の必然性を目撃すること」に他なりません。

コードで味わう：ベクトルと内積で角度を取り出す

頂点Aを挟む2本の線分を、それぞれベクトル u = AB, v = ACとして捉えると、ベクトルの内積の公式から角度 θ を求めることができます。

// Processingでの内角Aの計算例（pA, pB, pC は PVector 型）
PVector vAB = PVector.sub(pB, pA); // 頂点AからBへ向かうベクトル
PVector vAC = PVector.sub(pC, pA); // 頂点AからCへ向かうベクトル

// 2つのベクトルのなす角（ラジアン）を求め、度に変換する
float angleA = degrees(PVector.angleBetween(vAB, vAC));

Copy

// Processingでの内角Aの計算例（pA, pB, pC は PVector 型）
PVector vAB = PVector.sub(pB, pA); // 頂点AからBへ向かうベクトル
PVector vAC = PVector.sub(pC, pA); // 頂点AからCへ向かうベクトル

// 2つのベクトルのなす角（ラジアン）を求め、度に変換する
float angleA = degrees(PVector.angleBetween(vAB, vAC));