上記画像のコードを見る（1/4）
（ここをクリックすると以下が開く）
/**
* @title Breakthrough of Light
* @author Takuya Watari (watataku)
* @date 2025-08-05
* * @desc
* ブログ記事「クリエイティブコーディングの伸び悩みを打ち破った3つの発見」の
* アイキャッチ用に制作したジェネラティブアートです。
* * 「伸び悩み」を象徴する暗い壁を打ち破り、その先に見える「希望」や
* 「新しい発見」を、中心から放たれるカラフルな光で表現しています。
* 3つの輝く粒子は「3つの発見」を、飛び散る30の破片は「月間30作品」の
* 努力を象徴しています。
* * @license
* This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
* http://creativecommons.org/licenses/by-nc-sa/4.0/
* * Takuya Watari
* Website: https://watataku-artist-katsuyaku.com/
* X: https://x.com/Watataku_Art
*/
// p5.js Web Editor: https://editor.p5js.org/
function setup() {
createCanvas(1600, 900);
colorMode(HSB, 360, 100, 100, 100);
noStroke();
// 背景をグラデーションで描画
drawBackground();
// 壁の向こう側の希望の光を描画
drawHopeLight();
// 伸び悩みの壁を描画
drawWall();
// 30作品の努力を示すカケラを描画
drawDebris();
// 3つの大きな発見を示す光の粒子を描画
drawThreeDiscoveries();
// 全体に質感を加えるノイズを描画
drawGrain();
// タイトルを追加
drawTitle();
}
// -------------------------------------------------------------
// 各要素の描画関数
// -------------------------------------------------------------
// 背景のグラデーション
function drawBackground() {
let topColor = color(230, 50, 15); // 暗い青
let bottomColor = color(260, 60, 5); // 暗い紫
for (let y = 0; y < height; y++) {
let inter = map(y, 0, height, 0, 1);
let c = lerpColor(topColor, bottomColor, inter);
stroke(c);
line(0, y, width, y);
}
noStroke();
}
// 壁の向こうに広がる希望の光
function drawHopeLight() {
push();
translate(width / 2, height / 2);
// 放射状に広がるカラフルな光
for (let i = 0; i < 360; i += 0.5) {
let angle = radians(i);
let x = cos(angle) * width;
let y = sin(angle) * height;
let h = i % 360;
let s = 90;
let b = 100;
let alpha = 15;
stroke(h, s, b, alpha);
line(0, 0, x, y);
}
noStroke();
pop();
}
// 伸び悩みを象徴する壁
function drawWall() {
let blockSize = 40;
for (let x = -blockSize; x < width * 0.8; x += blockSize) {
for (let y = -blockSize; y < height + blockSize; y += blockSize) {
let d = dist(x, y, width / 2, height / 2);
// 壁の中央部分をノイズを使って不規則に崩す
let noiseVal = noise(x * 0.01, y * 0.01);
if (d > 200 + noiseVal * 200) {
let gray = random(10, 25);
fill(240, 10, gray, 95);
// 少しだけ位置をずらして単調さをなくす
let offsetX = (noise(x * 0.1, y * 0.1) - 0.5) * 10;
let offsetY = (noise(x * 0.2, y * 0.2) - 0.5) * 10;
rect(x + offsetX, y + offsetY, blockSize, blockSize);
}
}
}
}
// 30作品の努力を象徴するカケラ
function drawDebris() {
for(let i = 0; i < 30; i++) {
let angle = random(TWO_PI);
let radius = random(180, 400);
let x = width / 2 + cos(angle) * radius;
let y = height / 2 + sin(angle) * radius;
// 壁の色と光の色を混ぜる
if(random() > 0.5) {
fill(240, 10, random(15, 30), 80); // 壁のカケラ
} else {
fill(random(360), 80, 100, 60); // 光のカケラ
}
push();
translate(x, y);
rotate(random(TWO_PI));
let size = random(5, 20);
rect(0, 0, size, size);
pop();
}
}
// 3つの大きな発見
function drawThreeDiscoveries() {
// 発光エフェクト（シャドウを利用）
drawingContext.shadowBlur = 40;
// 1つ目の発見
drawingContext.shadowColor = color(60, 100, 100, 50); // 黄色い光
fill(60, 80, 100);
circle(width * 0.4, height * 0.3, 25);
// 2つ目の発見
drawingContext.shadowColor = color(200, 100, 100, 50); // シアンの光
fill(200, 80, 100);
circle(width * 0.55, height * 0.65, 30);
// 3つ目の発見
drawingContext.shadowColor = color(0, 100, 100, 50); // 赤い光
fill(0, 80, 100);
circle(width * 0.3, height * 0.7, 22);
// シャドウをリセット
drawingContext.shadowBlur = 0;
}
// 質感を与えるノイズ
function drawGrain() {
loadPixels();
for (let i = 0; i < pixels.length; i += 4) {
let grain = random(-15, 15);
pixels[i] = pixels[i] + grain;
pixels[i+1] = pixels[i+1] + grain;
pixels[i+2] = pixels[i+2] + grain;
}
updatePixels();
}
// タイトル描画
function drawTitle() {
// 日本語フォントは環境依存のため、Webセーフなフォントで代替
// 正確なフォントで表示したい場合は、画像編集ソフトで後から追加するのが確実です
textFont('Helvetica, Arial, sans-serif');
textAlign(RIGHT, BOTTOM);
// メインタイトル
fill(0, 0, 100, 90);
textSize(58);
textStyle(BOLD);
// 少しドロップシャドウ
drawingContext.shadowColor = color(0, 0, 0, 50);
drawingContext.shadowBlur = 10;
drawingContext.shadowOffsetX = 3;
drawingContext.shadowOffsetY = 3;
text("Creative Coding Breakthrough", width - 60, height - 120);
// サブタイトル
textSize(28);
textStyle(NORMAL);
text("3 Discoveries from 30 Works in a Month", width - 60, height - 70);
// シャドウをリセット
drawingContext.shadowBlur = 0;
drawingContext.shadowOffsetX = 0;
drawingContext.shadowOffsetY = 0;
}
// draw()は一度だけ実行
function draw() {
noLoop();
}
ワタタク「クリエイティブコーディングの勉強を始めたけど、最近作品もつくれていないし、なんだか伸び悩んでるなぁ。」
もしあなたが今、こんな「伸び悩み」を感じているなら、この記事はきっとあなたのためのものです。
こんにちは！「クリエイティブコーディング1万時間の歩き方」をコンセプトに、世界で活躍するアーティストを目指す僕、わたたくです。
実は僕自身、少し前まで同じような壁にぶつかっていました。しかし、2025年6月に行ったある挑戦をきっかけに、その壁を打ち破る大きなヒントを発見できたのです。
その挑戦とは「#minacoding2025に参加し、1ヶ月で30作品を創る」こと。
この記事では、がむしゃらにアウトプットを続けた僕が掴んだ、クリエイティブコーディングの伸び悩みを打ち破るための3つの発見を、僕自身の経験とともにお話しします。
この記事を読み終える頃には、あなたの創作に対する迷いが晴れ、明日からまた新しい一歩を踏み出す活力が湧いてくるはずです。
この記事を書いた人
- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）
目次
なぜ、僕たちは伸び悩むのか？
まず、僕がなぜ伸び悩んでいたのかを少しだけお話しさせてください。
原因はシンプルで、「インプットに対して、アウトプットの量が圧倒的に足りていなかった」からです。
たくさんの素晴らしい作品を見たり、新しい技術を学んだりして「知識」は増えるものの、それを自分の手で形にする機会が少なかったのです。一人で黙々と制作していると、どうしても「今日は疲れたから明日でいいや」と甘えが出てしまうんですよね。
あなたにも、心当たりはありませんか？
この「アウトプット不足」という根本的な課題を解決してくれたのが、最初の発見につながります。
発見1：企画に参加し、「強制的に作る環境」に飛び込む
上記画像のコードを見る（2/4）
（ここをクリックすると以下が開く）
/**
* @title 30-Day Challenge: The Grid of Growth
* @author Takuya Watari (watataku)
* @date 2025-08-05
* * @desc
* ブログ記事のセクション「発見1：企画に参加し、『強制的に作る環境』に飛び込む」の
* ために制作したジェネラティブアートです。
* * 30のグリッドは30日間の挑戦を、そして左上から右下へと形や色が変化して
* いくオブジェクトは、日々の積み重ねによるスキルとアイデアの成長を象徴しています。
* 周囲の光の粒子は、コミュニティから得られる刺激やひらめきを表現しています。
* * @license
* This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
* http://creativecommons.org/licenses/by-nc-sa/4.0/
* * Takuya Watari
* Website: https://watataku-artist-katsuyaku.com/
* X: https://x.com/Watataku_Art
*/
function setup() {
createCanvas(1600, 900);
colorMode(HSB, 360, 100, 100, 100);
noLoop(); // 静的な画像なので一度だけ描画
// 背景を描画
background(240, 30, 10);
// 30日間の成長を描画
drawGrowthGrid();
// テキストを追加
fill(0, 0, 100, 50);
textSize(20);
textAlign(RIGHT, BOTTOM);
textFont('monospace');
text('#minacoding2025', width - 40, height - 40);
}
// 30日間の成長をグリッドで描画する関数
function drawGrowthGrid() {
const cols = 6;
const rows = 5;
const total = cols * rows;
const padding = 150;
const gridW = width - padding * 2;
const gridH = height - padding * 2;
const cellW = gridW / cols;
const cellH = gridH / rows;
let count = 0;
for (let j = 0; j < rows; j++) {
for (let i = 0; i < cols; i++) {
const x = padding + i * cellW + cellW / 2;
const y = padding + j * cellH + cellH / 2;
const progress = count / (total - 1); // 0.0 から 1.0 の進捗度
// 1. ひらめきや刺激を表す光の粒子
drawInspiration(x, y, cellW, cellH, progress);
// 2. 成長する作品（オブジェクト）
drawWork(x, y, progress);
count++;
}
}
}
// 日々の作品を象徴するオブジェクトを描画
function drawWork(x, y, progress) {
// progressに応じてパラメータを変化させる
const baseSize = 50;
const size = baseSize + progress * 70;
const hue = map(progress, 0, 1, 0, 360); // 色が豊かになる
const saturation = map(progress, 0, 1, 10, 90);
const brightness = map(progress, 0, 1, 80, 100);
const complexity = 3 + floor(progress * 10); // 形が複雑になる
const angleOffset = progress * PI;
push();
translate(x, y);
stroke(hue, saturation, brightness);
strokeWeight(map(progress, 0, 1, 2, 6));
noFill();
// 頂点の数が増えていく多角形を描画
beginShape();
for (let i = 0; i < complexity; i++) {
const angle = map(i, 0, complexity, 0, TWO_PI) + angleOffset;
const r = size / 2 + (noise(x * 0.1, y * 0.1, i) - 0.5) * 20 * progress;
const px = cos(angle) * r;
const py = sin(angle) * r;
vertex(px, py);
}
endShape(CLOSE);
pop();
}
// 周囲からの刺激やひらめきを表現する粒子を描画
function drawInspiration(x, y, w, h, progress) {
const particleCount = floor(5 + progress * 20);
noStroke();
for (let i = 0; i < particleCount; i++) {
const px = x + (random() - 0.5) * w * 0.8;
const py = y + (random() - 0.5) * h * 0.8;
const pSize = random(1, 4);
const pAlpha = random(10, 50) * progress;
fill(0, 0, 100, pAlpha);
circle(px, py, pSize);
}
}伸び悩んでいた僕がまず試したのが、コミュニティ企画に参加して「強制的にアウトプットする環境」に身を置くことでした。
僕が参加したのは、X（旧Twitter）上で開催されていた「#minacoding2025」という企画です。これは、毎日決められたテーマで作品を投稿するというもの。
正直、始める前は「毎日なんて無理だろう…」と不安でした。しかし、結果的にこの挑戦が、僕の停滞感を吹き飛ばしてくれたのです。
30作品を作って見えたこと
毎日作品を作り続けることで、たくさんの発見がありました。
- 知識が「使える技術」に変わる： 学んだことをすぐ試すので、知識が頭の中だけでなく手と指に定着していく感覚がありました。
- 制作スピードが上がる： 毎日なので、良い意味で完璧を求めなくなります。「限られた時間でどう形にするか？」を考えるクセがつき、驚くほど制作スピードが上がりました。
- アイデアの引き出しが増える： 他の参加者の多様な作品から「こんな表現があったのか！」と毎日刺激をもらえ、自分のアイデアの幅が格段に広がりました。
一人で黙々と制作する時間も大切ですが、時にはこうした企画に参加して「締切」という強制力を借りるのは、上達への最高の近道だと断言できます。
この企画で得られた、より詳しい技術的な発見や学びについては、こちらの記事に詳しくまとめています。興味のある方はぜひご覧ください。
関連記事：#minacoding2025挑戦で得られた発見の詳細はこちら
発見2：「テーマ」を持って創ると、学習のアンテナが立つ
上記画像のコードを見る（3/4）
（ここをクリックすると以下が開く）
/**
* @title The Learning Antenna
* @author Takuya Watari (watataku)
* @date 2025-08-05
* * @desc
* ブログ記事のセクション「発見2：「テーマ」を持って創ると、学習のアンテナが立つ」の
* ために制作したジェネラティブアートです。
* * 無数の情報が漂う中から、設定した「テーマ（特定の色）」に合致する情報だけを
* 自動的に捕捉する「学習のアンテナ」を視覚的に表現しました。
* * @license
* This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
* http://creativecommons.org/licenses/by-nc-sa/4.0/
* * Takuya Watari
* Website: https://watataku-artist-katsuyaku.com/
* X: https://x.com/Watataku_Art
*/
let particles = [];
const themeColor = 190; // 今日のテーマカラー（シアン系）
function setup() {
createCanvas(1600, 900);
colorMode(HSB, 360, 100, 100, 100);
noLoop();
// 情報の粒子を生成
for (let i = 0; i < 1500; i++) {
particles.push({
pos: createVector(random(width), random(height)),
// 10%の確率でテーマに関連する情報にする
isThemeRelated: random() < 0.1,
size: random(2, 6),
shape: random(['circle', 'rect', 'triangle']),
});
}
// 描画処理
background(230, 40, 15);
drawParticles();
drawAntenna();
}
// 情報の粒子を描画する関数
function drawParticles() {
for (const p of particles) {
let h, s, b, alpha;
if (p.isThemeRelated) {
// テーマに関連する情報は、テーマカラーで明るく描画
h = themeColor;
s = 80;
b = 100;
alpha = 90;
} else {
// 関係ない情報は、彩度の低い様々な色で描画
h = random(360);
s = random(5, 20);
b = random(40, 80);
alpha = 60;
}
noStroke();
fill(h, s, b, alpha);
push();
translate(p.pos.x, p.pos.y);
rotate(random(TWO_PI)); // 向きをランダムに
if (p.shape === 'circle') {
circle(0, 0, p.size);
} else if (p.shape === 'rect') {
rectMode(CENTER);
rect(0, 0, p.size, p.size);
} else {
triangle(0, -p.size, -p.size, p.size, p.size, p.size);
}
pop();
}
}
// 中央のアンテナと接続線を描画する関数
function drawAntenna() {
const centerX = width / 2;
const centerY = height / 2;
// アンテナ（自分自身）の中心に後光を描画
for (let i = 300; i > 0; i -= 10) {
fill(themeColor, 80, 100, 2);
noStroke();
circle(centerX, centerY, i);
}
// アンテナ本体
stroke(themeColor, 30, 100);
strokeWeight(3);
noFill();
circle(centerX, centerY, 80);
line(centerX, centerY - 40, centerX, centerY - 80);
// 接続線を描画
for (const p of particles) {
if (p.isThemeRelated) {
strokeWeight(1);
stroke(themeColor, 80, 100, 50);
line(centerX, centerY, p.pos.x, p.pos.y);
}
}
}
// マウスがクリックされたときに画像を保存する関数
function mouseClicked() {
let y = year();
let m = month();
let d = day();
let h = hour();
let mi = minute();
let s = second();
let fileName = 'artwork-discovery2-' + y + '-' + m + '-' + d + '-' + h + '-' + mi + '-' + s;
saveCanvas(fileName, 'png');
print(fileName + '.png として画像を保存しました。');
}がむしゃらに量をこなす中で、次に気づいたのが「テーマ」を持って作品をつくることの大切さです。
企画では毎日お題（テーマ）が与えられましたが、これが学習効率を劇的に高めてくれました。
「テーマ」とは、例えば「雨」「幾何学模様」「夏の思い出」といった、作品の題材のことです。なぜテーマを持つと良いのでしょうか？
学習のアンテナが鋭くなる
「よし、今日は『ピクセルアート』をテーマに創ろう！」
そう決めた瞬間から、あなたの脳は「ピクセルアート」に関する情報を自動的に集め始めます。
- 「この表現を再現するには、どんな知識が必要だろう？」
- 「他の人はピクセルでどんな表現をしているんだろう？」
- 「このサイトの解説が分かりやすそうだ！」
このように、テーマが学習のコンパスとなり、自ら興味を持って情報を探すようになるのです。漠然とネットサーフィンをするのに比べ、情報への集中力と吸収率が全く違います。
もしあなたが「次は何を創ろうかな…」と迷ったら、まずはどんなに小さなことでもいいので、「テーマ」を決めてみてください。それだけで、世界の見え方が少し変わるはずです。
発見3：「コンセプト」が、作品と自分を成長させる力
上記画像のコードを見る（4/4）
（ここをクリックすると以下が開く）
/**
* @title The Core Concept
* @author Takuya Watari (watataku)
* @date 2025-08-05
* * @desc
* ブログ記事のセクション「発見3：「コンセプト」が、作品と自分を成長させる力」の
* ために制作したジェネラティブアートです。
* * 中央の輝く核である「コンセプト」が、無機質な「テーマ」の断片にエネルギーを
* 与え、意味のある一つの作品へと昇華させる（魂を吹き込む）瞬間を表現しました。
* * @license
* This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
* http://creativecommons.org/licenses/by-nc-sa/4.0/
* * Takuya Watari
* Website: https://watataku-artist-katsuyaku.com/
* X: https://x.com/Watataku_Art
*/
function setup() {
createCanvas(1600, 900);
colorMode(HSB, 360, 100, 100, 100);
noLoop();
// 背景
background(240, 50, 5);
// 描画処理
drawThemeParticles();
drawConceptCoreAndEnergy();
}
// テーマの断片（線や粒子）を描画する関数
function drawThemeParticles() {
const centerX = width / 2;
const centerY = height / 2;
const maxRadius = width / 1.5;
for (let i = 0; i < 2000; i++) {
// 画面全体にランダムに配置
const angle = random(TWO_PI);
const r = sqrt(random()) * maxRadius; // 中心に集まりすぎないようにsqrt()を使う
const x = centerX + cos(angle) * r;
const y = centerY + sin(angle) * r;
// 初期状態の色や形
const hue = random(180, 300);
const saturation = 40;
const brightness = 60;
const alpha = 30;
const weight = random(0.5, 2);
stroke(hue, saturation, brightness, alpha);
strokeWeight(weight);
point(x, y);
}
}
// コンセプトの核と、そこから広がるエネルギーを描画する関数
function drawConceptCoreAndEnergy() {
const centerX = width / 2;
const centerY = height / 2;
// 1. コンセプトの核（強く輝く中心）
for (let i = 100; i > 0; i -= 2) {
noStroke();
fill(0, 0, 100, 5);
circle(centerX, centerY, i);
}
fill(0, 0, 100);
circle(centerX, centerY, 10);
// 2. コンセプトから広がるエネルギーの波紋と、影響を受けたテーマ
const energyRings = 5;
const maxRadius = width / 2;
for (let r = 50; r < maxRadius; r += 1) {
// 円周上の点を計算
const angle = noise(r * 0.01) * 10;
const x = centerX + cos(angle) * r;
const y = centerY + sin(angle) * r;
// エネルギーの影響を受けた線の描画
const distanceRatio = r / maxRadius; // 中心からの距離の割合
const hue = map(r, 0, maxRadius, 30, 330) % 360;
const saturation = 100;
const brightness = 100;
const alpha = (1 - distanceRatio) * 80;
const weight = 2.5 * (1 - distanceRatio) + 0.5;
stroke(hue, saturation, brightness, alpha);
strokeWeight(weight);
line(centerX, centerY, x, y);
// エネルギーの波紋を時々描画
if (r % 100 < 1) {
noFill();
stroke(0, 0, 100, 20);
strokeWeight(5);
circle(centerX, centerY, r * 2);
}
}
}
// マウスがクリックされたときに画像を保存する関数
function mouseClicked() {
let y = year();
let m = month();
let d = day();
let h = hour();
let mi = minute();
let s = second();
let fileName = 'artwork-discovery3-' + y + '-' + m + '-' + d + '-' + h + '-' + mi + '-' + s;
saveCanvas(fileName, 'png');
print(fileName + '.png として画像を保存しました。');
}そして、「テーマ」の重要性に気づいた僕に、もう一段階深い発見がありました。それこそが、今回の最大の収穫である「コンセプト」の存在です。
もしテーマが「何を作るか（What）」だとすれば、コンセプトは「なぜ、どのように表現するか（Why/How）」という、作品の魂であり、作家の姿勢そのものです。
少し分かりにくいかもしれないので、このブログを例にお話しします。
- このブログのテーマ： クリエイティブコーディングの学習方法
- このブログのコンセプト： クリエイティブコーディング1万時間の歩き方
ただ情報を発信するだけでなく、「初心者が世界レベルのアーティストになるまでの成長過程を、良いところも悪いところも全部見せる」というコンセプトがあるからこそ、「そのために、僕自身が本気で学び、考え、発見を積み重ねて発信しよう」という具体的な行動と、困難な時でも続けられるモチベーションが生まれるのです。
作品作りも全く同じでした。
例えば、僕が作品を創るときの大きなテーマは「すごくて、かわいい」「すごくて、かっこいい」です。
ここに、「見る人が思わず笑顔になるような、遊び心を加える」という僕なりのコンセプトをプラスする。
すると、
「ただ技術的にすごいだけの作品じゃない」
「どうすれば、もっとインタラクティブで触って楽しくなるだろう？」
「どんな色を使えば、ワクワクする気持ちを表現できるかな？」
と、表現に一本の芯が通り、「自分らしい表現」とは何かを深く考えるきっかけになりました。
コンセプトは、あなたの作品に魂を吹き込み、あなた自身の作家性をも成長させてくれる、強力なエンジンなのです。
まとめ：伸び悩んだら「量・テーマ・コンセプト」を意識しよう
2025年6月、がむしゃらに30作品を創り続けた僕が掴んだ、伸び悩みの壁を打ち破るための3つの発見。それは、
- 量をこなす（Just Do It）： 企画に参加するなどして、強制的にアウトプットする環境に身を置く。質は後からついてくる。
- テーマを持つ（What）： 「何を作るか」を決め、学習のアンテナを立てる。インプットの質を高める。
- コンセプトを練る（Why/How）： 「なぜ、どう表現するか」を考え、作品に魂を込める。自分らしい表現を見つける。
もし、あなたが今クリエイティブコーディングの学習で伸び悩みを感じているなら、それはあなたが真剣に創作と向き合っている証拠です。
ぜひ、騙されたと思ってこの3つの発見を試してみてください。
きっと、あなたの目の前に新しい道が拓けてくるはずです。
僕も「クリエイティブコーディング1万時間」の道を、あなたと一緒に歩んでいきたいと思っています。この記事が、あなたの壁を打ち破るための、ささやかな光となれば嬉しいです。
ワタタクそれでは今日もレッツワクワクコーディング。