【p5.js】同心多角形を描く【作品No.12-14】

2025年1月13日

URLをコピーしました！

ワタタク

同心多角形の作品をつくりました。

コード、補足情報、コード内に参考にしたページのURL、良かったこと、反省点、次にどうするかをまとめています。

この記事を書いた人

ワタタク

プロフィール

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

同心多角形の作品の画像とコード3つ

【作品No.12】中心から同心多角形を描く

// 参考にさせていただいたページとURL
// [p5.js勉強会]同心円をライブコーディング
// https://www.youtube.com/watch?v=E_1E3p6KeNo

let colors = ["#780000","#c1121f","#fdf0d5","#003049","#669bbc"]; // 色の配列
let numSides = 8; // 多角形の辺の数

function setup() {
  createCanvas(w=720, w); // キャンバスのサイズを設定（幅と高さを720に）
  colorMode(HSB); // 色モードをHSBに設定（色相、彩度、輝度）
  background(100); // 背景色を設定（100%輝度のグレースケール）

  noFill(); // 塗りつぶしをなしに設定（形の内部を塗らない）

  translate(w/2, w/2); // キャンバスの中央に座標系を移動

  let c_size = 0; // 多角形のサイズを初期化
  while (c_size < 500) { // 最大サイズ（500）になるまで繰り返す
    drawPolygon(0, 0, c_size, numSides); // 多角形を描画（中心を0,0、サイズをc_size、辺の数をnumSidesに設定）
    stroke(random(colors)); // 線の色を設定（colors配列からランダムに選ぶ）
    c_size += 10; // サイズを10ずつ増加
  }
}

function drawPolygon(x, y, radius, npoints) {
  let angle = TWO_PI / npoints; // 各頂点間の角度を計算（2πをnpointsで割る）
  beginShape(); // 多角形の描画を開始
  for (let a = 0; a < TWO_PI; a += angle) { // 0から2πまでangleごとに繰り返す
    let sx = x + cos(a) * radius; // x座標を計算（cos(a) * 半径）
    let sy = y + sin(a) * radius; // y座標を計算（sin(a) * 半径）
    vertex(sx, sy); // 頂点を設定
  }
  endShape(CLOSE); // 多角形の描画を終了し、形を閉じる
}

【作品No.13】様々な位置にさまざまな同心多角形を描く

傘みたいに見えるね。

// 参考にさせていただいたページとURL
// [p5.js勉強会]同心円をライブコーディング
// https://www.youtube.com/watch?v=E_1E3p6KeNo

let colors = ["#780000","#c1121f","#fdf0d5","#003049","#669bbc"] // 色の配列
let numSides = 9; // 多角形の辺の数（例えば六角形）

function setup() {
  createCanvas(w=720, w); // キャンバスのサイズを設定
  colorMode(HSB); // 色モードをHSBに設定
  background(100); // 背景色を設定
  noFill(); // 塗りつぶしをなしに設定
  
  for(let i = 0; i < 10; i++){ // 10回繰り返す
    push(); // 現在の座標システムを保存
    stroke(random(colors)); // ランダムな色を選択
    translate(random(w), random(w)); // ランダムな位置に移動
    polygons_draw(random(50, 200), random(2, 20), numSides); // ランダムなサイズとステップで多角形を描画
    pop(); // 座標システムを復元
  }
}

function polygons_draw(max_size, step_size, npoints){
  let p_size = 0; // 多角形のサイズを初期化
  while(p_size < max_size){ // 最大サイズになるまで繰り返す
    let half_size = p_size / 2;
    drawPolygon(0, 0, half_size, npoints); // 多角形を描画
    p_size += step_size; // ステップサイズ分だけ増加
  }
}

function drawPolygon(x, y, radius, npoints) {
  let angle = TWO_PI / npoints; // 各頂点間の角度を計算
  beginShape(); // 多角形の描画を開始
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius; // x座標を計算
    let sy = y + sin(a) * radius; // y座標を計算
    vertex(sx, sy); // 頂点を設定
  }
  endShape(CLOSE); // 多角形の描画を終了し、形を閉じる
}

【作品No.14】さらに複数の同心多角形と色や線の太さなどの工夫

// 参考にさせていただいたページとURL
// [p5.js勉強会]同心円をライブコーディング
// https://www.youtube.com/watch?v=E_1E3p6KeNo

let colors = ["#780000","#c1121f","#fdf0d5","#003049","#669bbc"] // 色の配列
let numSides = 6; // 多角形の辺の数（例えば六角形）

function setup() {
  createCanvas(w=720, w); // キャンバスのサイズを設定
  colorMode(HSB); // 色モードをHSBに設定
  background(random(colors)); // 背景色をランダムな色に設定
  noFill(); // 塗りつぶしをなしに設定
  
  for(let i = 0; i < 10; i++){ // 10回繰り返す
    push(); // 現在の座標システムを保存
    translate(random(-150, w + 150), random(-150, w + 150)); // ランダムな位置に移動
    polygons_draw(random(50, 450), random(3, 30), numSides); // ランダムなサイズとステップで多角形を描画
    pop(); // 座標システムを復元
  }
}

function polygons_draw(max_size, step_size, npoints){
  let c_size = 0; // 多角形のサイズを初期化
  while(c_size < max_size){ // 最大サイズになるまで繰り返す
    strokeWeight(random(2, 8)); // ランダムな線の太さを設定
    stroke(random(colors)+ "D0"); // ランダムな色と透明度を設定
    drawPolygon(0, 0, c_size, npoints); // 多角形を描画
    c_size += step_size; // ステップサイズ分だけ増加
  }
}

function drawPolygon(x, y, radius, npoints) {
  let angle = TWO_PI / npoints; // 各頂点間の角度を計算
  beginShape(); // 多角形の描画を開始
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius; // x座標を計算
    let sy = y + sin(a) * radius; // y座標を計算
    vertex(sx, sy); // 頂点を設定
  }
  endShape(CLOSE); // 多角形の描画を終了し、形を閉じる
}