if 文（条件分岐）

if文は、条件によって処理を分岐させるための構文です。例えば、

条件式がtrueの場合に、処理１を実行
条件式がfalseの場合に、処理２を実行

というように、条件によって処理を分岐させることができます。

if (条件式) {
    // 条件式が true の場合に実行する処理
} else {
    // 条件式が false の場合に実行する処理
}

Practice 3.3.1

画面の中央に境界線を引き、マウスが境界線を超えたら、円の色を変えるプログラムを作成してみましょう。

§2.3 - アニメーションで学んだ、マウスの位置に円を描画するプログラムをベースに、以下の手順でプログラムを作成します。

function setup() {
    createCanvas(400, 400);
    background('#F1F5F9');
}

function draw() {
    circle(mouseX, mouseY, 100);
}

次に、以下の要素を更新してみます。

円の軌跡は描画したくないので、background()関数を draw()関数内に移動します。
画面の右半分をrect()関数で青色に塗りつぶします。

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

function draw() {
    background('#F1F5F9'); // 背景色を設定
    fill('#0868CE');
    rect(width / 2, 0, width / 2, height); // 右半分の四角形を描画
    fill(255);
    circle(mouseX, mouseY, 100);
}

次に、マウスが境界線を超えたら、円の色を変える処理を追加します。今回の一番重要な部分です。

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

function draw() {
    background('#F1F5F9'); // 背景色を設定
    fill('#0868CE');
    rect(width / 2, 0, width / 2, height); // 右半分の四角形を描画

    // もしもマウスの x 座標が「画面の中央よりも左側」であれば黒で、それ以外は白で円を描画
    if (mouseX < width / 2) {
        fill(0);
    } else {
        fill(255);
    }

    circle(mouseX, mouseY, 100);
}

if 文の雛形を思い出しましょう。

if (条件式) {
    // 条件式が true の場合に実行する処理
} else {
    // 条件式が false の場合に実行する処理
}

この場合、

条件式	true の時	false の時
`mouseX` が画面の中央よりも左側	黒で円を描画	白で円を描画
`mouseX < width / 2`	`fill(0);`	`fill(255);`

という処理を

if (mouseX < width / 2) {
    fill(0);
} else {
    fill(255);
}

と書くことで実装しています。

@codepen

比較演算子

先ほどのコード例の中で、if 文は*条件式*を使いました。この条件式には、比較演算子を使うことができます。比較演算子では、次のような条件を比較することができます。

== : 等しい
!= : 等しくない
> : より大きい
< : より小さい
>= : 以上
<= : 以下

これらの演算子を使うと、値が等しいか、大きいか、などを比較することができます。以下に比較演算子を使った例を示します。

let x = 10;
let y = 20;

if (x > y) {
    console.log('x は y より大きい');
} else {
    console.log('x は y より大きくない');
}

条件式を他の演算子に変更して、動作を確認してみましょう。

Practice 3.3.2

今度は§2.3 - アニメーションで学んだ、ランダムな位置に円を描画するプログラムをベースに、条件を加えることで、円の色を変えるプログラムを作成してみましょう。

function setup() {
    createCanvas(400, 400);
    background('#F1F5F9');
}

function draw() {
    let x = random(width);
    let y = random(height);
    let r = random(50);
    circle(x, y, r);
}

円の色を変える条件は、以下の通りです。

円の中心座標とキャンバス中心座標の距離が 80 ピクセルよりも小さい場合は、ピンク
円の中心座標とキャンバス中心座標の距離が 80 ~ 160 ピクセルの場合は、黄色
それ以外の場合は、白

さて、これはどのように条件式を書けばよいでしょうか？まず、円の中心座標からキャンバスの中心座標までの距離を計算する必要がありそうです。そうすれば、その距離が、100 ピクセルよりも大きいか小さいかを比較することができます。

２点間の距離は、dist()関数を使って簡単に計算することができます。例えば、点(0, 0)と点(100, 100)の距離は以下のように計算できます。

let d = dist(0, 0, 100, 100);
print(d);
>>> 141.4213562373095

以下はマウスの座標と、キャンバスの中心座標との距離を計算するプログラムの例です。興味があれば、コードも読んでみてください。

@codepen

それでは、条件式を追加して、円の色を変えるプログラムを完成させてみましょう。

function setup() {
    createCanvas(windowWidth, windowHeight);
    background('#F1F5F9');
}

function draw() {
    let x = random(width);
    let y = random(height);
    let r = random(50);
    let cx = width / 2;
    let cy = height / 2;
    let d = dist(x, y, cx, cy);

    if (d < 80) {
        fill('#F9A8D4');
    } else if (d < 160) {
        fill('#F9D8A8');
    } else {
        fill('#FFFFFF');
    }

    circle(x, y, r);
}