キーボード操作で動かす
入力するコード
以下のコードを入力してください。
※Tabキーを押すと行頭に半角スペース2つが挿入されます。
void setup() {
size(400, 400);
noStroke();
fill(255);
}
void draw() {
background(0);
if (keyPressed) {
fill(int(random(0, 255)));
}
ellipse(width / 2, height / 2, 100, 100);
}
結果
以下のように黒い背景の中心に白い円が現れ、キーボードのキーを押すたびに白～黒の間で色がランダムで変化します。
解説
前回のテーマはマウス操作で動かすでしたが、今回はキーボードの操作を利用するプログラムの一例を紹介します。
まずは、いつも通り「setup()」と「void()」の中身を見ていきましょう。
「setup()」では、以下が実行されています。
- 「size()」による画面サイズの指定
- 「noStroke()」による縁取り線の除去
- 「fill(255)」により画像の塗りつぶしの色を白に指定
ポイントは「void()」内ですね。見慣れないものが二つあります。「keyPressed」と「(int) random(0, 255)」の２点です。
void draw() {
background(0);
if (keyPressed) {
fill(int(random(0, 255)));
}
ellipse(width / 2, height / 2, 100, 100);
}
まず「keyPressed」についてですが、これはマウス操作で動かすの「mousePressed」と似ています。「mousePressed」が「マウスが左クリックされているか（プレスされているか）」を確認するためのシステム変数でしたが、「keyPressed」は「キーボードのキーが押下されているか」を確認するためのシステム変数です。
※ちなみにその時点で押されているキーは「key」というシステム変数に代入されます。ここでは説明は割愛します。
次は「fill()」の中身の「int(random(0, 255))」についてです。
「fill(int(random(0, 255))」のように多数()がある場合は、内側から順に処理していきますので、その順で見ていきましょう。
まずは一番内側にある「random(0, 255)」について。これは、コンピュータがランダムに決める実数（「乱数」）を生成するもので、()内の「0」は下限値、「255」は「上限値」を指します。従って、「random(0, 255)」は「0以上255未満のランダムな実数を1つ生成する」という意味になります。
「int()」は、()の中の実数（float）の小数点以下を切り捨て、整数（integer）に変換するものです。例えば「int(60.6)」とすると「60」が返ってきます。
従って、「int(random(0, 255))」は「0以上255未満のランダムな実数の小数点以下を切り捨てて整数に変換したものを返す」という意味になります。
最後に「int(random(0, 255))」で決まった0以上255未満の整数が、「fill()」の色を決めることになるわけです。
以上から、
if (keyPressed) {
fill(int(random(0, 255)));
}
この部分を日本語にすると、「何かキーが押されたら、0以上255未満の実数を生成した後に小数点以下を切り捨てて整数にし、その値に従って次に描画する図形の色を変えなさい」という解釈となります。
なお、「else」がないので、キーが押されなかったときは、特に何の処理も発生しないことになります。
ellipse(width / 2, height / 2, 100, 100);
「width」と「height」は変数について理解するで解説したシステム変数で、それぞれ画面の横幅、縦幅の値が格納されています。「/」というのは割り算を表すもので、「width / 2」はつまり「width ÷ 2」と同様になります。
今回は、「setup()」内で「size(400, 400)」、つまり横幅、縦幅を「400」で指定しました。従って、円の横方向の座標は横幅の半分である「200」(400 / 2)、縦方向の座標も縦幅の半分である「200」(400 / 2)になります。
つまり、この画面のちょうど真ん中に円の中心があることになります。この「width」と「height」を利用した座標の決め方は良く使うので覚えておきましょう。