【p5.js】genuary2025.15 Design a rug【作品No.18】

2025年1月16日

URLをコピーしました！

この記事を書いた人

ワタタク

プロフィール

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

【p5.js】genuary2025.15 Design a rug【作品No.18】

let colors = ["#4e9f99", "#f5deb3"]; // ブルーとベージュの色

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
  background("#d6e0f0");  // ブルーグレーの背景色
}

function draw() {
  // キャンバスを4分割
  let halfWidth = width / 2;
  let halfHeight = height / 2;

  // 中央に大きな模様を描く
  push();
  translate(width / 2, height / 2);
  scale(0.6);  // 大きさを調整
  drawCarpet();
  pop();
  
  // 上
  push();
  translate(width / 2, halfHeight / 2);
  scale(0.5);
  drawCarpet();
  pop();

  // 下
  push();
  translate(width / 2, height - halfHeight / 2);
  scale(0.5);
  drawCarpet();
  pop();

  // 左
  push();
  translate(halfWidth / 2, height / 2);
  scale(0.5);
  drawCarpet();
  pop();

  // 右
  push();
  translate(width - halfWidth / 2, height / 2);
  scale(0.5);
  drawCarpet();
  pop();
  
  // 左上
  push();
  translate(halfWidth / 2, halfHeight / 2);
  scale(0.5); // 大きさを半分にする
  drawCarpet();
  pop();

  // 右上
  push();
  translate(width - halfWidth / 2, halfHeight / 2);
  scale(0.5);
  drawCarpet();
  pop();

  // 左下
  push();
  translate(halfWidth / 2, height - halfHeight / 2);
  scale(0.5);
  drawCarpet();
  pop();

  // 右下
  push();
  translate(width - halfWidth / 2, height - halfHeight / 2);
  scale(0.5);
  drawCarpet();
  pop();
  
  // 外枠を描く
  drawBorder();
}

function drawCarpet() {
  // 絨毯の模様を描く関数
  for (let i = 0; i < 360; i += 5) {
    push();
    rotate(i);
    
    // 四角形を積み重ねる
    for (let j = 0; j < 5; j++) {
      let r = 100 + sin(i * 2 + j * 72) * 50;
      let x = r * cos(j * 72);
      let y = r * sin(j * 72);
      
      // 指定された色を順に設定
      let colorIndex = (i / 5 + j) % colors.length;
      fill(colors[colorIndex]);
      noStroke();
      rect(x - 10, y - 10, 20, 20); // 四角形を描画
    }
    pop();
  }
}

function drawBorder() {
  noFill();
  strokeWeight(10);
  stroke("#4e9f99"); // 外枠の色を指定
  rect(5, 5, width - 10, height - 10); // 外枠を描画
}