雑記

p5js 03-03 繰り返し（for文１）

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

学習日

2025年5月17日

名前

堀内道

自分で作ったプログラム（コードと画像）

✅ 練習問題 3-3-1

function setup() {
  createCanvas(300, 300);
  background(220);
  strokeWeight(3);

  for (let i = 0; i < 10; i++) {
    stroke(255,i * 25,100)
    line(0, i * 10, 100, i * 10);
  }
}

📷 実行結果

✅ 練習問題 3-3-2

image-13-700×143.pngダウンロード

✅ 練習問題 3-3-3

function setup() {
  createCanvas(300, 300);
  background(220);
  strokeWeight(2);
  
  x = 0;
  y = 0;

  for (let i = 0; i < 10; i++) {
    line(0+x, i * 10+y, 100+x, i * 10+y);
   }
  for (let i = 0; i < 10; i++){
    line(i * 10+x, 0+y, i * 10+x, 100+y);
   }    
}

📷 実行結果

✅ 練習問題 3-3-4

function setup() {
  createCanvas(300, 300);
  background(220);
  strokeWeight(2);
  
  x = 20;
  y = 20;

  for (let i = 0; i < 10; i++) {
    line(0+x, i * 10+y, 100+x, i * 10+y);
   }
  for (let i = 0; i < 10; i++){
    line(i * 10+x, 0+y, i * 10+x, 100+y);
   }    
}

📷 実行結果

✅ 練習問題 3-3-5

function setup() {
  createCanvas(400, 400);
  background(255);
  gridlines=20;
  
  stroke(200);
  strokeWeight(1);
  　　
  for (let i = 0; i < 20; i++) {
　  line(0, i * 20, 400, i * 20);
    line(i * 20, 0, i * 20, 400);
  }    

  // 座標軸の描画
  stroke(0);
  strokeWeight(1);
  line(0,200,400,200)
  line(200,0,200,400)
}

📷 実行結果

まとめ・感想

線を1本、１本書くのが「for」を使うだけで、コードが一つで済むのでとても便利だと思った。

練習問題のコードの「for(let i =~)」と「let(0~200);」を作るのがとても難しくていつもよりも時間がかかってしまった。

for分を使いこなすにはもっと練習するのが大切だと思った。

あと少し線の引き方を忘れていたので、しっかりと前作ったまとめを見直したい。

もし、もっと線をずらしてと言われた時に何か所も数字を変えるのが大変なのでｘの変数ｙの変数を作って簡単にコードの数字を変えれるようにした。

文の位置が毎回ぐちゃぐちゃになってしまうので、しっかりと整えるように気を付ける。

コメントする