【幾何学×Processing 第1回】幾何学とは何か？世界を「形とルール」で捉え直すプロローグ

2026年11月6日

青を基調とした背景に幾何学的な座標軸・ワイヤーフレームとProcessingのコードが浮かぶ、幾何学×Processing第1回のアイキャッチ画像

URLをコピーしました！

今回の記事の目的

「幾何学（Geometry）」の本来の意味を直感的に理解する
なぜプログラミング（Processing）と幾何学の相性が抜群なのかを知る
数式を丸暗記せず、「構造」として世界を捉える視点を手に入れる

ワタタク

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

「幾何学」と聞くと、学生時代に習ったサイン・コサイン、合同の証明、難解な公式を思い出して「うっ……」と身構えてしまう人も多いのではないでしょうか。

でも、クリエイティブコーディングの世界で扱う幾何学は、テストで点数を取るための計算ではありません。

「目に見える形は、どんなルール（構造）で成り立っているのか？」を解き明かすための道具です。

今回はシリーズ第1回として、これから「点」「線」「面」を学んでいく前の土台となる「幾何学の正体」を、言葉とコードの視点から分かりやすく紐解いていきます。

この記事を書いた人

クリエイティブコーダー

「才能」ではなく「発見」で描く。文系・36歳からの上達ログ。

ゼロから独学でクリエイティブコーディングに挑戦し、以下の実績を達成
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
  - KITTE大阪の18メートルあるAxCROSS大型スクリーン
  - 虎ノ門ヒルズステーションタワーB2F TOKYO NODE エントランスサイネージで展示
  - UN:O（東京大手町）にある会員限定のサテライトオフィスにて2作品選出・常設展示
開始1年9ヶ月目に、虎ノ門ヒルズ49階、地上250mのインフィニティプールへ作品提供・展示

幾何学の正体：語源から本質を探る

「土地を測る」ことから始まった

幾何学は、英語で Geometry（ジオメトリー） と言います。この言葉は古代ギリシャ語の2つの単語からできています。

Geo（ゲオ） ＝地球、土地
Metry（メトリー） ＝測る、計測する

古代エジプトでは、ナイル川が毎年氾濫するたびに土地の境界線が消えてしまっていました。「どこからどこまでが誰の畑だったのか」を正確に測り直すために、杭を打ち、ロープを張り、直角や三角形の性質を使って境界を再現した——これが幾何学の始まりです。

つまり、幾何学の原点は「混沌として見えなくなった境界を、論理的なルールで正しく引き直す技術」でした。

日本語の「幾何」ってどういう意味？

日本語の「幾何（きか）」は、中国でマテオ・リッチという宣教師らが『原論』を翻訳した際、ラテン語の Geo の発音に「幾何（ジーホー）」という漢字を当てた音訳が由来と言われています。

同時に、「幾何」という漢字そのものには「幾ばくか（どれくらいあるか？＝大きさ・量）」という意味があります。形が持っている「長さ」「角度」「広さ」「比率」を問いかける学問、それが幾何学です。

デザイン・アートにおける幾何学の役割

アートやデザインにおいて、幾何学は単なる「定規で引いたような冷たい図形」ではありません。

なぜProcessing（コード）で幾何学を学ぶのか？

幾何学を紙と鉛筆だけで学ぼうとすると、途中で計算や作図の手間が壁になります。しかし、Processingというコードの環境を通すと、幾何学は「動かして遊べる実験場」に変わります。

Processingの画面は、数学でいう「直交座標（デカルト座標）」そのものです。

正方形の対角線上を横切る斜線と、その中心にある黒い点をProcessingで作成

void setup() {
  size(400, 400);
  background(240);
  
  // 1. 点を打つ（最小の幾何学）
  stroke(0);
  strokeWeight(8);
  point(200, 200);
  
  // 2. 2つの点を結んで「線」にする
  strokeWeight(2);
  line(100, 100, 300, 300);
  
  // 3. 閉じたルールで「面」を作る
  noFill();
  stroke(100);
  rect(150, 150, 100, 100);
}

Copy

void setup() {
  size(400, 400);
  background(240);
  
  // 1. 点を打つ（最小の幾何学）
  stroke(0);
  strokeWeight(8);
  point(200, 200);
  
  // 2. 2つの点を結んで「線」にする
  strokeWeight(2);
  line(100, 100, 300, 300);
  
  // 3. 閉じたルールで「面」を作る
  noFill();
  stroke(100);
  rect(150, 150, 100, 100);
}