条件分岐とは
プログラミングは通常は最初の1行から終わりの1行まで順番に処理されます。しかし、それでは複雑な処理をコンピューターに実行させることができません。複雑な処理をさせるための方法のひとつとして条件分岐という考え方が存在します。
単純な処理:
公園に行く。
複雑な処理:
晴れたら公園に行く。
そうでなければ、家で読書する。
上の例のように、条件によって行動(=処理)が変化する(=分岐する)ことを条件分岐といいます。上の複雑な処理の例は以下のように条件分岐命令の書式で記述することができます。
if( 晴れ ){ 公園に行く; }else{ 家で読書する; }
練習課題09-01:if( 晴れ ){ 公園に行く; }else{ 家で読書する; }のように、あなたの行動を 条件分岐命令の書式で記述してみましょう。
コードであらわす場合は以下のように記述します。
if( 条件式 ){ 条件式が真の場合に実行する内容; }else{ 条件式が真ではない場合に実行する内容; }
プログラミングでは、真であることをtrueと記述します。また真ではない場合は偽とあらわしfalseと記述します。
次に実際にProcessingのコードとして条件分岐命令を記述してみましょう。
if文
if( 条件式 ){ 条件がtrueの場合に実行される内容; }
条件が真(true)の場合:
int i=1;
if( i>0 ){
background(0,0,0);
}
条件が偽(false)の場合:
int i=0;
if( i>0 ){
background(0,0,0);
}
if〜else文
if( 条件式 ){ 条件がtrueの場合に実行される内容; }else{ 条件がfalseの場合に実行される内容; }
int i=1;
if( i>0 ){
background(255,0,0);
}else{
background(0,0,255);
}
条件分岐命令を使用してProcessingのストラクチャーを利用したコードを記述してみましょう。
int x=0;
void setup(){
size(400,400);
}
void draw(){
x = mouseX;
if( x<200 ){
background(255,0,0);
}else{
background(0,0,255);
}
}
上のコードではウィンドウを幅400ピクセル、高さ400ピクセルに設定しマウスのX座標がウィンドウの中心(200ピクセルの位置)より「小さい(=true)か否(=false)か」を条件式として判定し、背景色を切り替えています。
練習課題09-02:if〜else文を活用してマウスの座標に応じて変化するグラフィック作品を 制作しなさい。
条件式
真偽を判定するために使用できる条件式を以下に記載します。
< 左辺が右辺より小さい
i<100
> 左辺が右辺より大きい
i>100
<= 左辺が右辺以下
i<=100
>= 左辺が右辺以上
i>=100
>== 左辺が右辺に等しい
i>==100
!= 左辺が右辺に等しくない
i>!=100
&& かつ (「かつ」はandとも表現する)
i>0 && i<100
|| または (「または」はorとも表現する)
i<0 || i>100
さまざまな条件式を利用したコードを記述してみましょう。
int x=0;
int y=0;
void setup(){
size(400,400);
}
void draw(){
x = mouseX;
y = mouseY;
if( x<200 ){ background(255,0,0); } if( x>200 ){
background(0,0,255);
}
if( x==200){
fill(0,0,0);
ellipse(width/2,height/2,300,300);
}
if( y>0 && y<100){
fill(255,255,255);
ellipse(width/2,height/2,200,200);
}
if( x<100 || x>300){
fill(0,255,0);
ellipse(width/2,height/2,100,100);
}
line(width/2,0,width/2,height);
line(0,height/2,width,height/2);
}
上のコードの例ではマウスの座標に応じて背景色や円の表示が切り替わります。
練習課題09-03:さまざまな条件式を活用してマウスの座標に応じて変化するグラフィック作品を 制作しなさい。