直線の集合が曲線に変わる魔法。包絡線をProcessingとp5.jsで描く【WSN : L-001】

ワタタク

どうも、上達の研究家のワタタクです。

手描き×クリエイティブコーディングなど、別のジャンルを組み合わせた表現をする「Linked-logカテゴリ」。その記念すべき第一弾のL-001は、僕の原点であるアナログの練習をデジタルへ昇華させる挑戦です。かつての鉛筆画をコードで書いて、新しい表現を探究します。

すべての始まりは、このモレスキンに描いた一本一本の線と包絡線から始まりました。全部直線で描いています。

今回の記事では、以下の画像を部分的に、コードで書いていきます。

この自分で描いた鉛筆画を、クリエイティブコーディングで表現したらすごく面白そうだ。

そうした思いが、今回の記事【L-001】に繋がっています。

この記事を書いた人

上達の研究家 / アーティスト

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

• ゼロから独学でクリエイティブコーディングに挑戦し、以下の実績を達成
  • 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
  • 開始1年9ヶ月目に、虎ノ門ヒルズ49階、地上250mのインフィニティプールへ作品提供・展示
• 【表現の核：物語と画風】
  • 起源の物語：文系・未経験から虎ノ門ヒルズ展示までの全記録（Genesis）
  • 独自スタイル：傷だらけの人生を宝石に変える「ピクセルジュエル」

包絡線（Envelope）とは？

包絡線とは、たくさんのまっすぐな線が、みんなで協力して作り出す『ふちどりの線』です。

まっすぐな線だけで「カーブ」を作るマジックですね。

たとえば、ノートの端にタテの線とヨコ線を描いて、そこに番号をふります。 「タテの1番」と「ヨコの10番」を定規で結びます。次に「タテの2番」と「ヨコの9番」を結ぶ……というように、ルールを決めてどんどんまっすぐな線を引いていきます。

すると、不思議なことに、どこにも曲がった線なんて描いていないのに、線の内側にきれいなカーブ（曲線）が浮かび上がってきます。

「包絡線」は、そのカーブの名前のこと。

包絡線をProcessingとp5.jsで描く

Processing での実装コードと数式的解釈

// Processingで包絡線を描く

void setup() {
  size(400, 400);
  background(255);
  stroke(0, 50); // 透明度を下げて重なりを強調
  int steps = 20;
  for (int i = 0; i <= steps; i++) {
    // x軸上の点とy軸上の点を結ぶ
    line(i * (width/steps), 0, width, i * (height/steps));
  }
}

// Processingで包絡線を描く

void setup() {
  size(400, 400);
  background(255);
  stroke(0, 50); // 透明度を下げて重なりを強調
  int steps = 20;
  for (int i = 0; i <= steps; i++) {
    // x軸上の点とy軸上の点を結ぶ
    line(i * (width/steps), 0, width, i * (height/steps));
  }
}

p5.js での実装コードと数式的解釈

iPhone 17 Pro Maxだったらp5.jsのWeb editorで表示させることができました。

// p5.jsで包絡線を描く
function setup() {
  createCanvas(400, 400);
  background(255);
  stroke(0, 50);
  let steps = 20;
  for (let i = 0; i <= steps; i++) {
    line(i * (width/steps), 0, width, i * (height/steps));
  }
}

// p5.jsで包絡線を描く
function setup() {
  createCanvas(400, 400);
  background(255);
  stroke(0, 50);
  let steps = 20;
  for (let i = 0; i <= steps; i++) {
    line(i * (width/steps), 0, width, i * (height/steps));
  }
}

コードの比較解説：line() 関数が繋ぐ世界

Processing の line(x1, y1, x2, y2) が、p5.js でもほぼそのまま機能することに注目してください。

言語の壁（Java ⇄ JS）を越えて、同じ命令が同じ図形を描き出す。この「不変のロジック」こそ、僕たちが理解するべき「本質」です。環境が変わっても変わらないルールを見出すことは、プログラミングにおける上達の近道でもあります。

包絡線と共通する形：放物線（Parabolic curve）

ここで重要な気づきを一つ。実は、この包絡線によって描き出される曲線の代表例が、放物線（Parabolic curve）です。

これは「逆らえない「重力」と「違和感」。下から上へ引き上げる縦線の修練【WSN: A-008】」で練習した「縦線の重力」の話と深くリンクします。重力に従って物が落ちる軌跡（放物線）は、直線の積み重ねによって表現できる。つまり、僕がノートに引いたあの不器用な垂直線も、数学的なルールで束ねれば、宇宙の法則に従う美しいカーブを描き出すということです。このようにアナログの身体感覚とデジタルの数式を連結させることで、僕の「知の網（ネットワーク）」はさらに強固になります。

包絡線から思い浮かんだ場所：リスボン「発見のモニュメント」付近の幾何学的な世界地図

この数学的な構造を実感を伴って思い出したのは、かつてポルトガルのリスボンを旅した時のことでした。

「発見の像（発見のモニュメント）」を見ようと歩き出したのですが、想像以上に遠く、目的地に着く頃にはかなり体力を消耗していました。

しかし、目の前に現れたその像は、予想を遥かに上回る巨大さと大迫力で、疲れを吹き飛ばしてくれました。「行ってよかった」と心から思える瞬間でした。

塔に登ると、足元には巨大なタイルで描かれた世界地図が現れます。

今回描いた包絡線を描いたとき、ここが思い浮かんだ。

歴史の重みと、数学的な美しさが交差する場所。

「遠くても、自分の足で辿り着いて、自分の目で見る」。 その経験を積み重ねることが、僕の成長を形作っています。

一は全、全は一。 今日描いたこの一本のコードの線も、リスボンの広場に刻まれた線も、すべては繋がっています。

【Bonus】1600×900の高解像度コード

この記事のアイキャッチ画像のコード。

キャンバスの大きさによって、イメージが変わりますね。

Processing

// Processing版：1600x900 包絡線デザイン
void setup() {
  size(1600, 900);
  background(255);
  stroke(0, 40); // 解像度が高いため、透明度を少し下げて(50→40)重ねの繊細さを強調
  
  // ステップ数を 60 に増加。広くなった画面でも「曲線の滑らかさ」を維持します
  int steps = 60; 
  
  for (int i = 0; i <= steps; i++) {
    // x軸上の点(上側) と y軸上の点(右側) を結ぶ
    // 画面が横長になっても、width/height を使っているので自動で比率が維持されます
    line(i * (width/float(steps)), 0, width, i * (height/float(steps)));
  }
}

// Processing版：1600x900 包絡線デザイン
void setup() {
  size(1600, 900);
  background(255);
  stroke(0, 40); // 解像度が高いため、透明度を少し下げて(50→40)重ねの繊細さを強調
  
  // ステップ数を 60 に増加。広くなった画面でも「曲線の滑らかさ」を維持します
  int steps = 60; 
  
  for (int i = 0; i <= steps; i++) {
    // x軸上の点(上側) と y軸上の点(右側) を結ぶ
    // 画面が横長になっても、width/height を使っているので自動で比率が維持されます
    line(i * (width/float(steps)), 0, width, i * (height/float(steps)));
  }
}

p5.js

// p5.js版：1600x900 包絡線デザイン
function setup() {
  // アイキャッチ画像に最適な 16:9 のキャンバスを作成
  createCanvas(1600, 900);
  background(255);
  
  // 解像度が高いため、ストロークを繊細に設定（透明度 40）
  // 重なり合う「影」の美しさを強調します
  stroke(0, 40);
  
  // 画面の広さに合わせ、ステップ数を 60 に増加
  // 線が増えることで、曲線の「密度」と「滑らかさ」が劇的に向上します
  let steps = 60; 
  
  for (let i = 0; i <= steps; i++) {
    // x軸上の点(上端) と y軸上の点(右端) を直線で結ぶ
    // JavaScriptでは float() の変換なしで正確な計算が可能です
    line(i * (width / steps), 0, width, i * (height / steps));
  }
}

// p5.js版：1600x900 包絡線デザイン
function setup() {
  // アイキャッチ画像に最適な 16:9 のキャンバスを作成
  createCanvas(1600, 900);
  background(255);
  
  // 解像度が高いため、ストロークを繊細に設定（透明度 40）
  // 重なり合う「影」の美しさを強調します
  stroke(0, 40);
  
  // 画面の広さに合わせ、ステップ数を 60 に増加
  // 線が増えることで、曲線の「密度」と「滑らかさ」が劇的に向上します
  let steps = 60; 
  
  for (let i = 0; i <= steps; i++) {
    // x軸上の点(上端) と y軸上の点(右端) を直線で結ぶ
    // JavaScriptでは float() の変換なしで正確な計算が可能です
    line(i * (width / steps), 0, width, i * (height / steps));
  }
}

ワタタク

それでは今日もレッツワクワクコーディング。