ランダムに配置させた図形の色を変える方法

実現したいこと

Processingを使っています

ランダムで表示させた10個の円をクリックしたら色が変わるようにしたいのですが、どのようなコードを書けばよいでしょうか。
また、全ての円をクリックしたら文字が出るようにするためにはどうすればよいでしょうか。

試したこと

様々なサイトで調べましたが、自分の調べた範囲ではランダムな配置の円に対応するコードは見当たりませんでした。

thkana

2022/07/28 23:27

プログラムを書く/作る、というのは、「同じことをやっているプログラムを探してきて丸写しする」ということではないのですが... > 自分の調べた範囲ではランダムな配置の円に対応するコードは見当たりませんでしたでは、ランダムでなく整列していればできるですね? そのコードを示してください。

dodox86

2022/07/29 00:02

teratailは、要望だけ書くと誰かがコード付きで教えてくれるサービスではありません。 [質問するときのヒント] https://teratail.com/help/question-tips [推奨していない質問] https://teratail.com/help/avoid-asking

dodox86

2022/07/29 01:45

仕様をちゃんと決める限り経験者にとっては簡単な問題ですが、コードを書く手間は厳然としてあるので、今の質問内容で回答が付くことはほとんど無いと思います。

beginner_rice

2022/07/29 13:23

自分の考えが浅はか過ぎました。申し訳ございません。以後、質問を上げる際には自分の試した事や入力したコードも掲載します。わざわざ追記を書いていただいてありがとうございました。

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

回答1件

ベストアンサー

ランダムで表示させた10個の円をクリックしたら色が変わるようにしたいのですが、どのようなコードを書けばよいでしょうか。
また、全ての円をクリックしたら文字が出るようにするためにはどうすればよいでしょうか。

もし１文字も書けないということであれば、あなたにとって難しすぎるということです。
もっと簡単なことからやってみましょう。例えば円が１つだけならできますか？

Processing
1float x, y, r;
2boolean isClicked;
3
4void setup() {
5  size(400, 300);
6  ellipseMode(RADIUS);
7  textAlign(CENTER, CENTER);
8  textSize(50);
9
10  x = random(width);
11  y = random(height);
12  r = random(50, 100);
13}
14
15void draw() {
16  background(255);
17
18  if (isClicked) {
19    fill(255, 0, 0);
20    circle(x, y, r);
21
22    fill(0);
23    text("Congratulations", 0, 0, width, height);
24  } else {
25    fill(255);
26    circle(x, y, r);
27  }
28}
29
30void mouseClicked() {
31  if (dist(x, y, mouseX, mouseY) < r) {
32    isClicked = true;
33  }
34}

ellipseMode() / Reference / Processing.org
textAlign() / Reference / Processing.org
dist() / Reference / Processing.org

「そのくらいはできる」って？じゃあ円を２つにできますか？

Processing
1float x1, y1, r1;
2boolean isClicked1;
3
4float x2, y2, r2;
5boolean isClicked2;
6
7void setup() {
8  size(400, 300);
9  ellipseMode(RADIUS);
10  textAlign(CENTER, CENTER);
11  textSize(50);
12
13  x1 = random(width);
14  y1 = random(height);
15  r1 = random(50, 100);
16
17  x2 = random(width);
18  y2 = random(height);
19  r2 = random(50, 100);
20}
21
22void draw() {
23  background(255);
24
25  if (isClicked1) {
26    fill(255, 0, 0);
27  } else {
28    fill(255);
29  }
30  circle(x1, y1, r1);
31
32  if (isClicked2) {
33    fill(255, 0, 0);
34  } else {
35    fill(255);
36  }
37  circle(x2, y2, r2);
38
39  if (isClicked1 && isClicked2) {
40    fill(0);
41    text("Congratulations", 0, 0, width, height);
42  }
43}
44
45void mouseClicked() {
46  if (dist(x2, y2, mouseX, mouseY) < r2) {
47    isClicked2 = true;
48  } else if (dist(x1, y1, mouseX, mouseY) < r1) {
49    isClicked1 = true;
50  }
51}

変数を２セットずつ用意しました。これで理論上はいくつでも増やせることになります。

とはいえ１０セットもあると、さすがにうんざりします。
こういうときは配列を使用します。

Processing
1final int NUM = 5;
2float[] x, y, r;
3boolean[] isClicked;
4
5void setup() {
6  size(400, 300);
7  ellipseMode(RADIUS);
8  textAlign(CENTER, CENTER);
9  textSize(50);
10
11  x = new float[NUM];
12  y = new float[NUM];
13  r = new float[NUM];
14  isClicked = new boolean[NUM];
15
16  for (int i = 0; i < NUM; i++) {
17    x[i] = random(width);
18    y[i] = random(height);
19    r[i] = random(50, 100);
20  }
21
22  // （小さい順に）ソートして逆順にする（＝大きい順にソート） 何のためにやっているか考えてみよう
23  r = reverse(sort(r));
24}
25
26void draw() {
27  background(255);
28
29  boolean allClicked = true;
30  for (int i = 0; i < NUM; i++) {
31    if (isClicked[i]) {
32      fill(255, 0, 0);
33    } else {
34      fill(255);
35      allClicked = false;
36    }
37    circle(x[i], y[i], r[i]);
38  }
39
40  if (allClicked) {
41    fill(0);
42    text("Congratulations", 0, 0, width, height);
43  }
44}
45
46void mouseClicked() {
47  // 逆順に回しているが、何のためにやっているか考えてみよう
48  for (int i = NUM - 1; 0 <= i; i--) {
49    if (dist(x[i], y[i], mouseX, mouseY) < r[i]) {
50      isClicked[i] = true;
51      break;
52    }
53  }
54}