黒目の向きが変わるオブジェクトを複数表示したい

Question

前提・実現したいこと

数式を用いてマウスの方向に白目の中で黒目が向くオブジェクトをプログラムしています。エラーは起きていませんが、黒目が表示されません。また、以下の画像のように目のオブジェクトが5個表示されるはずなのですが、一番右側の白目しか表示されません。

実現したい実行結果

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

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

該当のソースコード

Eye[] eyes=new Eye[5];

void setup() {
  size(600, 200);
  for (int i=0; i<eyes.length; i++) {
    eyes[i]=new Eye(100+100*i, 100, 50, 20);
  }
}

void draw() {
  for (int i=0; i<eyes.length; i++) {
    background(255);
    eyes[i].display();
  }
}
 
class Eye {
  int x, y, w, b;

  Eye(int tempX, int tempY, int tempW, int tempB) {
    x=tempX;
    y=tempY;
    w=tempW;
    b=tempB;
  }

  void display() {
    fill(255);
    ellipse(x, y, w, w);
    int dx, dy;
    dx=mouseX-x;
    dy=mouseY-y;
    float l;
    l=sqrt(sq(dx)+sq(dy));
    float ex, ey;
    ex=x+(w-b)*dx/2*l;
    ey=y+(w-b)*dy/2*l;
    fill(0);
    ellipse(ex, ey, b, b);
  }
}
 

実行結果

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

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

Answer 1

計算式が間違っています。
2*lで割らずに、2で割ってlを掛けています。

-    ex=x+(w-b)*dx/2*l;
+    ex=x+(w-b)*dx/(2*l);
-    ey=y+(w-b)*dy/2*l;
+    ey=y+(w-b)*dy/(2*l);

---

回答を書いているうちに目が増えた…

一番右側の白目しか表示されません。

目を描く前に毎回背景色を指定しているからです。

void draw() {
+  background(255);
  for (int i=0; i<eyes.length; i++) {
-    background(255);
    eyes[i].display();
  }
}

Comments

[snow_bell]

さっそくのご回答ありがとうございます。具体的に何をやればいいかご丁寧にに説明してくださり、とても助かりました。うまくオブジェクトが動いてくれました。ありがとうございました！