マウス操作で動かす

入力するコード

以下のコードを入力してください。
※Tabキーを押すと行頭に半角スペース2つが挿入されます。

void setup() {

  size(400, 300);

  noStroke();

}

  

void draw() {

  if (mousePressed) {

    fill(0);

  } else {

    fill(255);

  }

  ellipse(mouseX, mouseY, 80, 80);

}

結果

以下のような画面が表示され、マウスの動きに合わせて画面に白色の円を描き続けます。
　

　
また、マウスを左クリックしている間は黒い円を描き続けます。
　

　

解説

ここでは、円を継続的に画面に書き続けることで、Windowsの疑似「ペイント」のような機能を実現しています。図形を動かす：直線(1)にも登場した「setup()」、「void()」がここでも活躍します。今後よくお世話になるので今一度使い方を確認しましょう。
　

void setup() {

  size(400, 300);

  noStroke();

}

　
「setup()」の後の{}の中には、プログラムが実行される前に１度だけ実行したい処理をまとめて書きます。ここでは「size(400, 300);」で画面の大きさを決めています。
さらに、「noStroke();」でこの後描画する図形の縁取り線をなくしています。
　

void draw() {

  if (mousePressed) {

    fill(0);

  } else {

    fill(255);

  }

  ellipse(mouseX, mouseY, 80, 80);

}

　
「draw()」の後の{}の中には、繰り返し実行する処理をまとめて書きます。ここでも「if (...) {---} else {~~~}」が登場していますね（詳しくは条件分岐(if～else)について理解する）。
　
「if」の直後の()内の「mousePressed」は、文字通りマウスが左クリックされているか（プレスされているか）を確認するための「システム変数」です。
もしマウスが左クリックされているならば、「fill(0)」が実行され、そうでなければ「fill(255)」が実行されます。
　
「fill()」は基本の操作：図形に色を塗る／塗らないで学んだ通り、数字が１つの場合、「0」は黒、「255」は白を表します。したがって、今回の条件分岐を日本語で表現すると以下のように解釈されます。
　
「もしマウスが左クリックされているならば、この後描く図形を黒く塗りなさい。そうでなければ（マウスが左クリックされていなければ）この後描く図形は白く塗りなさい」
　
こうして図形の色が決まった後、「ellipse(mouseX, mouseY, 80, 80)」が実行されます。「mouseX」、「mouseY」はそれぞれ画面上のマウスの横方向と縦方向の位置を表す「システム変数」です。この二つの「システム変数」を用いることで、マウスのある位置に円を描くことができます。
　
なお、蛇足ですが、今回は「draw()」の中で「background(255)」を実行していないので、背景が毎回リセットされず、一度描いた円がずっと残ることで、あたかも絵を描いているかのように円を描き続けることができています。
　
「mousePressed」や「mouseX / mouseY」を用いてマウス操作を取り入れると、このようにインタラクティブ（双方向的）なプログラムをつくることができます。ぜひ覚えておきましょう。