トップに戻る

マウス座標で1〜4の選択肢を判定する

四角を描き、クリックした (mouseX, mouseY) がどの四角の中かで判定する

実行画面（クリックで回答） mousePressed
日本で一番高い山は？
mouseX
-
mouseY
-
selectNum（判定結果）
0

四角の中をクリックすると、クリック地点 (mouseX, mouseY) がどの四角の範囲に入るかを調べて 1〜4 を求めます。四角の外をクリックすると 0（どれでもない）になります。マウスを動かすと現在の座標も表示されます。

プログラム rect / mousePressed 
int selectNum = 0;

void setup() {
  size(700, 400);
  drawScreen();
}

void draw() {
}

void drawScreen() {
  background(255);
  textAlign(CENTER, CENTER);
  fill(0);
  text("日本で一番高い山は？", width/2, 40);

  // 4つの選択肢の四角を描く
  fill(230);
  rect( 50, 120, 280, 100); // 1
  rect(370, 120, 280, 100); // 2
  rect( 50, 250, 280, 100); // 3
  rect(370, 250, 280, 100); // 4

  fill(0);
  text("1.富士山",   190, 170);
  text("2.エベレスト", 510, 170);
  text("3.高尾山",   190, 300);
  text("4.筑波山",   510, 300);
}

void mousePressed() {
  selectNum = 0; // どれでもない

  // クリック座標が四角の中かを順に調べる
  if (inRect(mouseX, mouseY,  50, 120, 280, 100)) selectNum = 1;
  if (inRect(mouseX, mouseY, 370, 120, 280, 100)) selectNum = 2;
  if (inRect(mouseX, mouseY,  50, 250, 280, 100)) selectNum = 3;
  if (inRect(mouseX, mouseY, 370, 250, 280, 100)) selectNum = 4;

  println("selectNum = " + selectNum);
}

// (mx,my) が 左上(x,y)・幅w・高さh の四角の中なら true
boolean inRect(int mx, int my, int x, int y, int w, int h) {
  return (mx >= x) && (mx < x + w) && (my >= y) && (my < y + h);
}
四角ごとの座標の範囲 x 〜 x+w, y 〜 y+h
selectNum 選択肢 rect(x, y, w, h) mouseX の範囲 mouseY の範囲
1富士山 rect(50, 120, 280, 100) 50 〜 330120 〜 220
2エベレスト rect(370, 120, 280, 100) 370 〜 650120 〜 220
3高尾山 rect(50, 250, 280, 100) 50 〜 330250 〜 350
4筑波山 rect(370, 250, 280, 100) 370 〜 650250 〜 350
押さえるポイント 座標判定
1

rect(x, y, w, h) は左上が基準

四角は 左上の点 (x, y) から、幅 w・高さ h で描かれます。だから右下は (x+w, y+h) になります。

2

「中にあるか」は4つの不等式で調べる

x <= mouseX < x+w かつ y <= mouseY < y+h が成り立てば、その四角の中です。x と y の両方を満たすことが条件です。

3

mousePressed() で (mouseX, mouseY) が分かる

クリックした瞬間の座標が mouseX, mouseY に入ります。GUIライブラリを使わなくても、自分で範囲を比べれば「どのボタンか」を判定できます。

4

どの四角にも入らなければ 0

最初に selectNum = 0 にしておき、当てはまる四角があれば 1〜4 に上書きします。四角の外をクリックすると 0 のまま＝「どれでもない」と判断できます。

Javaの学習用の教材ページです。