ちょっと前に「サイケデリックな万華鏡」というスケッチを作ったのですが、その際p5.jsでは「グラフィックオブジェクトのイメージ化」がProcessingとまったく同じ手順ではうまくいかず、妥協案を使っていました。詳細については、以前のエントリをご参照いただければ。
で、その後、いろいろいじくっているうちに何とか当初のプランどおり「グラフィックオブジェクトをイメージ化し、三角形のマスクをかけたものを反転させながら並べる」という形でのスケッチを作ることができました。
●サイケデリックな万華鏡【完成版】（クリックすると別タブが開きます）
うん。前のものより、格段に万華鏡っぽくなりました。あと、「createGraphics」を使った前回のスケッチには「モバイルブラウザで動かすとほぼ確実に落ちる」という問題があったのですが、今回のスケッチはなぜか大丈夫みたいです。画面に直接描かずに、一旦イメージ化しているからでしょうかね。そのあたりの正確な理由はよく分かりません。
以前調べた範囲では、Processingでグラフィックオブジェクトをイメージオブジェクトに変換する場合には、それぞれが持っている「pixels」という配列プロパティを「imageObject.pixels = graphicsObject.pixels」といった感じでそのまま代入（コピー）してやればよかったのですね。でも、p5.jsで同じやり方をしようとするとどうしてもうまくいかなかったんです。
結局、どうすればよかったのかというと、pixelsに含まれている全要素を「1個ずつ」for文で書き写してやるという手順で意図どおりコピーできたのでした。pixelsは、イメージの全ピクセルについて、RGBAの数値を順に並べたものです。今回のスケッチでは、グラフィックオブジェクト側の「pixels.length」をとり、添字を1ずつカウントアップしながら「imageObject.pixels[i] = graphicsObject.pixels[i]」といった感じで、毎フレームひとつずつコピーしています。そして、イメージ化したグラフィックを「mask()」で三角形に切り抜いて、反転させながら並べています。それ以外の部分については、前回のスケッチの流用です。
このあたりのProcessingとの違いはp5.jsの仕様なのでしょうかね？ できれば「pixels」の代入で、そのままイメージ化ができてしまうほうがいろいろラクなような気もしますが。ま、いずれにせよ当初のプランどおりのスケッチになって大変スッキリしたのでした。
※追記…今回のスケッチ、グラフィックドライバで擬似的に解像度を上げている（100％以外のスケーリング設定がされている）ディスプレイで起動すると、カンバス上での画像の表示サイズが意図しているものと変わってしまうようです（PC、モバイル問わず）。
↑こんなかんじ。多少拡大されてモアレ模様が出たり、アニメーションスピードが速くなったりするみたいです。これはこれで面白い気もしますが（笑）、本来の出力を見たい場合は、スケーリングの設定を100％にするか、別のデバイスで試してみてください。
「サイケデリックな万華鏡」リベンジ はコメントを受け付けていません