今までにクマさんを移動させるプログラムを作りました。もっとかわいく手の込んだ独自のキャラクターを作成した方もいるでしょう。このようなキャラクターの移動速度を早めたり、移動方向を変えたり、画面の端に到達したら色を変えるといったことができると楽しいですね。こういった処理は、if文というものを使うことでできるようになります。
まずはif文の書き方を説明します。ifに続く丸括弧の中に条件式を書き、そのあとに続く波括弧の中に条件式が正しいときに行われる処理を書きます。具体的には下記のようになります。
int x = 0;
if(x == 0){ //ifのあとの丸括弧の中に条件式を書く。この場合は「x==0」が条件式
println("xはゼロです"); //波括弧の中に条件が正しいときに行われる処理を書く。
} 上記コードでは、「x==0」が条件式で「println("xはゼロです");」が、条件式が正しいときに行われる処理です。波括弧の中の処理は複数行でも可能です。
条件式で使う記号には、==（イコール）、<（小なり）、>（大なり）、!=（イコールでない）などがあります。
上記プログラムを実行して、その動作を確かめてみましょう。コンソールに「xはゼロです」と出力されれば、正しく動作しています。
下記コードを実行すると、どうなるでしょうか？
int x = 1;
if(x == 0){
println("xはゼロです");
}
条件式は「x==0」つまり、「xは0である」です。しかしながらxの値は1であり、この条件に合いません。そのため波括弧中の処理は実行されません。結局、このコードでは何も出力されないのが正しい動作です。
elseを用いると、「if文の条件式が正しくない場合に行う処理」を書くことができます。その使い方は下記のようになります。
int x = 1;
if(x == 0){
println("xはゼロです");
}else{
println("xはゼロではありません"); //「else」のあとの波括弧の中に、if文の条件式が正しくない場合に行う処理を書く。
} このコードを実行すると、コンソールに「xはゼロではありません」と出力されます。「x==0」というif文の条件式が正しくないため、elseに続く波括弧の中の処理が実行されるのです。
では一行目の「x = 1」を「x=0」に変更するとどうなるでしょうか。確かめてみましょう。
「else」を用いると、「if文の条件式が正しくない場合に行う処理」を定義できることを上記で説明しました。ここでは「else if」を説明します。これを用いると、「if文の条件式が正しくない場合に行う条件式」を定義できます。
下記が具体例です。
int x = 0;
if(x == 0){ //①：はじめに判定する条件
println("xはゼロです");
}else if(x==1){ //②：①の条件に合わないときに、判定する条件
println("xは１です");
}else{
println("xはゼロでも1でもありません"); // ③：②の条件に合わないときに行う処理
} この場合、まずは①の条件式の判定が行われます。それが正しければ、つまり「x==0」であれば、if()に続く波括弧の中の処理が行われます。
①の条件式が正しくない場合は、②の条件式の判定が行われます。つまり、「x==0」でない場合、「x==1」であるかどうかの判定が行われます。「x==1」であれば、else if()に続く波括弧の中の処理が行われます。
①の条件式も②の条件式も共に正しくない場合、つまり、「x==0」でも「x==1」でもない場合は、elseに続く波括弧の中の処理③が行われます。
このように言葉で説明すると、ややこしいですね。スポーツと同じで、自分で実際にやってみなければなかなか理解できないと思います。この例では一行目で変数xに0を代入していますが、この値を様々に変更して、どのように動作するかを確認してみましょう。
else ifは増やすことができます。下記がその例です。
int x = 1;
if(x == 0){
println("xはゼロです");
}else if(x==1){
println("xは１です");
}else if(x==2){
println("xは１です");
}else{
println("xはゼロでも1でも2でもありません");
}制御処理をアニメーションに応用してみましょう。円が左から右に移動するアニメーションを以前作成しました。ifを使って、円が画面右端に到達したら、再び左端から登場するようにしてみます。
int x;
void setup() {
size(480, 270);
x = 0;
}
void draw() {
background(200, 200, 200);
x++;
ellipse(x,height/2,50,50);
if(x > width){ //if文を使って、変数xが画面幅より大きくなると、0になるようにする。
x = 0;
}
}下記のように動けば、正しくプログラムが書けています。（この例では、画面をタッチすると動作が止まります）
しかしながらこの例では、円が画面端から完全に消える前に、再び左端から登場してしまいます。左端から再登場する際にも、はじめから円の右半分が表示されています。下記はこの点を改善したプログラムです。
修正方法は簡単です。円の半径が25なので、その分の値を調整してあげればよいです。
int x;
void setup() {
size(480, 270);
x = 0;
}
void draw() {
background(200, 200, 200);
x++;
ellipse(x,height/2,50,50);
if(x > width+25){ //修正箇所
x = -25; //修正箇所
}
}プログラムを正しく書けば、下記のように動作します。
下記は、クマさんを左から右に移動させるプログラムです。クマさんが画面から出たら、元の位置から出発するようにしました。
int x;
void setup() {
size(480, 270);
x = 0;
}
void draw() {
background(200, 200, 200);
x++;
fill(198, 59, 6); //茶色
ellipse(x- 50, height/2 -60, 60, 60); //左耳
ellipse(x+ 50, height/2 -60, 60, 60); //右耳
fill(250, 111, 96); //ピンク
ellipse(x- 50, height/2 -60, 30, 30); //左耳の内側
ellipse(x+ 50, height/2 -60, 30, 30); //右耳の内側
fill(198, 59, 6); //茶色
ellipse(x, height/2, 150, 150); //顔
fill(0, 0, 0); //黒
ellipse(x- 20, height/2 -20, 20, 40); //左目
ellipse(x+ 20, height/2 -20, 20, 40); //右目
line(x- 20, height/2 + 30, x+ 20, height/2 + 30); //口
if(x > width +75){
x = -75;
}
}上記の実行結果は下記URLで見ることができます。
理解を深めるために、クマさんや円が画面端に達したら、移動方向を変えたり、移動速度を変えたりしてみるとよいしょう。