03-05 繰り返し(for文3)

for文のいよいよ3章に突入しました。

英単語を覚えるにはインパクトが大事だと思うんですよね。準一級の単語の中でも見たことはないけど印象が強くて一瞬で覚えられた単語があります。

overthrowです。over(超えて)throw(投げる)だから遠投とかかなあ?と思っちゃいますが、overthrowで(国家などを)転覆するって意味になります。

国家転覆は印象強いですよね。一つ一つの単語に意味を持たせて、この単語はあれに似てたな…と、decayだったら「でかい」みたいなスペル書く単語だったな…確かでかいものはたいてい腐ってるって覚えたな…decayは腐るだ。みたいに覚えられます。がんばんなきゃね!

練習問題3-5-2🦆

やっていきます。四角形を内側に狭まっていくように20pxずつ小さくしていきます。

function setup() {
  createCanvas(300, 300);
  background(216, 230, 243);
  stroke(177, 208, 231);
  strokeWeight(2);
  noFill();
  for(let i =0; i <= 14; i++)
    {
      rect(i*20,i*20,i*-40+width,i*-40+height)
      print(i*20);
      print(i*-40+width)
    }
}

そういえばrectって三番目、四番目の数は大きさを指定するものだったなあ。座標を指定すると思ってずっと20で計算していたおかげでずっと完成せず右下に四角形が収束していく感じの図形になっていた。

大きさの指定なら20pxを両方から引くわけだから、40pxになるね!

練習問題3-5-3

三角形編
三角形はtriangleを使うのかな?

function setup() {
  createCanvas(300, 300);
  background(255);
  fill(235, 210, 120);
  noStroke();
  let tsize = 100;
  for(let i = 0; i < 3; i++)
    {
      for(let j = 0; j < 3; j++)
        {
          let x = tsize*i;
          let y = tsize*j;
          triangle(x,y,x+tsize,y,x,y+tsize);
        }
    }
}

triangleの中がすげえ長いしめちゃくちゃ見づらかったので座標の意味を込めてx,y変数を当て、sizeはもともと指定されていてエラーが出てしまうのでtrianglesizeを略してtsizeとしました。

二重でfor文を使う、ネストにすれば簡単ですね!

練習問題3-5-4

座標指定の仕方を間違えなければすぐに作成できそうですね。

function setup() {
  createCanvas(320, 320);
  background(223, 103, 86);
  fill(239, 209, 119);
  noStroke();
  for(let i = 0; i < 4; i++)
    {
      for(let j = 0; j < 4; j++)
        {
          circle(width/4*i+width/8,height/4*j+height/8,320/4)
        }
    }
}

特に指定がないのでwidth,heightを使いました。計算を実数でするよりも幾分か簡単なのでやっぱり元から作られてる変数っていうものは偉大ですね。

座標指定の仕方は、circle(円の中心のx, y,半径)です。中心を指定するため、あらかじめ左上の余白の分を足しておかないと中心が左端にめり込んでしまいます。

練習問題3-5-7

次はちょっと頭を捻って考えましょう。とりあえずネストは作りそうで、%2より余りで偶奇を判断すれば良さそうですね。

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);
    }
  }
}

上の方の例題がありましたね。余りが1になったときに塗りつぶせば簡単に反転させることができます。

練習問題3-5-8

さて、ラスボスです。ネストを2つ使ったほうが直感的にわかりやすい気もしますが、偶数奇数を判断してやったほうがかっこよくプログラムを組むことができます!

function setup() {
  createCanvas(260, 180);
  background(223, 103, 86);
  fill(239, 209, 119);
  noStroke();
  for (let x = 0 ; x < 6; x++)
    {
      for(let y = 0; y < 4; y++)
        {
          let length = 40;
          if((x+y)%2 == 0)
            {
              rect(length*x+10,length*y+10,length,length);
            }
          else
            {
              circle(length*(x+1/2)+10,length*(y+1/2)+10,length);
            }
        }
    }
}

ほらかっこいいでしょう!!特にcircleのlength*(x+1/2)のところ、カッコつけポイントです。
分配法則をわかってくれるかなあってlength(x+1/2)と書いてみましたが、普通にエラーがでした。
fill()のように、length()関数がもともとあるそうです。
もう一つ、rectの書き方です。また間違えてしまいました。x座標、y座標、幅、高さです。
何回やってもうまくいかねぇなと思っていたら、この勘違いでした。

コメントする