回答編集履歴
1
改行削除
    
        answer	
    CHANGED
    
    | @@ -1,73 +1,72 @@ | |
| 1 | 
            -
            大変素晴らしいコードなのですが、クラスが多くProcessingは内部クラスになる仕様上アクセス修飾子が意味がなくなるので、ちょっとコードが追いにくいですね。
         | 
| 2 | 
            -
            しかし順番に落ち着いて読んでいくと、案外すぐ目的のものに行き当たりました。
         | 
| 3 | 
            -
             | 
| 4 | 
            -
            まず要件をまとめると、
         | 
| 5 | 
            -
            1. どこでクリックしても拡散する
         | 
| 6 | 
            -
            2. クリックしたら描画されている円を全て拡散する
         | 
| 7 | 
            -
            3. クリックをしなくてもランダムな色の円がランダムな場所に描画され続ける
         | 
| 8 | 
            -
             | 
| 9 | 
            -
            ですね。
         | 
| 10 | 
            -
             | 
| 11 | 
            -
            ---
         | 
| 12 | 
            -
             | 
| 13 | 
            -
            **[注意]**
         | 
| 14 | 
            -
            これ以降同名のメソッドが多いので、本体?PApplet?直に置かれてるsetup()やdraw()をApp.setup()と書き、class Noteのdraw()をNote.draw() と書くこととします。
         | 
| 15 | 
            -
             | 
| 16 | 
            -
            ---
         | 
| 17 | 
            -
             | 
| 18 | 
            -
            1. 2.はクリックに関連するでしょうから、`App.mouseClicked()`を見ます。
         | 
| 19 | 
            -
            `NoteController.mouseClicked()`に任せています。
         | 
| 20 | 
            -
            ちゃんと読んでもいいんですが、きっと`find()`でnoteのindexを探し、なければ何もせずあれば`Note.toggle()`ってことでしょう。
         | 
| 21 | 
            -
             | 
| 22 | 
            -
            まずここで全部拡散なので、findする必要はなくなります。
         | 
| 23 | 
            -
            ```Processing
         | 
| 24 | 
            -
            void mouseClicked() {
         | 
| 25 | 
            -
              for (Note note : notes) {
         | 
| 26 | 
            -
                note.toggle();
         | 
| 27 | 
            -
              }
         | 
| 28 | 
            -
            }
         | 
| 29 | 
            -
            ```
         | 
| 30 | 
            -
            実行します。
         | 
| 31 | 
            -
            はい、もう1.2.は終わってしまいました。
         | 
| 32 | 
            -
             | 
| 33 | 
            -
            実は問題は3.です。
         | 
| 34 | 
            -
            拡散した後一瞬でパララと10個円が出たと思いますが、追加のペースが遅いと全部消えた後寂しいですし、早すぎるとあっという間に画面中覆いつくされそうです。
         | 
| 35 | 
            -
            どういうイメージなのかがわからないので、調整ポイントを押さえて | 
| 36 | 
            -
             | 
| 37 | 
            -
             | 
| 38 | 
            -
             | 
| 39 | 
            -
             | 
| 40 | 
            -
             | 
| 41 | 
            -
            ` | 
| 42 | 
            -
            `if ( | 
| 43 | 
            -
            ` | 
| 44 | 
            -
             | 
| 45 | 
            -
             | 
| 46 | 
            -
             | 
| 47 | 
            -
             | 
| 48 | 
            -
             | 
| 49 | 
            -
             | 
| 50 | 
            -
              if ( | 
| 51 | 
            -
              if ( | 
| 52 | 
            -
             | 
| 53 | 
            -
             | 
| 54 | 
            -
              final float  | 
| 55 | 
            -
               | 
| 56 | 
            -
             | 
| 57 | 
            -
             | 
| 58 | 
            -
             | 
| 59 | 
            -
            と | 
| 60 | 
            -
             | 
| 61 | 
            -
             | 
| 62 | 
            -
             | 
| 63 | 
            -
             | 
| 64 | 
            -
             | 
| 65 | 
            -
             | 
| 66 | 
            -
             | 
| 67 | 
            -
               | 
| 68 | 
            -
               | 
| 69 | 
            -
               | 
| 70 | 
            -
             | 
| 71 | 
            -
             | 
| 72 | 
            -
            ```
         | 
| 1 | 
            +
            大変素晴らしいコードなのですが、クラスが多くProcessingは内部クラスになる仕様上アクセス修飾子が意味がなくなるので、ちょっとコードが追いにくいですね。
         | 
| 2 | 
            +
            しかし順番に落ち着いて読んでいくと、案外すぐ目的のものに行き当たりました。
         | 
| 3 | 
            +
             | 
| 4 | 
            +
            まず要件をまとめると、
         | 
| 5 | 
            +
            1. どこでクリックしても拡散する
         | 
| 6 | 
            +
            2. クリックしたら描画されている円を全て拡散する
         | 
| 7 | 
            +
            3. クリックをしなくてもランダムな色の円がランダムな場所に描画され続ける
         | 
| 8 | 
            +
             | 
| 9 | 
            +
            ですね。
         | 
| 10 | 
            +
             | 
| 11 | 
            +
            ---
         | 
| 12 | 
            +
             | 
| 13 | 
            +
            **[注意]**
         | 
| 14 | 
            +
            これ以降同名のメソッドが多いので、本体?PApplet?直に置かれてるsetup()やdraw()をApp.setup()と書き、class Noteのdraw()をNote.draw() と書くこととします。
         | 
| 15 | 
            +
             | 
| 16 | 
            +
            ---
         | 
| 17 | 
            +
             | 
| 18 | 
            +
            1. 2.はクリックに関連するでしょうから、`App.mouseClicked()`を見ます。
         | 
| 19 | 
            +
            `NoteController.mouseClicked()`に任せています。
         | 
| 20 | 
            +
            ちゃんと読んでもいいんですが、きっと`find()`でnoteのindexを探し、なければ何もせずあれば`Note.toggle()`ってことでしょう。
         | 
| 21 | 
            +
             | 
| 22 | 
            +
            まずここで全部拡散なので、findする必要はなくなります。
         | 
| 23 | 
            +
            ```Processing
         | 
| 24 | 
            +
            void mouseClicked() {
         | 
| 25 | 
            +
              for (Note note : notes) {
         | 
| 26 | 
            +
                note.toggle();
         | 
| 27 | 
            +
              }
         | 
| 28 | 
            +
            }
         | 
| 29 | 
            +
            ```
         | 
| 30 | 
            +
            実行します。
         | 
| 31 | 
            +
            はい、もう1.2.は終わってしまいました。
         | 
| 32 | 
            +
             | 
| 33 | 
            +
            実は問題は3.です。
         | 
| 34 | 
            +
            拡散した後一瞬でパララと10個円が出たと思いますが、追加のペースが遅いと全部消えた後寂しいですし、早すぎるとあっという間に画面中覆いつくされそうです。
         | 
| 35 | 
            +
            どういうイメージなのかがわからないので、調整ポイントを押さえて細かい調整はmswさんに任せます。
         | 
| 36 | 
            +
             | 
| 37 | 
            +
            では追加部分を見てみます。
         | 
| 38 | 
            +
             | 
| 39 | 
            +
            起点はApp.draw()内の`controller.add(playerIn);`です。
         | 
| 40 | 
            +
            `NoteController.add()`を見ます。
         | 
| 41 | 
            +
            `if (notes.size() > 10) return;` 円の最大個数ですね。
         | 
| 42 | 
            +
            `if (playerIn < 20) return;` 音量が小さすぎる場合は無視するようです。
         | 
| 43 | 
            +
            `notes.add(new Note(x, y, playerIn));` 円を追加してるんでしょう。
         | 
| 44 | 
            +
             | 
| 45 | 
            +
            なるほど。ここは毎フレーム呼ばれるので拡散した後、一気に増えたわけですね。
         | 
| 46 | 
            +
            一気に増えないように、
         | 
| 47 | 
            +
            ```Processing
         | 
| 48 | 
            +
            void add(final float playerIn) {
         | 
| 49 | 
            +
              if (notes.size() > 100) return;//check
         | 
| 50 | 
            +
              if (playerIn < 20) return;
         | 
| 51 | 
            +
              if (frameCount % 30 != 0) return;
         | 
| 52 | 
            +
             | 
| 53 | 
            +
              final float x = random(xmin, xmax); 
         | 
| 54 | 
            +
              final float y = random(ymin, ymax);
         | 
| 55 | 
            +
              notes.add(new Note(x, y, playerIn));
         | 
| 56 | 
            +
            }
         | 
| 57 | 
            +
            ```
         | 
| 58 | 
            +
            としてみましたが規則的過ぎていけませんね。
         | 
| 59 | 
            +
            `if (frameCount  % (int)random(10, 30) != 0) return;`私はこんなもんかな?と思いましたが、今ある円の個数によって変えるとか方法はいろいろありそうです。お好きなように調整してください。
         | 
| 60 | 
            +
             | 
| 61 | 
            +
             | 
| 62 | 
            +
            あとやってるうちに気が付いたんですが、一回拡散した後、円が水色系統だけになりませんか?
         | 
| 63 | 
            +
            そういう仕様ならいいのですがなんか色が減って寂しいので、どうにかならないかと試行錯誤したところ、`Note.draw()`
         | 
| 64 | 
            +
            ```Processing
         | 
| 65 | 
            +
            void draw() {
         | 
| 66 | 
            +
              noStroke();
         | 
| 67 | 
            +
              colorMode(HSB, 360, 100, 100, 100);
         | 
| 68 | 
            +
              fill(col);
         | 
| 69 | 
            +
              ellipse(x, y, w, h);
         | 
| 70 | 
            +
            }
         | 
| 71 | 
            +
            ```
         | 
| 73 72 | 
             
            で色が戻りました。ここはそれでよいのか自信ありません。
         | 
