マウス操作と連動させよう

チャプター1このレッスンのゴール

このレッスンで完成させるものを確認しよう

チャプター2はじめに

このレッスンでは、マウスの動作と連動を学習するよ。マウスやキーと連動させることをインタラクションといいます。ゲームは画面に対してマウスやキーで操作するので、インタラクションについては、しっかり理解できるようにしていきましょう。

2. 1 インタラクションの種類

インタラクションの種類は、主に次の2つです。それぞれの方法を今後のレッスンで、学びます。

• マウスとの連動
• キーとの連動

今回は、マウスとの連動について学びます。

チャプター3丸を表示しよう

このチャプターでは、丸を三つ描画しよう。

3. 1 写してみよう

//最初に一回だけ呼び出される初期設定
function setup() {
  //キャンバスの大きさ
  createCanvas(400, 400);
}

//繰り返し呼び出される処理
function draw() {
  background(220);
  noStroke();

  //円形1
  fill(255, 0, 0, 126);
  ellipse(width / 4 * 1, height / 2, 150, 150);

  //円形2
  fill(0, 255, 0, 126);
  ellipse(width / 4 * 2, height / 2, 150, 150);

  //円形
  fill(0, 0, 255, 126);
  ellipse(width / 4 * 3, height / 2, 150, 150);
}

コードを実行すると、色の異なる丸が3つ描かれていれはOKです。

チャプター4マウスと連動させて色を変えてみよう

このチャプターでは、一般的に使われるRGBモードに戻して、マウスの動きと連動させてみるよ

ここまでの見本27

4. 1 変更しよう

円形1・2の幅、高さ、円形3のfillの色コードの値を mouseX,mouseYに変更しよう

     //円形1
     fill(255, 0, 0, 126);
-    ellipse(width / 4 * 1, height / 2, 150, 150);
 
     //円形2
     fill(0, 255, 0, 126);
-    ellipse(width / 4 * 2, height / 2, 150, 150);
 
-    //円形
-    fill(0, 0, 255, 126);
     ellipse(width / 4 * 3, height / 2, 150, 150);
   }

     //円形1
     fill(255, 0, 0, 126);
+    ellipse(width / 4 * 1, height / 2, mouseX, mouseX);
 
     //円形2
     fill(0, 255, 0, 126);
+    ellipse(width / 4 * 2, height / 2, mouseY, mouseY);
 
+    //円形3
+    fill(mouseX, mouseY, mouseX / mouseY, 126);
     ellipse(width / 4 * 3, height / 2, 150, 150);
   }

書けたら、プレビューしてみよう。
マウスの動きによって、大きさや色が変わるとOKだよ。

4. 2 コードの解説

円の大きさと色にmouseXとmouseYを書いています。これにより実行している間、キャンバス内のマウスの位置の値になります。マウスを右に移動させると、左の円が大きくなります。 マウスを下に移動させると、真ん中の円が大きくなります。右の円はマウスの位置に応じて色が変化します。

mouseXとmouseYの値の範囲

値の大きさは、0〜キャンバスの大きさとなります。色に使う場合には値の範囲に注意しましょう。
今回の例では0〜400の値をとることができるため、mouseXやmouseYをmousex/2などとしておくと、色の値を指定するにふさわしい値になりますね。

ここまでの見本28

チャプター5チャレンジしよう

図形の大きさや色、背景の色にmouseXとmouseYと使ってみましょう。

5. 1 完成形

次の完成形を参考に、マウスの位置に応じて色や大きさが変化するプログラムを自分で書いてみましょう。図形の色の変化の仕方などは自分で考えたルールでOKです。

ヒント

• ヒントはありません。自由に自分で考えたプログラムを作り、mouseXとmouseYの使い方がつかめることができればOKです。