マウス

1.やってみよう

(1) Processingのプログラミング環境に、つぎのプログラムを入力しなさい。
int x;

void setup()
{
  size(200, 150);
  frameRate(30);
  
  x = 1;
}

void draw()
{
  if (x == 0)
  {
    background(255, 255, 255);
    fill(0, 0, 255);
    textSize(28);
    textAlign(CENTER);
    text("click", 100, 75);
  }
  else
  {
    background(0, 0, 255);
    fill(255, 255, 255);
    textSize(28);
    textAlign(CENTER);
    text("click", 100, 75);
  }
}

void mousePressed()
{
  x = 1 - x;
}
(2) Runボタンを押してプログラムを実行し、マウスをクリックするたびにテキストと背景の色が交互に反転することを確認しなさい。

2.解説

 マウスを操作すると、移動やクリックなどさまざまなイベントが発生することになるが、Processingには、こうしたイベントが発生するたびに、それぞれに対応した関数を自動的に呼び出すしくみが用意されている。
 そのひとつがmousePressed関数である。mousePressed関数は、マウスがクリックされると自動的に呼び出される関数であり、マウスがクリックされたときの処理を記述することで、インタラクティブに動作するアプリケーションを作ることができる。
 Processingには、ウィンドウにテキストを表示するため、さまざまな関数が用意されている。fill関数は文字の色、textSize関数は文字のサイズ、textAlign関数は文字そろえのポジションを指定する関数である。こうした関数を使ってフォーマットを指定した後、text関数を使ってテキストを表示するのが、Processingを使ってウィンドウにテキストを表示するための一連の手順になっている。

3.課題

(1) プリミティブ図形を組み合わせてトグルボタンを描画し、マウスをクリックするたびにオンとオフの表示が交互に切り替わるプログラムを作りなさい。

(2) プリミティブ図形を組み合わせてスライダーを描画し、マウスをドラッグするとつまみの位置が変化するプログラムを作りなさい。

4.ヒント

 図1に示すように、マウスポインタの位置を把握するためのしくみとして、ProcessingにはmouseXとmouseYというシステム変数が用意されている。それぞれマウスポインタのx座標とy座標に対応しており、こうしたシステム変数を利用することで、マウスポインタの位置をリアルタイムに把握することができるようになっている。



図1.マウスポインタの座標

 たとえば、図2に示すように、マウスをクリックするたびにオンとオフの表示が交互に切り替わるトグルボタンを動作させるには、マウスポインタの位置を把握し、ボタンの上でマウスがクリックされたことを判定する必要がある。



図2.トグルボタンの動作

 また、図3に示すように、マウスをドラッグするとつまみの位置が変化するスライダーを動作させるには、スライダーの上でマウスがクリックされたことを判定するとともに、マウスがクリックされてからリリースされるまでのマウスポインタの移動量をチェックする必要がある。



図3.スライダーの動作

5.ゲームをつくってみよう(2)

(1) Processingのプログラミング環境に、つぎのプログラムを入力しなさい。
int racket_x, racket_y, racket_width, racket_height;

void setup()
{
  size(300, 400);
  frameRate(30);
  
  racket_width = 60;
  racket_height = 10;
  
  racket_x = width / 2 - racket_width / 2;
  racket_y = height - 60;
}

void draw()
{
  background(0, 0, 255);
  
  noStroke();
  fill(255, 255, 255);
  
  racket_x = mouseX;
  if (racket_x > width - racket_width)
  {
    racket_x = width - racket_width;
  }
  rect(racket_x, racket_y, racket_width, racket_height);
}
(2) Runボタンを押してプログラムを実行し、マウスに追従してラケットが移動することを確認しなさい。ウィンドウの壁で反射するボールを描画し、ラケットで打ち返すゲームをつくりなさい。

Last Modified: October 1 12:00 JST 2021 by Naofumi Aoki
E-mail: aoki@ime.ist.hokudai.ac.jp