大きさゼロの「点」に、幅・長さ・面積・体積を与えてみた ― Processingの point() だけで立ち上げる次元の実験【WSN : L-011~L-015】

2026年11月6日

大きさゼロの点に幅・長さ・面積・体積を与えて次元を立ち上げるProcessingの実験記事のアイキャッチ画像

URLをコピーしました！

アイキャッチ画像のコード（Processing）
【WSN : L-011】

void setup() {
  size(1600, 900);
  pixelDensity(2); // Retina / 高解像度ディスプレイ用に輪郭をくっきりさせる（不要なら削除可）
  background(245);
  stroke(20);
  
  // 1600×900のキャンバスに合わせて余白と間隔を黄金バランスに調整
  float startX = 240;
  float stepX = 224; // 6個の点が左右均等に収まる間隔
  
  // 左から右へ、点に少しずつ「幅」を与えていく
  for (int i = 0; i < 6; i++) {
    float x = startX + i * stepX;
    // 元のサイズ比（幅600に対して最大32）を1600幅にスケーリング（約2.6倍）
    float weight = pow(2, i) * 2.6; 
    strokeWeight(weight);
    point(x, height / 2);
  }
  

  /* 
  // デスクトップにPNG画像を自動保存（Windows / Mac 両対応）
  String desktopPath = System.getProperty("user.home") + "/Desktop/eyecatch_point_width.png";
  save(desktopPath);
  println("保存完了: " + desktopPath);
  */
  
}

Copy

void setup() {
  size(1600, 900);
  pixelDensity(2); // Retina / 高解像度ディスプレイ用に輪郭をくっきりさせる（不要なら削除可）
  background(245);
  stroke(20);
  
  // 1600×900のキャンバスに合わせて余白と間隔を黄金バランスに調整
  float startX = 240;
  float stepX = 224; // 6個の点が左右均等に収まる間隔
  
  // 左から右へ、点に少しずつ「幅」を与えていく
  for (int i = 0; i < 6; i++) {
    float x = startX + i * stepX;
    // 元のサイズ比（幅600に対して最大32）を1600幅にスケーリング（約2.6倍）
    float weight = pow(2, i) * 2.6; 
    strokeWeight(weight);
    point(x, height / 2);
  }
  

  /* 
  // デスクトップにPNG画像を自動保存（Windows / Mac 両対応）
  String desktopPath = System.getProperty("user.home") + "/Desktop/eyecatch_point_width.png";
  save(desktopPath);
  println("保存完了: " + desktopPath);
  */
  
}

今回の記事の目的

「理想の点」と「現実の点」のギャップを体感する
- ユークリッド幾何学では「大きさゼロ」と定義される点に、あえて「幅・長さ・面積・体積」を与えたとき、画面上で何が起きるのかを実験する。
point() だけで4つの次元（幅・長さ・面積・体積）を描き切る
- line() や rect()、sphere() を使わず、すべて point(x, y) の集まりだけで幾何学の次元が立ち上がる様子をコードで再現する。
クリエイティブコーディングにおける「粒（粒子）」の表現力を高める
- ただの座標データだった「点」に重みや物質感を与えることで、メディアアートやジェネラティブ表現の引き出しを広げる。

ワタタク

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

こちらの記事（【幾何学×Processing】第2回：世界を作る最小の部品「点」の正体とは？）で、古代ギリシャの数学者ユークリッドが言い放った「点とは、部分（幅・長さ・面積・体積）を持たないものである」という定義をご紹介しました。

数学の世界では、点は「大きさゼロの位置情報」です。

でも、実際に手元の方眼ノートにペン先を落とすとインクの粒が滲みますし、Processingで point(x, y); を書けば画面にピクセルの「大きさ」が現れます。

「理論上は大きさゼロなのに、手を動かして描くと、どうしても幅も長さも面積も体積も生まれてしまう」

ならばいっそ、その「現実の点」の性質を逆手にとって、point() だけを使って「幅・長さ・面積・体積」をすべて表現してみようというのが今回の実験です。

point()の基本的な使い方を知りたい人は以下の記事でどうぞ。

「大きさゼロの点」と「物質としての点」の境界線

数学の頭の中にある点は、どんなに拡大してもサイズがありません。

しかし、私たちが画面や紙の上に表現しようとした瞬間、点は「光を放つピクセル」や「紙に染み込むインク」という物質になります。

クリエイティブコーディングの面白さは、まさにこの「抽象的な数式（大きさゼロの座標）」が「具体的な視覚（大きさのある粒）」に変換される瞬間にあります。

今回は、line()（線）も rect()（四角）も ellipse()（円）も封印します。

使う図形命令は point() ただ1つ。ここから「幅・長さ・面積・体積」を順番に立ち上げていきます。

【実験1：幅】strokeWeight() で点に「太さ（幅）」を与える【WSN : L-012】

まずは一番シンプルな実験です。大きさゼロの点に、あえて「幅（直径）」を持たせてみます。

Processingのpoint関数とstrokeWeightを使い、左から右へ徐々に幅（太さ）を持たせた6つの黒い点の比較図 — 【WSN : L-012】

void setup() {
  size(600, 300);
  background(245);
  stroke(20);
  
  // 左から右へ、点に少しずつ「幅」を与えていく
  for (int i = 0; i < 6; i++) {
    float x = 80 + i * 85;
    float weight = pow(2, i); // 1, 2, 4, 8, 16, 32 と幅を広げる
    strokeWeight(weight);
    point(x, height / 2);
  }
}

Copy

void setup() {
  size(600, 300);
  background(245);
  stroke(20);
  
  // 左から右へ、点に少しずつ「幅」を与えていく
  for (int i = 0; i < 6; i++) {
    float x = 80 + i * 85;
    float weight = pow(2, i); // 1, 2, 4, 8, 16, 32 と幅を広げる
    strokeWeight(weight);
    point(x, height / 2);
  }
}

観察結果

左端の strokeWeight(1) は、まだ数学の「位置情報」に近い繊細な粒です。

しかし右へ行くにつれ、point() は「位置を示す目印」から、画面の中で空間を占有する「丸い塊（幅を持つ存在）」へと変貌します。

ワタタク

コードの中身は同じ point(x, y); なのに、幅が32ピクセルになった瞬間、もう「点」ではなく「円（面）」に見えてきますね。

【実験2：長さ】点を並べて「長さ（線）」を立ち上げる【WSN : L-013】

次は、1つでは長さを持たない点に「長さ」を与えます。

やり方はシンプルで、点を少しだけ位置をズラしながら連続で打ち続けることです。

Processingのpoint関数で300個の点を1ピクセル間隔で横に連続配置し、長さを持つ直線として表現した実行画面 — 【WSN : L-013】

void setup() {
  size(600, 300);
  background(245);
  stroke(20);
  strokeWeight(3);
  
  // 点を1ピクセルずつ横にズラしながら300個打つ
  for (int x = 150; x < 450; x++) {
    point(x, height / 2);
  }
}

Copy

void setup() {
  size(600, 300);
  background(245);
  stroke(20);
  strokeWeight(3);
  
  // 点を1ピクセルずつ横にズラしながら300個打つ
  for (int x = 150; x < 450; x++) {
    point(x, height / 2);
  }
}

観察結果

見た目は完全に1本の直線ですが、コンピュータの中では line() ではなく、300個の独立した point() が肩を並べて立っているだけです。

さらにこの間隔（x++ の歩幅）を x += 5 に広げると、途端に「線」が崩壊して「点線（点の列）」に戻ります。

Processingのpoint関数で点を横に連続配置し、少し感覚が空いているので点線になっている

「点と点の距離が人間の目の解像度を下回ったとき、点は『長さ』を手に入れる」という幾何学のマジックがここで起きています。

【実験3：面積】点を敷き詰めて「面（広がり）」を作る【WSN : L-014】

幅と長さができたら、次は縦と横の2方向に点を敷き詰めて「面積」を生み出します。

ただベタ塗りするのではなく、点と点の密度（間隔）を変えることで、面の「濃淡」や「質感」まで表現できます。

Processingのpoint関数で5000個の点をランダムに密集配置し、輪郭線なしで正方形の面積を浮かび上がらせた実行画面 — 【WSN : L-014】

void setup() {
  size(600, 400);
  background(245);
  stroke(20);
  strokeWeight(2);
  
  // 200×200の領域に、ランダムに5,000個の点を打って「面積」を作る
  for (int i = 0; i < 5000; i++) {
    float x = random(200, 400);
    float y = random(100, 300);
    point(x, y);
  }
}

Copy

void setup() {
  size(600, 400);
  background(245);
  stroke(20);
  strokeWeight(2);
  
  // 200×200の領域に、ランダムに5,000個の点を打って「面積」を作る
  for (int i = 0; i < 5000; i++) {
    float x = random(200, 400);
    float y = random(100, 300);
    point(x, y);
  }
}

観察結果

枠線（輪郭）を1ミリも描いていないのに、5,000個の点が集まることで、画面の中央に「200×200の正方形の面積」がくっきりと浮かび上がります。

銅版画（エッチング）や点描画と同じ原理。

「面とは、無数の点が密集して生まれた『領域の記憶』である」ということが、コードを書くと直感的に腑に落ちます。

【実験4：体積】点の密度と重なりで「立体（3Dの質量）」を表現する【WSN : L-015】

最後は、いよいよ「体積（3次元の厚みと質量）」です。

Processingの3Dモード（P3D）を使い、球体の内部や表面に無数の point(x, y, z) を配置してみます。

Processingの3Dモード（P3D）とpoint関数を使い、4000個の半透明な白い点を球体空間に配置して体積と質量を表現した実行画面 — 【WSN : L-015】

void setup() {
  size(600, 600, P3D);
  background(20);
  stroke(255, 180); // 少し透ける白にして、奥の点の重なりを見せる
  strokeWeight(2);
  
  translate(width / 2, height / 2, 0);
  
  // 半径180の球体の空間に、4,000個の「体積を持つ点」を散りばめる
  for (int i = 0; i < 4000; i++) {
    // 球面上のランダムな角度と、中心からの距離（0〜180）を計算
    float theta = random(TWO_PI);
    float phi = acos(random(-1, 1));
    float r = 180 * pow(random(1), 1.0 / 3.0); // 内部まで均一に詰める数式
    
    float x = r * sin(phi) * cos(theta);
    float y = r * sin(phi) * sin(theta);
    float z = r * cos(phi);
    
    point(x, y, z);
  }
}

Copy

void setup() {
  size(600, 600, P3D);
  background(20);
  stroke(255, 180); // 少し透ける白にして、奥の点の重なりを見せる
  strokeWeight(2);
  
  translate(width / 2, height / 2, 0);
  
  // 半径180の球体の空間に、4,000個の「体積を持つ点」を散りばめる
  for (int i = 0; i < 4000; i++) {
    // 球面上のランダムな角度と、中心からの距離（0〜180）を計算
    float theta = random(TWO_PI);
    float phi = acos(random(-1, 1));
    float r = 180 * pow(random(1), 1.0 / 3.0); // 内部まで均一に詰める数式
    
    float x = r * sin(phi) * cos(theta);
    float y = r * sin(phi) * sin(theta);
    float z = r * cos(phi);
    
    point(x, y, z);
  }
}