【作品No.23】ひまわり2025年1月20日【p5.js】

2025年1月20日

URLをコピーしました！

この記事を書いた人

ワタタク

プロフィール

クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
コンセプトは「クリエイティブコーディング1万時間の歩き方」
2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）

【作品No.23】ひまわり2025年1月20日【p5.js】

// 参考 2時間でクリエイティブコーダーになる本 技術の泉シリーズ

function setup() {
  createCanvas(500, 500); // 500ピクセルのキャンバスを作成
}
function draw() {
  background(255, 247, 205); // 背景色を薄い黄色に設定
  
  let d = 10; // レクトの幅と高さ
  let num = 360; // レクトの数
  
  push(); // 新しい変換を開始
  translate(width / 2, height / 2); // 中央に移動
  
  noStroke(); // 縁の線を消す
  
  for(let i = 0; i < num; i++){ // 0から360までのループ
    let R = 200 * abs(sin(radians(i * 4))); // 円の半径を計算
    let x = R * cos(radians(360 * i / num)); // X座標を計算
    let y = R * sin(radians(360 * i / num)); // Y座標を計算
    
    if(i % 5 == 0){ // 5の倍数のとき
      fill(255, 204, 0); // 明るい黄色に色を設定
      d = 20; // レクトのサイズを大きく
    } else {
      fill(210, 180, 140); // 暗い茶色に色を設定
      d = 10; // レクトのサイズを元に戻す
    }
      rect(x - d / 2, y - d / 2, d, d); // レクトを描画
    
    }
  pop(); // 変換を終了
}