第6回 – IF(条件分岐)3


条件分岐の3回目です。

 条件分岐の2回目は、 | 「もしくは」を導入することによって全く同じ処理が行われる場合には1つにまとめる事で書かなければいけないコードの数を減らす、という内容でした。
今回は、 & 「かつ」 を導入することによって、より条件を絞っていく方法について書こうと思います。

例1

float x = 0;
float y = 0;

void setup() {

  size(800, 800);
}


void draw() {
  background(0);
  fill(255);
  rect(width/2, height/2, 300, 300);
  fill(255);
  ellipse(x, y, 20, 20);

  y = y + 10;

  if (y > height) {

    y = 0;
    x = random(width);
  }
}

まず、このコードをご自身のエディタに書き写して実行してみてください。
コピーしても構いませんが、手で写すとより効果的です。
sketch_160730a_と_sketch_160730a___Processing_3_1_1

こんな画面になったと思います。
上から円が落ちてきて、一番下まで行くと、また一番上に戻る、という感じです。

新しく、
width
height
rect
random
fill
の5つの見慣れない文字列が出てきていますので、まず解説します。

新出命令

width

widthは、size();の中で指定した横幅が、自動的に代入されている定数です。
size(800,800)と指定しているので、widthは 800と書いているのと同値です。
800と書けばいいじゃないか、と思うかも知れませんが、widthを使う利点は2つあります。
1つは、後から見た時に可読性(理解しやすさ)が格段に向上することです。
ひと目で「あ、ウインドウサイズの横幅と同じなんだ」という事が判ります。これはとても大切なことです。
もう1つは、何らかの事情でsize()の中の数字を後から変更した場合や、fullScreenで実行して環境によって画面サイズが変わっても、自動的にこの中の数字が書き換わってくれるので手でいちいち対応しなくても良い、という点です。
これは、ウインドウサイズを使う箇所が100箇所などになってくると、とても効果的です。
ウインドウサイズを指定したい場合には必ずwidthを使うようにしましょう。

height

これはwidthの縦幅バージョンです。

rect

これは、四角形を描け、というメソッドです。
rect(四角形の左上のx座標の位置, 四角形の左上のy座標の位置,横幅,縦幅)
という風に指定すると、四角形を描いてくれます。
x座標の位置とか、y座標の位置とか解りづらいので、
左からの距離、上からの距離、と読み替えて理解すると良いかもしれません。

random

これは前々回の例題でも少し出てきましたが、
random(上限の値)
としてやると、0 〜上限の値 – 1までの数がランダムに返ってきます。
例えば、

 float n = random(100);

とした場合、nには0.0〜99.0までのランダムな値が入ります。
小数点付の数値が返ってくるため、int型の変数に代入しようとするとエラーが出ます。
float型を使うようにしましょう。(int型にキャストする方法もありますが、それはまたのちほど紹介します)

fill

これは、中に0〜255段階の明るさを指定する事によって、
この命令以降に出てくる全ての図形を、指定した明るさで塗りつぶす、というメソッドです。
以降、ですので、例えコードの一番下に書いてあったとしても、次のフレームの別のfill()メソッドが出てくるまでは有効です。
また、r g bそれぞれの値を指定してやることによって、好きな色で塗りつぶすことも出来ます。
その場合、
fill(255,0,0)
のように、数字を3つ指定する事になります。
それぞれ0から255までの数値で、左から
fill(赤味、緑味、青味);
です。全て255だと白、全て0だと黒になります。

メソッド?

さっきから自然にメソッドという名前で呼んでいますが、processingでは 名前() で終わるものをメソッドと呼びます。
()の中に指定する数字を引数(ひきすう)と呼び、入れた値によって効果を変化させる事が出来ます。
また、メソッドは自分で作ることも出来ます(これはまたのちほど紹介します。)

  
y = y + 10;

  if (y > height) {

    y = 0;
    x = random(width);
  }
  

つまり、この部分はyの値に10ずつ足していって(yの値が10増えると円の位置が10ピクセル下に下る)、height(画面の高さ)よりも大きくなったらifの中が実行されてyは0(一番上)に戻り、xの位置がランダムな位置に変わる、というわけです。

本題…?

では、このプログラムで、円が四角形の中に入った時だけ、円の色を赤にする、という風にしたい場合にはどうしたら良いでしょう?
長くなってきたので、本題は次回にしたいと思います。
この記事と、次の記事を並べて表示すると理解しやすくて良いかも知れません。