mouseClickedの処理の解読

Question

前提・実現したいこと

・前提
processingでプログラムを組んでいます。初心者です。
知恵袋で「自分の組んだプログラムに花火のような拡散を追加したい」と質問した所、下記のプログラムを回答頂きました。
・実現したいこと
実行結果をクリックをしなくても円は描画し続け、円一つ一つクリックではなくどこでクリックしても拡散するようにしたい。また、クリックしたら描画されている円を全て拡散させるようにしたい。
1.音楽に合わせてランダムな色の円がランダムな場所に描画され続ける→2.任意のタイミングで画面をクリックすると描画されている円が全て拡散する→3.クリックした時に描画されていた円だけが拡散しクリックした後に描画された円は残る→再び1の流れになる。

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

該当のソースコードを実行すると、実行結果が一度だけ円が描画されその後は円を一つ一つクリックして拡散し次の円が描画されます。
何故クリックしないと次の円が描画されないのか分かりません。また、マウスクリックの部分が色々と変数を使っておりどれとリンクさせてクリックした時の処理をしているかが分からず、どこを改変すれば良いのか悩んでいます。

該当のソースコード

import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
import ddf.minim.signals.*;
import ddf.minim.spi.*;
import ddf.minim.ugens.*;
Minim minim;
AudioPlayer player;
int buffersize = 512;

class Note {
  final float x;
  final float y;
  final float w;
  final float h;
  final float r;
  final float r2;
  final color col;//HSB, alpha
  boolean isAlive = true;

  Note(final float x, final float y, final float playerIn) {
    this.x = x;
    this.y = y;
    this.w = playerIn * 2;
    this.h = playerIn * 2;
    this.r = this.w / 2;
    this.r2 = this.r * this.r;
    this.col = color(random(360), 100, 100, 50);
  }

  void draw() {
    noStroke();
    fill(col);
    ellipse(x, y, w, h);
  }

  void update() {
  }

  boolean isExpired() {
    return !isAlive;
  }

  void toggle() {
    isAlive = !isAlive;
  }
}

abstract class Effect {
  protected float time;
  protected float t = 0;
  final float dt = 1.0;

  Effect() {
  }

  abstract void draw();

  abstract void update();

  void dec() {
    time -= dt;
    t += dt;
  }

  boolean isExpired() {
    return time < 0;
  }
}

abstract class MultiEffect extends Effect {
  ArrayList<Effect> chidren = new ArrayList<Effect>();

  MultiEffect() {
  }

  @Override
    void draw() {
    for (Effect eff : chidren) {
      eff.draw();
    }
  }

  @Override
    void update() {
    for (Effect eff : chidren) {
      eff.update();
    }
  }

  @Override
    boolean isExpired() {
    for (Effect eff : chidren) {
      if (!eff.isExpired()) return false;
    }
    return true;
  }
}

class Bakuhatu extends Effect {
  final float x;
  final float y;
  float r;
  float dr = 1;
  final float ddr = 0.5;
  final int R, G, B;
  int alpha;
  int da = 0;
  final int dda = 1;

  Bakuhatu(final float x, final float y, final float r, final color col, final float time) {
    this.x = x;
    this.y = y;
    this.r = r;

    final int mask = 0xFF;
    alpha = (col>>24) & mask;
    alpha /= 2;
    R = (col>>16) & mask;
    G = (col>>8) & mask;
    B = col & mask;
    this.time = time;
  }

  @Override
    void draw() {
    noStroke();
    colorMode(RGB);
    fill(R, G, B, alpha);
    ellipse(x, y, 2*r, 2*r);
  }

  @Override
    void update() {
    dec();
    r += dr;
    dr += ddr;
    alpha -= da;
    da += dda;
  }
}

final float g = 0.2;
class Hinoko extends Effect {
  float x;
  float y;
  final float r = 2;
  final float v0 = 5;
  float vx;
  float vy;
  final float theta;
  final color col;
  int R, G, B;
  int alpha;
  float da = 1;
  final float dda = 0.05;
  float drx, dry;
  float ddrx, ddry;

  Hinoko(final float x, final float y, final float r, final color col, final float theta, final float time) {
    this.x = x;
    this.y = y;

    this.vx = v0 * cos(theta);
    this.vy = v0 * sin(theta);
    this.col = col;

    final int mask = 0xFF;
    alpha = (col>>24) & mask;
    R = (col>>16) & mask;
    G = (col>>8) & mask;
    B = col & mask;

    this.drx = 0.5;
    this.dry = 0.05;
    this.ddrx = 0.5;
    this.ddry = 0.05;

    this.time = time;
    this.theta = theta;
  }

  @Override
    void draw() {
    noStroke();
    colorMode(RGB);
    fill(R, G, B, alpha);
    ellipse(x, y, r, r);
  }

  @Override
    void update() {
    dec();
    alpha -= da;
    da += dda;

    x += vx;
    y += vy;
    y += g*t;

    drx += ddrx;
    dry += ddry;
  }
}

class Hanabi extends MultiEffect {
  Hanabi(final float x, final float y, final float r, final color col) {
    super();

    final float timeB = 30;
    chidren.add(new Bakuhatu(x, y, r, col, timeB));

    final float timeH = 50;
    final int max = 32;
    final float dtheta = TWO_PI / max;
    for (int i=0; i<max; i++) {
      chidren.add(new Hinoko(x, y, r, col, dtheta*i, timeH));
    }
  }
}

class Effects extends ArrayList<Effect> {
  Effects() {
    //do nothing
  }

  void add(Effects temp) {
    this.addAll(temp);
  }

  void draw() {
    for (Effect eff : this) {
      eff.draw();
    }
  }

  void update() {
    ArrayList<Effect> temp = new ArrayList<Effect>();
    for (Effect eff : this) {
      eff.update();
      if (!eff.isExpired()) temp.add(eff);
    }
    this.clear();
    this.addAll(temp);
  }
}

class NoteController {
  ArrayList<Note> notes = new ArrayList<Note>();
  ;

  final float margin = 100;
  final float xmin = margin;
  final float xmax = width-margin;
  final float ymin = margin;
  final float ymax = height-margin;

  NoteController() {
    //
  }

  void add(final float playerIn) {
    if (notes.size() > 10) return;//check
    if (playerIn < 20) return;

    final float x = random(xmin, xmax); 
    final float y = random(ymin, ymax);
    notes.add(new Note(x, y, playerIn));
  }

  void draw() {
    for (Note note : notes) {
      note.draw();
    }
  }

  ArrayList<Note> update() {
    ArrayList<Note> next = new ArrayList<Note>();
    ArrayList<Note> del = new ArrayList<Note>();
    for (Note note : notes) {
      note.update();
      if (note.isExpired()) {
        del.add(note);
      } else {
        next.add(note);
      }
    }
    notes.clear();
    notes.addAll(next);
    return del;
  }

  boolean isHit(final Note note) {

    if (mouseX < note.x-note.r) return false;
    if (mouseX > note.x+note.r) return false;
    if (mouseY < note.y-note.r) return false;
    if (mouseY > note.y+note.r) return false;
    return true;
  }

  int find() {
    int i=0;
    for (Note note : notes) {
      if (isHit(note)) {
        return i;
      }
      i++;
    }
    return -1;
  }

  void mouseClicked() {
    final int index = find();
    if (index == -1) return;
    notes.get(index).toggle();
  }
}

class Converter {
  Effects makeHanabis(ArrayList<Note> notes) {
    Effects temp = new Effects();
    for (Note note : notes) {
      temp.add(makeHanabi(note));
    }
    return temp;
  }

  Hanabi makeHanabi(Note note) {
    Hanabi temp = new Hanabi(note.x, note.y, note.r, note.col);
    return temp;
  }
}

NoteController controller;
Effects effects;
Converter converter;

void setup() {
  fullScreen();
  frameRate(60);
  colorMode(HSB, 360, 100, 100, 100);

  controller = new NoteController();
  effects = new Effects();
  converter = new Converter();

  minim = new Minim(this);
  /*
ファンタジーの無料・フリーBGM音楽素材 0ページ目/魔王魂
   https://maoudamashii.jokersounds.com/list/bgm10.html
   */
  final String fn = "bgm_maoudamashii_fantasy10.mp3";
  //final int bpm = 110;
  player = minim.loadFile(fn);
  player.loop();
}

void draw() {
  background(0);

  final float playerIn = player.mix.level()*200;
  controller.add(playerIn);
  controller.draw();
  ArrayList<Note> temp = controller.update();

  effects.add(converter.makeHanabis(temp));
  effects.draw();
  effects.update();
}

void stop() {
  minim.stop();
  super.stop();
}

void mouseClicked() {
  controller.mouseClicked();
}

試したこと

マウスクリックは一旦置いておき、花火のように拡散するという部分だけ抜き取れないか試したが、マウスクリックのプログラムと連携しているのか変数が使われていない等のエラーが出てしまった。そこで、マウスクリックの部分を改変しようとしたが、真偽を使って何かをやっている程度しか解読出来ず具体的にどこと繋がってどう処理しているのかが分からなかった。

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

Processing 3.5.3を使用

Answer 1

大変素晴らしいコードなのですが、クラスが多くProcessingは内部クラスになる仕様上アクセス修飾子が意味がなくなるので、ちょっとコードが追いにくいですね。
しかし順番に落ち着いて読んでいくと、案外すぐ目的のものに行き当たりました。

まず要件をまとめると、

1. どこでクリックしても拡散する
2. クリックしたら描画されている円を全て拡散する
3. クリックをしなくてもランダムな色の円がランダムな場所に描画され続ける

ですね。

---

[注意]
これ以降同名のメソッドが多いので、本体？PApplet？直に置かれてるsetup()やdraw()をApp.setup()と書き、class Noteのdraw()をNote.draw() と書くこととします。

---

1. 2.はクリックに関連するでしょうから、App.mouseClicked()を見ます。

NoteController.mouseClicked()に任せています。
ちゃんと読んでもいいんですが、きっとfind()でnoteのindexを探し、なければ何もせずあればNote.toggle()ってことでしょう。

まずここで全部拡散なので、findする必要はなくなります。

void mouseClicked() {
  for (Note note : notes) {
    note.toggle();
  }
}

実行します。
はい、もう1.2.は終わってしまいました。

実は問題は3.です。
拡散した後一瞬でパララと10個円が出たと思いますが、追加のペースが遅いと全部消えた後寂しいですし、早すぎるとあっという間に画面中覆いつくされそうです。
どういうイメージなのかがわからないので、調整ポイントを押さえて細かい調整はmswさんに任せます。

では追加部分を見てみます。

起点はApp.draw()内のcontroller.add(playerIn);です。
NoteController.add()を見ます。
if (notes.size() > 10) return; 円の最大個数ですね。
if (playerIn < 20) return; 音量が小さすぎる場合は無視するようです。
notes.add(new Note(x, y, playerIn)); 円を追加してるんでしょう。

なるほど。ここは毎フレーム呼ばれるので拡散した後、一気に増えたわけですね。
一気に増えないように、

void add(final float playerIn) {
  if (notes.size() > 100) return;//check
  if (playerIn < 20) return;
  if (frameCount % 30 != 0) return;

  final float x = random(xmin, xmax); 
  final float y = random(ymin, ymax);
  notes.add(new Note(x, y, playerIn));
}

としてみましたが規則的過ぎていけませんね。
if (frameCount % (int)random(10, 30) != 0) return;私はこんなもんかな?と思いましたが、今ある円の個数によって変えるとか方法はいろいろありそうです。お好きなように調整してください。

あとやってるうちに気が付いたんですが、一回拡散した後、円が水色系統だけになりませんか？
そういう仕様ならいいのですがなんか色が減って寂しいので、どうにかならないかと試行錯誤したところ、Note.draw()

void draw() {
  noStroke();
  colorMode(HSB, 360, 100, 100, 100);
  fill(col);
  ellipse(x, y, w, h);
}

で色が戻りました。ここはそれでよいのか自信ありません。

Comments

[msw]

返信が遅れてしまい申し訳ございません。回答がとても分かり易く、本当に助かりました！　足し算する事ばかり考えていたので、真偽の判定がいらないなどの引き算を試すのを忘れていました。ありがとうございます。