2024/11/01(金) [n年前の日記]
#1 [proce55ing][processing] Processingで木の葉サワサワ処理を書いてみた
数日前に、p5.js を使って、木の葉がさわさわする処理を書いてみたけれど。
_p5.jsで木の葉サワサワ処理を試しに書いてみた - mieki256's diary
p5.js ではアルファチャンネル付き連番画像を保存できない(と思う)ので、Processing で書き直して、一連のフレームをアルファチャンネル付き連番画像として保存できるようにしてみた。ちなみに、アルファチャンネル画像を保存する仕組みについては、一昨日の日記が参考になるかなと…。
_ProcessingのPGraphicsの動作を確認
せっかくだから、githubにアップロードしておいた。License は CC0 / Public Domain ってことで。
_mieki256/sketch_draw_leaves: Processing (Proce55ing) sample. Draw and animate leaves.
一応 Windows10 x64 22H2上で動く実行形式も用意して zip で置いておいた。ただ、Java関連ファイルも含まれているのでファイルサイズが大きい…。解凍すると258MBぐらいになる…。
_Releases - mieki256/sketch_draw_leaves
動かしてる様子は以下。
本来はフルスクリーン表示で動くのだけど…。フルスクリーン表示にすると、デスクトップ録画ソフト OBS Studio 30.2.3 64bit では、デスクトップ画面を正常にキャプチャできなかった。仕方ないので、プログラム側を少し修正して、ウインドウ表示にしてキャプチャしてる。setup() {} の最初のほうの fullscreen(); を「//」でコメントアウトして、その下にある size(); のコメントアウトを外せばウインドウ表示になる。
p5.js は葉っぱを200個ぐらい描画すると処理落ちが始まったけど、Processing の場合は数千個描画してもヌルヌル動いてる。p5.js、重いのだな…。まして Processing.js になったら、もっと重いのだろうな…。
ただ、そもそも、この仕組みでは動きに限界がありそうな気も…。
先日、風が強い日に犬の散歩をしていた際、公園の木が風で揺れてる様子をじっと観察してみたのだけど。葉だけではなく、当然ながら枝も揺れるよなーと思えてきて…。
幹は太いから動かないとしても、枝はフツーに揺れるし、その枝についてる葉の位置も、枝の動きに合わせて変化する。これをプログラムで再現しようとしたら幹と枝、枝と葉で、親子関係を実装することになるんだろうなと。枝の動きは角度の変化で出せるのではないか。それもまたパーリンノイズでそこそこらしく見えてくれそう。たぶん。
ただ、どうやって、枝の位置、角度、長さを指示したらいいのか、そのあたりの仕様で悩む…。マウス操作で指定できたら良さそうだけど、どういう感じの操作手順がいいのか…。それとも疑似乱数で、枝や葉を生成するようにしてしまおうか…。いい形が出てくるまでサイコロを振ってもらう感じで…。
枝もあらかじめ描くとなると、枝の表面をどう描画したらいいのか、そのあたりも悩む。テクスチャ画像を与えるにしても、どういう画像を用意して、どう描画すればらしくなるのか…？
そういったことを考えていくと、いっそのことblender等の3DCGソフトでちゃんとモデルを作って、物理演算で動かせないか試したほうがいいのかな、とも…。
_p5.jsで木の葉サワサワ処理を試しに書いてみた - mieki256's diary
p5.js ではアルファチャンネル付き連番画像を保存できない(と思う)ので、Processing で書き直して、一連のフレームをアルファチャンネル付き連番画像として保存できるようにしてみた。ちなみに、アルファチャンネル画像を保存する仕組みについては、一昨日の日記が参考になるかなと…。
_ProcessingのPGraphicsの動作を確認
せっかくだから、githubにアップロードしておいた。License は CC0 / Public Domain ってことで。
_mieki256/sketch_draw_leaves: Processing (Proce55ing) sample. Draw and animate leaves.
一応 Windows10 x64 22H2上で動く実行形式も用意して zip で置いておいた。ただ、Java関連ファイルも含まれているのでファイルサイズが大きい…。解凍すると258MBぐらいになる…。
_Releases - mieki256/sketch_draw_leaves
動かしてる様子は以下。
本来はフルスクリーン表示で動くのだけど…。フルスクリーン表示にすると、デスクトップ録画ソフト OBS Studio 30.2.3 64bit では、デスクトップ画面を正常にキャプチャできなかった。仕方ないので、プログラム側を少し修正して、ウインドウ表示にしてキャプチャしてる。setup() {} の最初のほうの fullscreen(); を「//」でコメントアウトして、その下にある size(); のコメントアウトを外せばウインドウ表示になる。
p5.js は葉っぱを200個ぐらい描画すると処理落ちが始まったけど、Processing の場合は数千個描画してもヌルヌル動いてる。p5.js、重いのだな…。まして Processing.js になったら、もっと重いのだろうな…。
◎ 使用例 :
せっかくだから、このプログラムで保存した連番画像を、動画編集ソフト AviUtl にインポートして、それらしい動画を作成できそうか試してみた。
連番画像以外の使用画像は以下。
_tree_base.png
_cloud1.png
_cloud2.png
_sky.png
以下のような動画を作成できた。解像度が荒くて分かりづらいかもしれないけれど、雰囲気ぐらいは伝わるかなと。
これで、Processing の描画結果を連番画像で保存して、動画編集ソフトにインポートして素材として利用できそうだと分かった。
連番画像以外の使用画像は以下。
_tree_base.png
_cloud1.png
_cloud2.png
_sky.png
以下のような動画を作成できた。解像度が荒くて分かりづらいかもしれないけれど、雰囲気ぐらいは伝わるかなと。
これで、Processing の描画結果を連番画像で保存して、動画編集ソフトにインポートして素材として利用できそうだと分かった。
◎ 課題 :
- あらかじめ幹/枝の画像も読み込んで、幹/枝画像の奥や手前を選んで描画する仕様を追加すれば、もう少しそれらしくなるかなと…。幹/枝が無いと、あてずっぽうで葉を配置することになるし…。
- せっかくGUI/スライドバーを追加できたのだから、葉っぱ画像の明度や色相も似た感じで指定できれば、色合いの変化を固定しながら葉っぱを配置できそうだなと…。
- Undoも欲しい。葉の数を減らしていけばいいだけのような気もする。
- 葉を発生させる領域を円で表示して作業できれば、少しは良くなるだろうか。
ただ、そもそも、この仕組みでは動きに限界がありそうな気も…。
先日、風が強い日に犬の散歩をしていた際、公園の木が風で揺れてる様子をじっと観察してみたのだけど。葉だけではなく、当然ながら枝も揺れるよなーと思えてきて…。
幹は太いから動かないとしても、枝はフツーに揺れるし、その枝についてる葉の位置も、枝の動きに合わせて変化する。これをプログラムで再現しようとしたら幹と枝、枝と葉で、親子関係を実装することになるんだろうなと。枝の動きは角度の変化で出せるのではないか。それもまたパーリンノイズでそこそこらしく見えてくれそう。たぶん。
ただ、どうやって、枝の位置、角度、長さを指示したらいいのか、そのあたりの仕様で悩む…。マウス操作で指定できたら良さそうだけど、どういう感じの操作手順がいいのか…。それとも疑似乱数で、枝や葉を生成するようにしてしまおうか…。いい形が出てくるまでサイコロを振ってもらう感じで…。
枝もあらかじめ描くとなると、枝の表面をどう描画したらいいのか、そのあたりも悩む。テクスチャ画像を与えるにしても、どういう画像を用意して、どう描画すればらしくなるのか…？
そういったことを考えていくと、いっそのことblender等の3DCGソフトでちゃんとモデルを作って、物理演算で動かせないか試したほうがいいのかな、とも…。
[ ツッコむ ]
以上です。