この記事を書いた人
- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）
目次
作品の画像とコード
アニメーション。
let t = 0; // 時間変数（時間の経過を記録するための変数）
function setup() {
createCanvas(600, 600); // キャンバスサイズを600x600ピクセルに設定
}
function draw() {
background("#ffe5ec"); // 背景色を設定
t += 0.08; // 時間を更新（0.08ずつ増加）
// 10×10のグリッドを作成するループ
for (let i = 0; i < 10; i++) {
for (let j = 0; j < 10; j++) {
let x = i * 60 + 30; // ハートのX座標（端に配置されるように調整）
let y = j * 60 + 30; // ハートのY座標（端に配置されるように調整）
let heartScale = 1.8 + 0.1 * sin(t + (i + j) * 0.5); // ハートのサイズを時間と位置に基づいて変動させる
drawHeart(x, y, heartScale); // ハートを描く
}
}
}
// ハートを描く関数
function drawHeart(x, y, heartScale) {
fill("#fb6f92"); // ハートの色をピンク色に設定
noStroke(); // ハートの輪郭線を消す
beginShape(); // カスタムシェイプの描画開始
vertex(x, y - 10 * heartScale); // 上の頂点を設定
// ベジェ曲線でハートの右上と右側を描く
bezierVertex(x + 10 * heartScale, y - 20 * heartScale, x + 20 * heartScale, y, x, y + 10 * heartScale);
// ベジェ曲線でハートの左上と左側を描く
bezierVertex(x - 20 * heartScale, y, x - 10 * heartScale, y - 20 * heartScale, x, y - 10 * heartScale);
endShape(CLOSE); // カスタムシェイプの描画終了
}作った感想
【作品No.26】リサジュー曲線たち【p5.js 2025年1月26日】を眺めていて、ハートにしたら面白いかなぁ。と思って作成。
ハートのYの位置、もう少し調整したほうがよかった。
ツメが甘い。
ワタタクそれでは今日もレッツワクワクコーディング。