【作品No.27】動くハートたち【p5.js 2025年1月27日】

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); // カスタムシェイプの描画終了
}