＊＊＊課題はページ最下段に記載しています。＊＊＊
条件分岐
プログラミングは通常は最初の１行から終わりの１行まで順番に処理されます。しかし、それでは複雑な処理をコンピューターに実行させることができません。複雑な処理をさせるための方法のひとつとして条件分岐という考え方が存在します。
単純な処理：
公園に行く。
複雑な処理：
晴れたら公園に行く。
そうでなければ、家で読書する。
上の例のように、条件によって行動（＝処理）が変化する（＝分岐する）ことを条件分岐といいます。上の複雑な処理の例は以下のように条件分岐命令の書式で記述することができます。
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ループ文を活用してマウスの座標に応じて変化するグラフィック作品を制作してみましょう。
課題5 オンデマンド課題と対面授業課題をそれぞれの締切日までに実施し提出してください。 １）オンデマンド課題 以下の用語について調査し記述しなさい。 「ジェネラティブデザイン」 課題提出方法 CSのレポート掲示板「デジタルコンテンツ実習Ⅵ(プログラミング) 第５回」に PDF形式のファイルをアップロードしてください。 A4サイズ 縦位置・横書き 提出締切：11月11日（水）まで ２）対面授業課題 対面授業を受講後、以下の内容に沿ってコードを作成し、コードのリンクを記載した書類を提出する。 「これまでに学んだ、点、線、面および色のコードと 条件分岐や繰り返しの構造を組み合わせて、グラフィック作品を作成してください。」 課題提出方法 作成した作品へのリンク用文字列が記述された文書を、PDF形式のファイルにしてアップロードしてください。 A4サイズ・縦位置・横書き 提出締切：11月18日（水）まで12月2日（水）まで 期間延長しました ＊第5回授業用CSレポート掲示板の提出は11月18日（水）12月2日（水）まで可能ですが、 それぞれの締切日をこちらで 確認していますので、 締切日を守って提出するようにしてください。