目の向きを変えるオブジェクトが表示できない

Question

前提・実現したいこと

数式を用いてマウスの方向に白目の中で黒目が向くオブジェクトをプログラムしています。エラーは起きていませんが。黒目が白目に収まらず、暴走してしまいます。

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

エラーメッセージはありません。

該当のソースコード

Eye eye;

void setup(){
  size(200,200);
  eye=new Eye(100,100,50,20);
}

void draw(){
  background(255);
  eye.display();
}
class Eye{//classname
  int x;//feild
  int y;
  int w;//white width
  int b;//black width
  Eye(int tempX,int tempY,int tempW,int tempB){
    x=tempX;
    y=tempY;
    w=tempW;
    b=tempB;
  }
  void display(){
    fill(255);//white
    ellipse(x,y,w,w);
    int dx;
    int dy;
    dx=mouseX-x;  
    dy=mouseY-y;
    float l;
    l=sqrt(sq(dx)+sq(dy));//sqrt=rute2 sq=^2
    float ex;
    float ey;
    ex=x+(((w-b)*dx)/2*l);
    ey=y+(((w-b)*dy)/2*l);
    fill(0);//black
    ellipse(ex,ey,b,b);
  }
}
    
    
    
    

試したこと

数式を見直しました。

補足情報（FW/ツールのバージョンなど）

⽩⽬の直径が w，⽩⽬の中⼼の座標が(x, y)，⿊⽬の直径が b，マウスの座標が（mouseX,mouseY）、⿊⽬の中⼼の座標(ex, ey)、マウスの座標と白目の座標の距離をｌとしています。

Comments

[退会済みユーザー]

分類：【Processing】オブジェクトを操作できない

で３つ質問立ってますが、これは一つ解決したら全部解決するか、解決の足掛かりになります。

質問するときは

オブジェクトの色（→状態）を変更できない。
オブジェクトの向き（→状態）を変更できない。

等別の言い方に変えて同じ質問じゃないか判断してから質問しましょう

[thkana]

通常、プログラムにおいて「暴走」というは制御不能になることであって、今回のように異常に動きが大きいだけのものは暴走とはいいません。

「試したこと」の欄は「自分はなにかやった、頑張っているんだ」というアピールのためにあるのではありません。問題解決につながるかも知れないと考えてあなたがやったこと、そして起きたこと(あるいは起こらなかったこと)を結果まで書いて下さい。それが解決への手がかりになる...かも知れません。

Answer 1

質問者さんご自身の課題

プログラマーは期待通りに動かないとき、コードのどこに問題があるかをデバッグします。

デバッグする方法にはいろいろありますが

(A) ソースコードを見直して正しいかどうか「考える」
(B) 実際に動かし変数の値などが本当に期待通りかの「事実を確認する」

質問者さんは(A)のみで原因を探ろうとしているわけですが、原因に到達できるためには以下を論理的かつ正確に行える必要があります。

• (1)そのコードの入力となるデータの範囲がどうかを正確に認識し、

本件で言えばmouseX, mouseYが入力と言えましょう。

• (2)そのコードの計算によりどのような出力情報の範囲になるか正確に認識し、

本件で言えばex, eyが出力と言えましょう。

• (3)上記を正確に認識するために、計算機言語の仕様を充分に把握する

ex, eyがどのような範囲となるかは途中の計算式の意味を正しく捉えればよいです。

数式を見直したにもかかわらず間違いを見つけられなかったとのことですが、実際にex, eyは期待通りの範囲にはなりません。

つまり(1)～(3)を正しく推論できてないのが「問題の原因を見つけられない原因」すなわち「質問者さんの課題」です。

どうすれば問題の原因に近づけるか

こういう場合の最も有効と思えるアプローチは「自分の推論を裏付ける事実の確認」であり、それは前項で述べた(B)にあたります。ex, eyが期待通りの範囲かどうかはその値を表示するコードを追加し、実際にプログラムを動かして確認してみればわかります。例えばtextを使うなら、displayメソッドの最終行付近を以下のようにすればよいでしょう。

...
  void display() {
    ...
    ellipse(ex,ey,b,b);
    text(dx, 100, 12);
    text(dy, 100, 24);
    text(ex, 2, 12);
    text(ey, 2, 24);
  }
}

動かしてみると「ex, eyが期待外の値になっている」ことが確認できるでしょう。

プログラミングで重要なのは、コードが正しいと**「思う」ことではなく、実際に正しいことを「確認する」**ことです。確認は事実に基づいて行うのが最も分かり易いのでex, eyの値を表示することが有力な方法となります。表示してみて「それが期待外になっている」ことが確認できれば「そういう値になるのは自分が書いたコードにバグがあるからだ」とはっきり認識できバグの本当に原因に近づくことができます。逆に事実を掴まないまま曖昧な推測「Processingのバグかなにかで暴走したのではないか」なんてことをしてしまうとデバッグは迷走することでしょう。

プログラミングで最も大事なのは「正しくない方向に進まないよう、事実に基づき理詰めに推論を進めること」と言えましょう。それを原則としてコードを書いたりデバッグしたりすることを覚えてください。

蛇足かも知れないこと１(バグの原因)

バグの原因へのアプローチ方法を上記でコメントしましたが、それだけだと質問者さんが「原因に到達できない」かも知れませんので具体的なバグの箇所を言いますと

   ex = x + (((w - b) * dx) / 2 * l);
                                ^

ここです。*ではなく/とすべきでしょう。蛇足を言えば数式が充分整理されない気がします。同じ内容を表す式でもしかるべき順番で項を並べれば正しい式かどうか分かり易くなると思います。

   ex = x + (w - b) / 2 * dx / l;
            <---------> これが白目と黒目の半径の差
                          <----> これがx座標の方向成分

蛇足かも知れないこと２

このコードはUnixのウィンドウシステムX11ウィンドウシステムに付属しているおなじみのサンプルアプリケーションxeyesに似ています。それと似た振る舞いにするなら「表示しようとしている目」に対してマウスの位置が近いなら黒目を白目の中心近くに、遠いなら中心から離れたところへ表示するようにしたいところ。そうするには例えば次のようなコードにすればよいと思います。

    ...
    int dx = mouseX - x;
    int dy = mouseY - y;
    float l = sqrt(sq(dx) + sq(dy));
    float distFactor = (w - b) / 2 * constrain(l, 0, width / 2) / 100;
    float ex = x + distFactor * dx / l;
    float ey = y + distFactor * dy / l;
    ...

Comments

[thkana]

ツッコミ失礼。
float l = sqrt(sq(dx) + sq(dy));
でlが0になると、lで割る計算はちょっとマズいのでは。

[likuson]

丁寧な回答ありがとうございました。具体的に何をやればいいか明確に説明してくださり、正解までたどり着くことができました。違うプログラムを書き、数式だけをプログラムし、確かめたところ思ったような数値は出ませんでした。数式を書き換え、この数式が事実であることを確認してから、今回の該当するプログラムに書き換えたところうまくオブジェクトが動いてくれました。自分はプログラム初心者なので今回のような丁寧で具体的な回答をもらえると、とても助かります。ありがとうございました。

[KSwordOfHaste]

thkanaさんご指摘ありがとうございます。
おっしゃるとおり単純に'/'にしてしまうとまずいですね。ゼロ割が発生しないよう例えば割り算をする前に、「l = l == 0 ? 1 : l」のようにして回避するなどの配慮が必要ですね。

Answer 2

この質問に関しては、プログラム言語の扱いの問題ではなくて、あなたが与えた数式が間違っているから期待する動作をしていません。そこを「ちゃんと」見直せば動くはずで、動かないのなら見直しが足りないとしか言いようがないです。

あなたの数式の意図が私には読み切れないので、今の式のまま「白目の外に出ない」ように制限だけするならば

//他は変更なし
  void display() {
    fill(255);//white
    ellipse(x, y, w, w);
    int dx;
    int dy;
    dx=mouseX-x;  
    dy=mouseY-y;
    float l;
    l=sqrt(sq(dx)+sq(dy));//sqrt=rute2 sq=^2
    float ex=(w-b)*dx/2*l;//まずは黒目の変位量だけを扱う
    float ey=(w-b)*dy/2*l;
    float d=dist(0, 0, ex, ey);//ex,eyのベクトルの長さを求める
    if (d>(w-b)/2) { //白目の外に出る条件
      ex=ex/d*(w-b)/2; //白目の中に収める
      ey=ey/d*(w-b)/2;
    }
    ex+=x;//黒目の最終的な位置
    ey+=y;
    fill(0);//black
    ellipse(ex, ey, b, b);
  }

Comments

[likuson]

if関数を使わずにできました。ありがとうございます。

[thkana]

よくある勘違いではありますが、ifは関数じゃありません。
関数ってのは、カッコ内に書かれた引数を受け取って、定義された処理をして、返り値を返す(返さない場合もあるけれど)もの、です。

if文は、カッコ内の値によってプログラムの流れを切り替える働きをする文法要素です。

ついでに言えば、https://teratail.com/questions/200261　はローカル'変数'の話題ですね。なんでもかんでも「関数」じゃありません。