雑記

p5js 03-05 繰り返し (for文３）

Posted on by michi555 / 0件のコメント

学習日

2026年2月4日

名前

堀内道

自分で作った図形（コードと画像）

✅ 練習問題 3-5-2

function setup() {
  createCanvas(350, 350);
  background(216, 230, 243);
  stroke(177, 208, 231);
  strokeWeight(2);
  noFill();
  
  for (let i = 0; i < 8; i++){
    rect(i * 20 ,i * 20 ,i * -40 + 300, i * -40 + 300)
      
  }
//      rect(0 ,0 ,300, 300)
//      rect(20 ,20 ,260, 260)
//      rect(40 ,40 ,220, 220)
//      rect(60 ,60 ,180, 180)
//      rect(80 ,80 ,140, 140)
  
}

📷 実行結果

✅ 練習問題 3-5-3

function setup() {
  createCanvas(300, 300);
  background(255);
  fill(235, 210, 120);
  noStroke();
  // let size = 100;

  for (let i = 0; i < 3; i++) {
    triangle(0 + i * 100, 0, 0 + i * 100, 100, 100 + i * 100, 0);
    triangle(0 + i * 100, 100, 0 + i * 100, 200, 100 + i * 100, 100);
    triangle(0 + i * 100, 200, 0 + i * 100, 300, 100 + i * 100, 200);
  }
}

📷 実行結果

✅ 練習問題 3-5-4

function setup() {
  createCanvas(320, 320);
  background(223, 103, 86);
  fill(239, 209, 119);
  noStroke();

  for (let i = 0; i < 320; i += 80) {
    circle(40 + i, 40, 80);
    circle(40 + i, 120, 80);
    circle(40 + i, 200, 80);
    circle(40 + i, 280, 80);
  }
}

📷 実行結果

✅ 練習問題 3-5-7

function setup() {
  createCanvas(260, 180);
  background(236, 230, 226);
  stroke(68, 55, 78);

  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 4; j++) {
      if ((i + j) % 2 == 0)
        noFill();  // 塗りつぶす
      else
       fill(147, 135, 155);             // 塗りつぶさない
      rect(10 + i * 40, 10 + j * 40, 40, 40);
    }
  }
}

📷 実行結果

✅ 練習問題 3-5-8

function setup() {
  createCanvas(260, 180);
  background(223, 103, 86);
  fill(239, 209, 119);
  noStroke();

  for (let i = 0; i < 6; i++) {
    if (i % 2 == 0) rect(10 + i * 40, 10, 40, 40);
    else circle(30 + i * 40, 30, 40);

    if (i % 2 == 0) circle(30 + i * 40, 70, 40);
    else rect(10 + i * 40, 50, 40, 40);

    if (i % 2 == 0) rect(10 + i * 40, 90, 40, 40);
    else circle(30 + i * 40, 110, 40);

    if (i % 2 == 0) circle(30 + i * 40, 150, 40);
    else rect(10 + i * 40, 130, 40, 40);
  }
}

📷 実行結果

✅ 練習問題 3-5-9

function setup() {
  createCanvas(300, 300);
  background(216, 230, 243);
  stroke(177, 208, 231);
  strokeWeight(2);
  fill(159, 9, 19);

  for (let i = 0; i < 8; i++) {
    rect(i * 20, i * 20, i * -40 + 300, i * -40 + 300);
  }
   stroke(717, 128, 1);
  strokeWeight(1);
  for (let i = 0; i < 3; i++) {
    triangle(0 + i * 100, 0, 0 + i * 100, 100, 100 + i * 100, 0);
    triangle(0 + i * 100, 100, 0 + i * 100, 200, 100 + i * 100, 100);
    triangle(0 + i * 100, 200, 0 + i * 100, 300, 100 + i * 100, 200);
  }
}

📷 実行結果

まとめ

(i + j) % 2 == 0で塗りつぶすかどうかを判断するのはすごくて便利だなと思ったけど、

すごく難しいと思った。

for (let i = 0; i < 320; i += 80) などの数を変えるだけで、

長いプログラムが簡単に変えるできるのがとても便利だと思った。

三角形や正方形を書くときに座標の、どの数字にiなどを入れてどうやってするかなどを

考えるのが難しくてとても時間がかかってしまった。

コメントする