上記画像のコードを見る
（ここをクリックすると以下が開く）
function setup() {
// キャンバスを1600x900で作成
pixelDensity(1); // スケーリングの影響を無効化
createCanvas(1600, 900);
// 明るい水色の背景を設定
background(210, 240, 255);
// アニメーションを停止し、静止画として描画
noLoop();
}
function draw() {
// グリッドの間隔（数値を小さくすると描画が細かくなります）
const step = 5;
// 画面全体をグリッドでループ
for (let y = 0; y < height; y += step) {
for (let x = 0; x < width; x += step) {
// パーリンノイズを使い、波打つような境界線を生成
const noiseVal = noise(x * 0.001, y * 0.001);
// 画面の左上から右下にかけて値が大きくなるように境界線の基準を計算
const boundary = (x * 0.8 + y) / 2 + noiseVal * 200;
// 境界線の値に応じて、描画を切り替える
if (boundary < 450) {
// ■ 美しい海の描画
push();
translate(x, y);
// パーリンノイズで流れの角度を決定
const angleNoise = noise(x * 0.006, y * 0.006);
const angle = map(angleNoise, 0, 1, 0, TWO_PI * 2);
rotate(angle);
// パーリンノイズで色を決定
const colorNoise = noise(x * 0.008, y * 0.008);
// 複数の青色を定義
const blue1 = color(0, 105, 148); // Cerulean Blue
const blue2 = color(64, 224, 208); // Turquoise
const blue3 = color(30, 144, 255); // Dodger Blue
// ノイズの値に応じて色を滑らかに混ぜる
const interColor = lerpColor(blue1, blue2, colorNoise);
const finalColor = lerpColor(interColor, blue3, noise(x * 0.02, y * 0.02));
finalColor.setAlpha(180); // 透明度を設定
stroke(finalColor);
strokeWeight(map(angleNoise, 0, 1, 1, 4)); // 流れの太さもノイズで変化
line(0, 0, step * 1.5, 0);
pop();
} else {
// ■ 汚染された領域の描画
push();
translate(x, y);
// 汚染を表現する淀んだ色のパレット
const pollutedColors = [
color(102, 102, 51, 150), // Dark Olive Green
color(139, 69, 19, 150), // Brown
color(80, 80, 80, 150), // Grey
color(70, 80, 50, 150) // Murky Green
];
const c = random(pollutedColors);
fill(c);
noStroke();
// ランダムな図形（四角形または円）を描画
if (random() > 0.3) {
rotate(random(TWO_PI));
rect(0, 0, random(5, step * 2), random(5, step * 2));
} else {
ellipse(0, 0, random(5, step * 2), random(5, step * 2));
}
pop();
}
}
}
}
ワタタクどうも。クリエイティブコーディングで1万時間の歩き方を共有しているワタタクです。
これまでの記事で、僕たちはクリエイティブコーディングの旅を続けてきました。 最初の記事（なぜか動きが”自然”になる魔法。クリエイティブコーディングで生命感を吹き込む法則）では、自然現象を模倣し、コードに「生命感」を吹き込む方法を探りました。 次の記事（作品はあなた自身を映す鏡。「NATURE OF CODE」に隠された本当の意味について考える）では、「The Nature of Code」の深い意味を解き明かし、作品が作者の「本質」を映し出す鏡であることを学びました。
技術を習得し、自己と向き合った僕たちが、次に向かうべき場所はどこでしょうか。 その答えは、「社会」です。
この記事では、僕たちが培ってきた表現力を、自分自身の内側から外側の世界へと向け、社会的なテーマを描き出すための方法を探求します。
- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）
自然現象の「反対の言葉」から見える世界
まず、一つの問いから始めましょう。「自然現象」の反対の言葉は何だと思いますか？ それは「人為現象（じんいげんしょう）」です。
- 自然現象: 人間の意図とは無関係に、自然界の法則によって起こる出来事（例：風、雨、地震）
- 人為現象: 人間の活動や意図によって引き起こされる出来事（例：都市開発、交通渋滞、環境汚染）
この二つの言葉を対比させると、クリエイティブコーディングで描ける世界の輪郭が、一気に広がります。僕たちは、美しい自然の模倣だけでなく、人間社会が抱える複雑で、時には痛みを伴う現実をも、アートとして表現する力を持っているのです。
コードで伝える「自然の恐怖」と「防災の知恵」
「自然現象」と「人為現象」は、時に複雑に絡み合います。その最たる例が「自然災害」です。
地震や台風は自然現象ですが、その被害の大きさは、都市の構造や防災システムといった人為的な要因に大きく左右されます。クリエイティブコーディングは、この自然の恐ろしさと、それに対する人間の備えの重要性を、これまでにない形で伝えることができます。
- 恐怖のデータビジュアライゼーション: 過去の津波が到達した範囲を、美しいけれどどこか不気味なパーティクル（粒子）でシミュレーションする。鑑賞者はそのアートに引き込まれると同時に、水の流れが自分の足元まで迫ってくるような、直感的な恐怖を感じるかもしれません。
- インタラクティブな避難訓練: 自分の住む町の地図をベースに、災害発生時の避難経路をシミュレーションするインタラクティブアート。ゲームのように、最適な避難方法を身体で覚えることができます。
このように、データや情報をただのグラフではなく、人の感情に直接訴えかける「体験」として提示できるのが、クリエイティブコーディングの強みなのです。
大阪万博のブルーオーシャンドームが教えてくれたこと
私がこの「人為現象」をアートで表現する力に深く感銘を受けたのは、2025年の大阪・関西万博のパビリオン「BLUE OCEAN DOME（ブルーオーシャンドーム）」での体験でした。
ドーム内部の巨大なスクリーンに映し出されていたのは、幻想的で美しい海の世界。しかし、その美しさの中に、突如として人間の捨てたゴミや汚染物質が流れ込み、生命の輝きを奪っていくのです。
それは、言葉で「環境問題は深刻です」と100回聞かされるよりも、遥かに強く、僕の心を打ちました。美しさと醜さ、生命と破壊という強烈なコントラストによって、「環境汚染」という人為現象の現実を、悲しみと共に、しかし決して目を背けられない形で突きつけられたのです。
これはまさに、社会課題を「自分ごと」として感じさせる力の証明でした。
BLUE OCEAN DOME（ブルーオーシャンドーム）の表現は、CGWORLD AUGUST 2025 324によるとHoudiniを使用している。ストーリーボードも載っていて非常に参考になりました。
ワタタクたまたまBLUE OCEAN DOME（ブルーオーシャンドーム）の予約がとれて、何も調べずに入ったんだけど水が流れる展示も楽しめた、映像表現もクリエイティブコーディングに活かせる要素がたくさんあり、社会の問題も感じてとても勉強になりました。
どうやって作ったのかを調べてるうちに、CGWORLD AUGUST 2025 324にたどり着き、速攻で買いに行きました。
あなたのコードは、世界を変える「問い」になる
僕たちの旅は、「点を動かす」という小さな一歩から始まりました。 その点は、やがて自然の法則を学び、生命感あふれる粒子となりました。 そして、私たちの内なる想いを映し出し、自己表現のツールとなりました。
今、その無数の粒子は、社会が抱える課題を描き、人々の心に問いを投げかけるための、力強い絵の具となります。
あなたがクリエイティブコーディングで描くものは、単なる美しい模様ではありません。それは、社会を映す鏡であり、未来を考えるきっかけであり、そして世界をより良い場所へと動かす可能性を秘めた、一つの「問い」なのです。
この3部作の旅は、ここで一区切りです。
しかし、あなたの本当の創作の旅は、ここから始まります。 さあ、あなたはその力で、この世界にどんな「問い」を投げかけますか？