雑記

03-05 繰り返し（for文3）

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

練習問題3-5-2

下記の画像を描きなさい。線の間隔は20pxです。

function setup() {
  createCanvas(300, 300);
  background(216, 230, 243);
  stroke(177, 208, 231);
  strokeWeight(2);
  noFill();
  
  for(let i =20; i <= 170; i += 20){
    rect( i, i, 300 - (i*2))
  }
}
なんか、うまくいきました
仕組みを理解して作りはしましたが、大きさを変える方法を考えてピンときた方法を試したら、一発でうまくいったのですが、テンションが上がっていたからなのか、なぜか物足りない感覚がしました。
ちなみに、下の画像とプログラムは作ってる途中に試してみたら、なんかきれいだったので、載せておきます。
function setup() {
  createCanvas(300, 300);
  background(216, 230, 243);
  stroke(177, 208, 231);
  strokeWeight(2);
  noFill();
  
  for(let i =20; i <= 170; i += 20){
    rect( i, i, 150)
  }
}

練習問題3-5-3

下記の画像を描きなさい。三角形の短辺の長さは100ptです。

function setup() {
  createCanvas(300, 300);
  background(255);
  fill(235, 210, 120);
  noStroke();
  let size = 100;
  
  for(let x =0; x < 300; x+=100){
    for(let y =0; y < 300; y+=100){
      triangle(x, y, size+x, y, x, size+y);
    }
  }
}
三角形は引数が多くて結構戸惑いましたが、ちゃんと一つ一つ冷静に考えたらできました。

練習問題3-5-4

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

  
  for(let x=0; x<4; x++){
    for(let y=0; y<4; y++)
    circle(40+(x*80), 40+(y*80), 80)
  }
}
個人的には前の三角形のほうが難しく感じました。

練習問題3-5-7

if文の条件を変更して、チェッカーボード模様の黒と白を反転させなさい。

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== 1)
        fill(147, 135, 155);  // 塗りつぶす
      else
        noFill();             // 塗りつぶさない
      rect(10 + i * 40, 10 + j * 40, 40, 40);
    }
  }
}
if ((i + j) % 2== 0)という物が何をしているのかをかを確かめるためにいろいろ、数字を変えて試していたら、成功してしまったのですが、それでは何もわからないと思って、AIに聞きました。
％２というのが割ったあまりの計算であり、あまりが０ならばという条件だったのだということがわかりました。

練習問題3-5-8

格子状に四角形と円を交互に配置する模様を描きなさい。図形は内側に上下それぞれ10pxずらして描くこと。

function setup() {
  createCanvas(260, 180);
  background(223, 103, 86);
  fill(239, 209, 119);
  noStroke();
  
  for(let i=0; i<6; i++){
    for(let j=0; j<4; j++){
      if((i+j) %2 ==1){
        circle(30+i*40, 30+j*40, 40);
      }
      else{
        rect(10+i*40, 10+j*40, 40, 40);
      }
    }
  }
}
この課題は個人的にはそこまで苦戦することはなかったのですが、fiの後に｛｝が付いていなかったのが気になりました。今度、先生に聞いてみようと思います。

練習問題3-5-9

for文を使って、自分だけのオリジナルデザインを作成しなさい。色や形を自由に組み合わせて、美しい模様を作ってみましょう。

function setup() {
  createCanvas(400, 400);
  background(250, 150, 150);
  for(let xy=0; xy<40; xy++){
    stroke(100, 250, 100)
    line(400, xy*20, xy*20, 0)
    line(0, xy*20, xy*20, 400)
    line(xy*20, 400, 400, 400-xy*20)
    line(400-xy*20, 0, 0, xy*20)
    noFill()
    circle(200,200, xy*40)
    rect(xy*20, xy*20, 400-xy*40)
  }
}

いろいろ考えて試してみましたが、どれもうまくいかなかったので、やけくそになって線を引いていたら、奇麗な模様ができたので、円と四角を追加してみました。

コメントする