インタラクティブとは

「双方向」という意味です。ユーザがマウスやキーボードを操作をすることで、プログラムと対話しているようにみせることです。 今までのプログラムはランダムな命令はあっても、ユーザの操作によって処理が変化することはありませんでした。 今回のプログラムはユーザの操作によって処理が変化します。

マウスの位置

まずはマウスの位置を取得する方法を説明します。また以下にマウス位置取得方法とその例を記述します。 例はマウスの位置を中心に円を描くプログラムです。

//現在のマウスポインタのX、Y座標の取得
mouseX
mouseY

//1フレーム前のマウスポインタのX、Y座標の取得
pmouseX
pmouseY
void setup(){
   size(400,400);
   colorMode(HSB,100);
   background(99);
   frameRate(10);
}

void draw(){
   fill(random(100), 40, 99);
   noStroke();
   smooth();
   //マウスポインタの位置に円を描く
   ellipse(mouseX, mouseY, pmouseX/2, pmouseX/2);
}

結果

setupではいつも通り初期設定をしています。 drawでは塗り、線なし、スムース(ジャギーをなくす処理)を設定し、マウスの位置を主点に円を描いています。 重要なのはellipseの中です

//マウスポインタの位置に円を描く
ellipse(mouseX, mouseY, pmouseX/2, pmouseX/2);

円を描くX、Y座標はmouseX、mouseYを使いマウスを置いた位置にします。 描く円の直径はpmouseを使い、1つ前のフレームの半分の値にします。 そのため右端にマウスを置き、左端にマウスを移動すると大きな円を描くことができ、 左端から右端にマウスを移動させると小さな円を描くことができます。 また、2で割ったのはpmouseのままだと円の大きさが大き過ぎてしまうためです。 気にならなければそのまま使用しても大丈夫です。 ちなみに直径のYの値がpmouseYでなくpmouseXのみを使用しているのは正円を描くためです。

広告