processingがうまくできない

実現したいこと

画面上に，赤，黄，青の信号の円の領域があり，その領域にマウス位置がはいったら，その色の信号が付くプログラムを作成したい。
ここに実現したいことを箇条書きで書いてください。

▲▲機能を動作するようにする

前提

ここに質問の内容を詳しく書いてください。
（例）processingでプログラムを書いた。一番右の青の円だけうまくいくが他二つはうまくいかなかった。
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

エラーメッセージ
```なし

### 該当のソースコード

```ここに言語名を入力
ソースコード
```int x1=100, x2=250, x3=400;
int y=100, r=100;

void settings()
{
  size(500, 300);
}
void setup()
{
  background(255, 255, 255);
}
void draw()
{
  if (sq(mouseX-x1)+sq(mouseY-y)<sq(r))
  {
    fill(255, 0, 0);
    ellipse(x1, y, r, r);
  }

  if (sq(mouseX-x2)+sq(mouseY-y)<sq(r))
  {
    fill(255, 245, 36);
    ellipse(x2, y, r, r);
  }

  if (sq(mouseX-x3)+sq(mouseY-y)<sq(r))
  {
    fill(0, 0, 255);
    ellipse(x3, y, r, r);
  } else
  {
    fill(255, 255, 255);
    ellipse(x1, y, r, r);
    ellipse(x2, y, r, r);
    ellipse(x3, y, r, r);
  }
}


### 試したこと
elseの場所を変えたりしたがうまくいかなかった
ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

一番右の青の円だけうまくいくが他二つはうまくいかなかった。
elseの場所を変えたりしたがうまくいかなかった

現状のelseは最後のif（青）に対してのelseです。
青の円に入っていなかったら、すべての円を白で描画します。
前のifで赤に塗っていたとしても、白で上書きされてしまいます。

それぞれのifにelseが必要ですし、判定した円以外の描画をしてはいけません。

ほか問題点や改善点

通常はsettingsを使う必要はありません。
settings() / Reference / Processing.org

drawでクリア処理がないので、描画がガビガビになっています。

rを半径のつもりで（距離の）計算をしていますが、現状rは直径（幅・高さ）です。
そのため当たり判定が円より大きくなっています。
ellipse() / Reference / Processing.org
ellipseMode() / Reference / Processing.org

難しい計算をしなくても便利な組み込み関数があります。
dist() / Reference / Processing.org

楕円でなく円の場合は専用関数があります。
circle() / Reference / Processing.org

Processing
1int x1 = 100, x2 = 250, x3 = 400;
2int y = 100;
3int r = 50; // 円の半径
4
5
6void setup() {
7  size(500, 300); // setupでいい
8
9  ellipseMode(RADIUS); // rを円の半径とするならRADIUSに
10}
11
12void draw() {
13  background(255); // つどクリアしないと描画がガビガビになる
14
15  if (dist(mouseX, mouseY, x1, y) < r) { // 便利な組み込み関数
16    fill(255, 0, 0);
17  } else {
18    fill(255);
19  }
20  circle(x1, y, r);
21
22  if (dist(mouseX, mouseY, x2, y) < r) {
23    fill(255, 245, 36);
24  } else {
25    fill(255);
26  }
27  circle(x2, y, r);
28
29  if (dist(mouseX, mouseY, x3, y) < r) {
30    fill(0, 0, 255);
31  } else {
32    fill(255);
33  }
34  circle(x3, y, r);
35}

あるいは先にすべて白で描いておいて、後から上書きしてもいいでしょう。

Processing
1int x1 = 100, x2 = 250, x3 = 400;
2int y = 100;
3int r = 50; // 円の半径
4
5
6void setup() {
7  size(500, 300); // setupでいい
8
9  ellipseMode(RADIUS); // rを円の半径とするならRADIUSに
10}
11
12void draw() {
13  background(255); // つどクリアしないと描画がガビガビになる
14
15  fill(255);
16  circle(x1, y, r);
17  circle(x2, y, r);
18  circle(x3, y, r);
19
20  if (dist(mouseX, mouseY, x1, y) < r) { // 便利な組み込み関数
21    fill(255, 0, 0);
22    circle(x1, y, r);
23  }
24
25  if (dist(mouseX, mouseY, x2, y) < r) {
26    fill(255, 245, 36);
27    circle(x2, y, r);
28  }
29
30  if (dist(mouseX, mouseY, x3, y) < r) {
31    fill(0, 0, 255);
32    circle(x3, y, r);
33  }
34}