posts tags categories about

Processing lesson(3) 条件分岐

Note
教材を使用される方は、“lesson資料のご利用について”のご一読をお願いします。

Learning Objectives

  • 条件分岐の必要性について理解する * 条件分岐を使ってプログラムを書いてみる（if, else, else if, switch)

講義

Processingでゼロから学ぶビジュアル・アート　臨機応変にふるまう（if文）

  • 現実世界は臨機応変 * もし〜なら：if文 * 条件式の書き方（if, else, else if)

演習1：マウスの右クリック、左クリックを判定する

参考：Processingでゼロから学ぶビジュアル・アート　臨機応変にふるまう（if文）　（マウスのどのボタンが押されたか：mouseButton）

「マウスのどのボタンが押されたか」を読み、プログラムを少し変えてみる。例えば・・・

  • 左クリックでは黒、右クリックでは青 * 左クリックでは黒、右クリックでは消しゴム

右クリックで消しゴムになるペン

mouseLEFT_RIGHT.pde

// 最初に1回だけ実行されるブロック
void setup() {
    size(600, 600);
    background(255, 255, 255);
}

// マウスボタンをドラッグした時だけ時に実行されるブロック
void mouseDragged() {
    // 左クリックが押された場合
    if (mouseButton == LEFT) {
        // カーソル位置に、青色(50, 67, 245)で線を引く
        stroke(50, 67, 245);
        line(pmouseX, pmouseY, mouseX, mouseY);
    }

    // 右クリックが押された場合
    else if(mouseButton == RIGHT){
        // 白い長方形（消しゴム）を書く
        fill(255, 255, 255);
        noStroke();
        rect(mouseX, mouseY, 20, 40);
    }
}

// mouseDragged()が動くためには draw()を書く必要がある
void draw() {
}

条件分岐をフローチャートで表すと・・？　

../../images/lesson/2020/09/スクリーンショット-2020-09-30-11.42.51.png

フローチャート: 教科書 p.67

演習2: 秒数で色が切り替わるペンを作る

参考：Processingでゼロから学ぶビジュアル・アート　臨機応変にふるまう（if文）　（現在の時刻・経過時間：hour(), minute(), second() ）

Switch文について

if文(else if, else)だけでなく、条件分岐では"switch文"も使える。

changeColorPen.pde

// 最初に1回だけ実行されるブロック
void setup() {
　　　　size(600, 600);
　　　　background(255, 255, 255);
}

// 色を判断するための変数
int c = 0;
// マウスボタンをドラッグした時だけ時に実行されるブロック

void mouseDragged() {
　　　　// 秒を5で割り、余りを求める
　　　　c = second() % 5;

　　　// cの値に応じて条件分岐する
　　　　switch(c) {
　　　　　　　　case 0:  // cが0の場合
　　　　　　　　　　　　fill(5, 11, 250);
　　　　　　　　　　　　break;  // break によりswitch文のブロックから抜ける
　　　　　　　　case 1:
　　　　　　　　　　　　fill(5, 250, 80);
　　　　　　　　　　　　break;
　　　　　　　　case 2:
　　　　　　　　　　　　fill(250, 250, 0);
　　　　　　　　　　　　break;
　　　　　　　　case 3:
　　　　　　　　　　　　fill(250, 132, 5);
　　　　　　　　　　　　break;
　　　　　　　　case 4:
　　　　　　　　　　　　fill(250, 5, 50);
　　　　　　　　　　　　break;
　　　　}

　　　　stroke(255,255,255);
　　　　ellipse(mouseX, mouseY, 100, 100);
}

// mouseDragged()が動くためには draw()を書く必要がある
void draw() {
}

../../images/lesson/2020/08/スクリーンショット-2020-08-31-14.54.12-988x1024.png 秒ごとに色が切り替わる

演習3：「条件式千本ノック」

Processingでゼロから学ぶビジュアル・アート　臨機応変にふるまう（if文）　**（条件式千本ノック）**を実際にプログラムを動かしながらやってみよう

当ユニット(unit07-3)のファイルの提出方法

演習１, ２, ３または学んだ内容を組み合わせ、“オリジナルのペンツール"に条件分岐を組み込んでみる

提出方法

  • 以下の作成物（プログラムファイル、画像のスクリーンショット）をOnedriveに提出してください

  • Processingのプログラムファイル

  • 実行結果（作ったペンで自分で描いた絵)の画像のスクリーンショット

    • ファイルには、出席番号、氏名が分かるように名前をつける

  • 28XX_XX太郎_unit7-2_pentool.pde (Processingのプログラムファイル)

  • 28XX_XX太郎_unit7-2-drawing.png (実行結果の画像）

    • 提出先 Onedrive(学校のOffice 365ログインが必要です）

    • Processingのプログラムは"Sketch"と言います。Sketchの配置場所は、“Processing” > “環境設定” > “Sketchの場所” に記載がありますので、その場所を見つけて、アップロードしてください。

    • スクリーンショットの撮り方

  • Windows の場合 : 実行結果の画面をアクティブにして、“Alt”+“Print Screen(PrtScn)"。コピーされた画像を、“Paint"ツールなどを使って保存する。

  • Macの場合: ”Command”+“Shift”+“4” で、範囲を選択（デスクトップにpng形式で画像が保存される)

Ref: