条件分岐を学ぼう

チャプター1このレッスンのゴール

このレッスンで完成させるものを確認しよう

チャプター2四角形をマウスと連動して複数表示しよう

2. 1 写してみよう

//最初に一回だけ呼び出される初期設定
function setup() {
  createCanvas(400, 400);
  background(200);
}

//繰り返し呼び出される処理
function draw() {
  //マウスの位置に四角を描画
  rect(mouseX, mouseY, 30, 30);
}

マウスの場所に応じて、四角が描かれていればOKです。

チャプター3マウスクリックと連動して条件を変えてみよう

ここまでの見本29

3. 1 変更してみよう

   function draw() {
     //マウスの位置に四角を描画
     rect(mouseX, mouseY, 30, 30);
+    //マウスクリック判定
+    if (mouseIsPressed) {
+      fill(255, 255, 0);
+    } else {
+      fill(255, 0, 255);
+    }
   }

マウスをクリックしたときに、色が変更されればOKだよ。

3. 2 コードの解説

if文を使って、マウスがクリックされたときとそうでないときで場合を分けています。

if else文

条件にあったときと、そうでないときの処理をそれぞれ指定したいときの命令文です。

書き方は次の通りです。

if(条件式){
    条件が成立したときの処理
}else{
    条件が成立しなかったときの処理
}

条件式の書き方は色々あります。

• 論理演算子を使う方法
  • 数字の大小を比べるときは、<=、<、>=、>を使います。
  • 等しいかどうかを比べるときは==を使います。イコールが2個であることを注意しましょう。
• ture/falseを返してくれる関数を使う方法
  • 条件が正しいとき真(しん)true、正しくないときfalse偽(ぎ)となります

つまり、

if(条件式){
    条件式がtrueだったときはここに書かれた処理が実行される
}else{
    条件式がfalseだったときはここに書かれた処理が実行される
}

と理解しておきましょう。

mouseIsPressd

mouseがクリックされたときにtrue、そうでないときはfalseとなります。

チャプター4論理演算子を使ってみよう

ここまでの見本30

4. 1 変更してみよう

function draw() {
+ //位置によって図形を描き分ける
+ if(mouseX >= 200 && mouseY >= 200){
    //マウスの位置に四角を描画
    rect(mouseX, mouseY, 30, 30);
+ }else{
+   ellipse(mouseX, mouseY, 30, 30);
+ }

  //マウスクリック判定

コードの解説

10行目にある&&は論理演算子といい、2つの条件式を合っているかどうかを判定するためのものです。ここではmouseXが200以上でかつmouseYが200以上になるとき、つまり、右下にマウスがある時の条件を指定しています。

論理演算子

ここでは、ひとまず「かつ」と「または」を覚えておきましょう。

• &&
  • 「かつ」という意味で、右と左の条件が成立するときにtrueとなり、条件が成立とみなされます。
• ||
  • 「または」という意味で、右と左の条件のどちらかが成り立つときにtrueとなり、条件が成立とみなされます。

チャプター5チャレンジしよう

このレッスンで作ったコードを拡張させよう。

完成形

• 画面右上と左下にマウスがある場合はlineを描く
• マウスがクリックされたときは、strokeが黒、そうでなければ白

ヒント

• lineは次のような構文です。

line(線の開始位置X座標, 線の開始位置Y座標, 線の終了位置X座標, 線の終了位置Y座標)

line(30, 20, 85, 55);

• lineの引数は、mouseXとmouseYからそれぞれ20を足したり引いたりしているよ。