【p5.js】同心三角形を描く【作品No.9-11】

2025年1月13日

URLをコピーしました！

ワタタク

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

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

この記事を書いた人

ワタタク

プロフィール

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

作品の画像とコード

【作品No.9】中心に同心三角形

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

let colors = ["#f79256","#fbd1a2","#7dcfb6","#00b2ca","#1d4e89"]; // 色の配列

function setup() {
  createCanvas(w=720, w); // キャンバスのサイズを設定
  colorMode(HSB); // 色モードをHSBに設定
  background(100); // 背景色を設定

  noFill(); // 塗りつぶしをなしに設定

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

  let c_size = 0; // 三角形のサイズを初期化
  while(c_size < 500){ // 最大サイズになるまで繰り返す
    let half_size = c_size / 2;
    triangle(-half_size, half_size, half_size, half_size, 0, -half_size); // 三角形を描画
    stroke(random(colors)); // 線の色を設定
    c_size += 10; // サイズを10ずつ増加
  }
}

triangle部分の補足

triangle(-half_size, half_size, half_size, half_size, 0, -half_size);

//以下のような形になっている。

      3
     / \
    /   \
   /     \
  1-------2

各頂点の座標：

(-half_size, half_size) – 左下の点
(half_size, half_size) – 右下の点
(0, -half_size) – 上の点

例えば、half_size が 50 の場合、各頂点の座標は以下のようになる

左下の点：(-50, 50)
右下の点：(50, 50)
上の点：(0, -50)

これらの点を結んで三角形が描かれます。こんな感じ。

左下の点から右下の点に線を引く
右下の点から上の点に線を引く
上の点から左下の点に線を引く

while部分の処理の流れ

let c_size = 0; // 三角形のサイズを初期化

while(c_size < 500){ // 最大サイズになるまで繰り返す
  let half_size = c_size / 2; // 三角形の半分のサイズを計算
  triangle(-half_size, half_size, half_size, half_size, 0, -half_size); // 三角形を描画
  stroke(random(colors)); // 線の色を設定
  c_size += 10; // サイズを10ずつ増加
}

数値の流れ:

初期状態: c_size = 0
- half_size = 0
- 三角形の頂点: (-0, 0), (0, 0), (0, -0)
1回目のループ: c_size = 10
- half_size = 5
- 三角形の頂点: (-5, 5), (5, 5), (0, -5)
2回目のループ: c_size = 20
- half_size = 10
- 三角形の頂点: (-10, 10), (10, 10), (0, -10)
3回目のループ: c_size = 30
- half_size = 15
- 三角形の頂点: (-15, 15), (15, 15), (0, -15)

…

最後のループ:

c_size = 490

half_size = 245
三角形の頂点: (-245, 245), (245, 245), (0, -245)

【作品No.10】複数の同心三角形

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

let colors = ["#f79256","#fbd1a2","#7dcfb6","#00b2ca","#1d4e89"]; // 色の配列

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)); // ランダムな位置に移動
    triangles_draw(random(50, 200), random(2, 20)); // ランダムなサイズとステップで三角形を描画
    pop(); // 座標システムを復元
  }
}

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

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

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

let colors = ["#f79256","#fbd1a2","#7dcfb6","#00b2ca","#1d4e89"]; // 色の配列

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)); // ランダムな位置に移動
    triangles_draw(random(50, 450), random(3, 30)); // ランダムなサイズとステップで三角形を描画
    pop(); // 座標システムを復元
  }
}

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