2021プログラミング３：条件分岐と繰り返し構造

条件分岐
プログラミングは通常は最初の１行から終わりの１行まで順番に処理されます。しかし、それでは複雑な処理をコンピューターに実行させることができません。複雑な処理をさせるための方法のひとつとして条件分岐という考え方が存在します。

単純な処理：
公園に行く。

複雑な処理：
晴れたら公園に行く。
そうでなければ、家で読書する。

上の例のように、条件によって行動（＝処理）が変化する（＝分岐する）ことを条件分岐といいます。上の複雑な処理の例は以下のように条件分岐命令の書式で記述することができます。

if( 晴れ ）{ 公園に行く; }else{ 家で読書する; }

練習：if( 晴れ ）{ 公園に行く; }else{ 家で読書する; }のように、
あなたの行動を条件分岐命令の書式で記述してみましょう。

コードであらわす場合は以下のように記述します。

if( 条件式 ){ 条件式が真の場合に実行する内容; }else{ 条件式が真ではない場合に実行する内容; }

プログラミングでは、真であることをtrueと記述します。また真ではない場合は偽とあらわしfalseと記述します。

次に実際にProcessingのコードとして条件分岐命令を記述してみましょう。

if文
if( 条件式 ){ 条件がtrueの場合に実行される内容; }

条件が真（true）の場合：

let i=1;
if( i>0 ){
 createCanvas(255,0,0);
}

条件が偽（false）の場合：

let i=0;
if( i>0 ){
 createCanvas(0,0,255);
}

if〜else文
if( 条件式 ){ 条件がtrueの場合に実行される内容; }else{ 条件がfalseの場合に実行される内容; }

let i=1;
if( i>0 ){
 createCanvas(255,0,0);
}else{
 createCanvas(0,0,255);
}

条件分岐命令を使用してProcessingのストラクチャーを利用したコードを記述してみましょう。

let x=0;

function setup(){
  createCanvas(400,400);
}

function draw(){
   x = mouseX;
   if( x<200 ){
      background(255,0,0);
   }else{
      background(0,0,255); 
   }
}

上のコードではウィンドウを幅400ピクセル、高さ400ピクセルに設定しマウスのX座標がウィンドウの中心（200ピクセルの位置）より「小さい（=true)か否（=false)か」を条件式として判定し、背景色を切り替えています。

練習：if〜else文を活用してマウスの座標に応じて変化するグラフィック作品を制作してみましょう。

条件式
真偽を判定するために使用できる条件式を以下に記載します。

< 左辺が右辺より小さい

i<100

> 左辺が右辺より大きい

i>100

<= 左辺が右辺以下

i<=100

>= 左辺が右辺以上

i>=100

>== 左辺が右辺に等しい

i>==100

!= 左辺が右辺に等しくない

i>!=100

&& かつ (「かつ」はandとも表現する）

i>0 && i<100

|| または　(「または」はorとも表現する）

i<0 || i>100

さまざまな条件式を利用したコードを記述してみましょう。

let x=0;
let y=0;

function setup(){
  createCanvas(400,400);
}

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

上のコードの例ではマウスの座標に応じて背景色や円の表示が切り替わります。

練習：さまざまな条件式を活用してマウスの座標に応じて変化するグラフィック作品を制作してみましょう。

 

繰り返し構造
プログラムでは繰り返しの構造を使うことで、ひとまとまりのコードを繰り返し実行することができます。繰り返しの構造を使うことで複雑な構造のプログラムを短いコードにできたり、プログラムにパターンを生み出すことなどができます。

forループ文
繰り返し構造を記述するコードとしてforループ文を使ったプログラムを作成してみましょう。
forループ文は以下のように記述します。

for(初期値; 条件式; 更新）{

繰り返し実行されるコード

}

例）
for(i = 0; i < 100; i+=10）{

ellipse(i,100,20,20);

}

・「初期値」で最初の値を設定します。 　forループ文では慣例的に変数 i が使われることが多いです。
この例では変数iが宣言され、初期値は0に設定されています。
・「条件式」で変数 i を評価します。 　変数　i の値を比べて条件にあわなくなるまで「繰り返し実行されるコード」を実行します。
この例では変数iの値が100以下の値である限り「繰り返し実行されるコード」が実行され続けます。
・「更新」で変数の値を変化させていきます。
この例では変数iの値は10ずつ加算されていきます。0,10,20,30,40〜のように変化します。

条件式の例
i > A　Aより大きい
i < A　Aより小さい 　i >= A　A以上
i <= A　A以下
i == A　Aと等しい
i != A　Aと等しくない
「更新」で変数 i の値をどのように変化させるかの例
i+=10ならコードが実行されるごとに変数 i に10加算
i-=10なら10減算
i++は１加算
i–は1減算。

それでは、forループ文を使った繰り返し構造のプログラムを記述してみましょう。

function setup(){
  createCanvas(400,200);
}

function draw(){
  for(let i = 20; i < 400; i += 20){
    ellipse(i,100,20,20);
  }
}

二重の繰り返し構造
forループ文のなかにforループ文を記述することができます。
それでは、二重の繰り返し構造のプログラムを記述してみましょう。

function setup(){
  createCanvas(400,400);
  background(0);
  noStroke();
}

function draw(){
  for(let i = 0; i <= 400; i += 20){
    for(let j = 0; j <= 400; j += 20){
      fill(255,48,203);
      ellipse(i,j,15,15);
   }
  }
}

二重の繰り返し構造を使った別のプログラムを記述してみましょう。

function setup(){
  createCanvas(400,400);
}

function draw(){
  background(0);
  fill(252,145,3);
  stroke(250,240,48);
  for(let i = 0; i <= 400; i += 20){
    for(let j = 0; j <= 400; j += 20){
      ellipse(i,j,10,10);
      line(i,j,mouseX,mouseY);
   }
  }
}

練習：forループ文を活用してマウスの座標に応じて変化するグラフィック作品を制作してみましょう。