左クリックと右クリックを使った図形を描くプログラム

Question

Processingで、左クリックしたときのx座標とy座標を保存した後、右クリックしたときにその座標を中心とした半径30の円を描くコードを書きたいのですがうまくいきません。

発生している問題・エラーメッセージ

ソースコードのif(mouseButton==LEFT)の文の中で、左クリックしたときのx座標とy座標をx,yに代入し、その後に右クリックをするとその座標を中心とする円を表示するようにしたいのですが、実行して適当な場所で左クリックを押した後に右クリックを押すと、下の図のように円は表示されるのですが中心位置が一番左上になってしまいます。

該当のソースコード

void setup(){
  size(400,200);
}

void draw(){
  float x,y;
  x = y = 0.0;

  if(mousePressed == true){
    if(mouseButton == LEFT){
      x = mouseX;
      y = mouseY;  
    }
    if(mousePressed == true){
      if(mouseButton == RIGHT){
        ellipse(x,y,60,60);
      }
    }
  }
}

どうしたら右クリックしたときに保存された座標を中心とする円を表示できるのでしょうか。
分かりにくく申し訳ありません。よろしくお願いいたします。

Answer 1

draw()関数は繰り返し実行されるんでしたね。では見てみましょう。(質問のまま再掲です)

void draw(){
  float x,y;
  x = y = 0.0;

  if(mousePressed == true){
    if(mouseButton == LEFT){
      x = mouseX;
      y = mouseY;  
    }
    if(mousePressed == true){
      if(mouseButton == RIGHT){
        ellipse(x,y,60,60);
      }
    }
  }
}

(最初はボタンは押されていないとして)
draw()関数に入ると、
浮動小数点型の変数xとyを宣言します。
xとyに0を入れます。
マウスボタンが押されていないので、なにもしません。
マウスボタンが押されていないので、なにもしません。
関数が終わると、変数x,yは寿命を終えて無くなります。

(左ボタンが押されたときには)
draw()関数に入ると、
浮動小数点型の変数xとyを宣言します。
xとyに0を入れます。
マウスボタンが押されていて
__ボタンが左なので
____xにはマウス位置xを入れます
____yにはマウス位置yを入れます
マウスボタンが押されていて
__ボタンは右ではないので、なにもしません
関数が終わると、変数x,yは寿命を終えて無くなります。

(ボタンを離しました)
draw()関数に入ると、
浮動小数点型の変数xとyを宣言します。
xとyに0を入れます。
マウスボタンが押されていないので、なにもしません。
マウスボタンが押されていないので、なにもしません。
関数が終わると、変数x,yは寿命を終えて無くなります。

(右ボタンを押します)
draw()関数に入ると、
浮動小数点型の変数xとyを宣言します。
xとyに0を入れます。
マウスボタンが押されていて
__ボタンが左ではないので、なにもしません
マウスボタンが押されていて
__ボタンは右なので
____xすなわち0,yすなわち0を中心に横径60、縦径60の楕円(円)を描きます
関数が終わると、変数x,yは寿命を終えて無くなります。

というのが現在の動作です。

まず、左ボタンを押したときのx,yの値を関数を抜けてからも覚えていなければいけません。そのためには、グローバル変数(関数の外で変数を宣言する)にする必要があります。

当然ながら、draw()関数に入る度に0を入れてしまったら、0になってしまうので「余計な代入はしない」ことです。

Comments

[shika_062]

回答ありがとうございます。丁寧に説明していただきとても助かりました。

Answer 2

どうしたら右クリックしたときに保存された座標を中心とする円を表示できるのでしょうか。

つまりこのコードでは、マウス位置を保存できていないということです。

draw()は毎フレーム呼ばれます。その度にx・yはゼロに初期化されています。
ということはif(mouseButton == LEFT)と、if(mouseButton == RIGHT)両方満たしたときにしか正しい位置に描かれません。

しかし両方満たすことはあり得ません。左右ボタンを両方同時に押していたとしても、LEFTかRIGHTどちらかにしかなりません（あとCENTERか0か）
mouseButton / Reference / Processing.org

関数をまたがって値を保存するなら、グローバル変数にする必要があります。

float x, y;

void setup() {
  size(400, 200);
  //x = y = 0.0; // と書いてもいいが、グローバル変数は0初期化される
}

void draw() {
  //float x, y;
  //x = y = 0.0;

  if (mousePressed) {
    if (mouseButton == LEFT) {
      x = mouseX;
      y = mouseY;
    }
    if (mouseButton == RIGHT) {
      ellipse(x, y, 60, 60);
    }
  }
}

---

「クリックで」ということなら、厳密にはmouseClicked()を使うべきかもしれません（細かいなぁ^^;
mouseClicked() / Reference / Processing.org

int x = -30; // いきなり右クリックした場合に円を見せないように
int y = -30;

void setup() {
  size(400, 200);
}

void draw() {
}

void mouseClicked() {
  if (mouseButton == LEFT) {
    x = mouseX;
    y = mouseY;
  }
  if (mouseButton == RIGHT) {
    ellipse(x, y, 60, 60);
  }
}

Comments

[shika_062]

回答ありがとうございます。丁寧に説明していただきとても助かりました。