ワタタクどうも上達の研究家のワタタクです。
前回の【WSN : L-001】では、手描きの包絡線の一部をProcessingとp5.jsで描きました。
今回は、自身が描いた包絡線で描いたアステロイド曲線を、クリエイティブコーディングで表現できるようにしていきます。
この記事を書いた人
上達の研究家 / アーティスト
「才能」ではなく「発見」で描く。文系・36歳からの上達ハック。
- ゼロから独学でクリエイティブコーディングに挑戦し、以下の実績を達成
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
- KITTE大阪の18メートルあるAxCROSS大型スクリーン
- 虎ノ門ヒルズステーションタワーB2F TOKYO NODE エントランスサイネージで展示
- UN:O（東京大手町）にある会員限定のサテライトオフィスにて2作品常設展示
- 開始1年9ヶ月目に、虎ノ門ヒルズ49階、地上250mのインフィニティプールへ作品提供・展示
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
- 【上達の秘密】
- 起源の物語：未経験から虎ノ門ヒルズ展示までの全記録（Genesis）
- 思考の技術：「上達」をシステム化する、モレスキン6冊の運用設計図
- ※虎ノ門ヒルズでの実績を出した「思考」と「経験」を、再現可能な形に体系化
アステロイド曲線とは星を閉じ込めた幾何学
アステロイド（Astroid）とは、ギリシャ語の「星（Aster）」に由来する名前を持つ、4つの尖った角（尖点）を持つ美しい曲線です。
包絡線でアステロイド曲線をProcessingとp5.jsで描く
Processing
// 設定パラメータ
int numLines = 15; // 線の数（分割数）。ここを増やすと密度が上がります
float radius = 250; // 図形の大きさ（中心から端までの長さ）
void setup() {
size(600, 600); // キャンバスのサイズ
background(245, 243, 240); // 画用紙のような少しクリームがかった背景色
noLoop(); // 静止画なので描画は1回だけ
smooth(); // 線を滑らかに
}
void draw() {
translate(width/2, height/2); // 原点を画面の中心に移動
stroke(50); // 線の色（鉛筆のような濃いグレー）
strokeWeight(1); // 線の太さ（細めに設定）
// 十字の軸を描画（キャンバスいっぱいまで引く補助線）
line(-width, 0, width, 0);
line(0, -height, 0, height);
// 4つの象限（右上、左上、右下、左下）ごとに線を描画
for (int i = 0; i <= numLines; i++) {
// 軸上の点の位置を計算
// aは「中心から外側へ」進む点
float a = map(i, 0, numLines, 0, radius);
// bは「外側から中心へ」戻る点
float b = map(i, 0, numLines, radius, 0);
// --- 各象限の線を描画 ---
// 右上 (Top-Right)
// Y軸のマイナス側(上)の点 と X軸のプラス側(右)の点 を結ぶ
line(0, -a, b, 0);
// 左上 (Top-Left)
// Y軸のマイナス側(上)の点 と X軸のマイナス側(左)の点 を結ぶ
line(0, -a, -b, 0);
// 右下 (Bottom-Right)
// Y軸のプラス側(下)の点 と X軸のプラス側(右)の点 を結ぶ
line(0, a, b, 0);
// 左下 (Bottom-Left)
// Y軸のプラス側(下)の点 と X軸のマイナス側(左)の点 を結ぶ
line(0, a, -b, 0);
// --- スケッチの雰囲気を出すための目盛り（点）の描画 ---
pushStyle();
strokeWeight(4); // 点を少し太く
point(0, -a); // 上
point(0, a); // 下
point(a, 0); // 右
point(-a, 0); // 左
popStyle();
}
}p5.js
// 設定パラメータ
let numLines = 15; // 線の数（分割数）
let radius = 250; // 図形の大きさ
function setup() {
createCanvas(600, 600); // size()の代わりにcreateCanvas()を使います
background(245, 243, 240); // 画用紙のような背景色
noLoop(); // 描画は1回だけ
}
function draw() {
translate(width / 2, height / 2); // 原点を中心へ
stroke(50); // 線の色
strokeWeight(1); // 線の太さ
// 十字の軸を描画
line(-width, 0, width, 0);
line(0, -height, 0, height);
// 4つの象限ごとに線を描画
for (let i = 0; i <= numLines; i++) {
// map関数はp5.jsでも同じように使えます
// a: 中心から外側へ
let a = map(i, 0, numLines, 0, radius);
// b: 外側から中心へ
let b = map(i, 0, numLines, radius, 0);
// --- 各象限の線を描画 ---
// 右上 (Top-Right)
line(0, -a, b, 0);
// 左上 (Top-Left)
line(0, -a, -b, 0);
// 右下 (Bottom-Right)
line(0, a, b, 0);
// 左下 (Bottom-Left)
line(0, a, -b, 0);
// --- 目盛り（点）の描画 ---
push(); // p5.jsではpushStyleの代わりにpush()を使います
strokeWeight(3);
point(0, -a);
point(0, a);
point(a, 0);
point(-a, 0);
pop(); // popStyleの代わりにpop()を使います
}
}なぜ、この星形は私たちの心を揺さぶるのか？
今回の制作プロセスを、三つの視点から深く掘り下げてみましょう。
1. 秩序から生まれる「星の輪郭」
直線という「硬い要素」が、4つの象限（右上・左上・右下・左下）で規則正しく配置されると、中央に星のような「柔らかいカーブ」が浮かび上がります。これはバラバラだった情報の断片が、一つの法則（アルゴリズム）によって統率されたときに生まれる、数学的な「秩序の美」です。
数学的には「内サイクロイド」の一種ですが、クリエイティブコーディングにおいては、「直線を少しずつずらして引く（包絡線）」という手法を使うことで、最もシンプルかつ美しく描くことができます。
2. 対称性がもたらす「心地よいリズム」
人間には、左右対称や上下対称のものを見ると「安定している」「美しい」と感じる本能的な心理があります。今回のコードで <code>draw()</code> 内に4つの象限への <code>line()</code> 命令を並べたのは、この「対称性の安心感」を画面に構築するためです。
3. 一（One）の反復が、宇宙（All）を構成する
前回の「L-001」では一つの角だけを描きましたが、今回はそれを4つに増やし、さらに目盛り（点）を打つことで、一つの「完結した宇宙」を表現しました。たった一本の線（One）を4方向に拡張し、統合させるプロセスは、哲学である「One is All, All is One」の体現そのものです。
One is All, All is Oneについては以下に書いています。
包絡線を組み合わせるといろいろな表現ができる
中心から4つの包絡線を描くとアステロイド曲線になりました。
もっといろいろな描き方をしてみると面白そうです。
例えば、重ねてみたり、向きを適当にしてみたり。
線の濃さを変えてみたりね。
クリエイティブコーディングでランダムな位置と大きさに表示されるようにしてみたので、良かったらそちらも参考にしてみてくださいね。
