17/07/22

Canvasでメタボール(くっついたり離れたりするボール)をグラデーションで作ってみる


今回から2回に分け、メタボールをcanvasで表現していきたいと思います。
メタボールとはくっついたり、離れたりするボールのことを言います。
グラデーションを使用する方法と
マーチングキューブ法を使用する方法
それぞれを表現していきたいと思います。

今回はグラデーションを使用する方法です。

とりあえず成果物

See the Pen oevbxz by youya66 (@youya66) on CodePen.0

グラデーションメタボールの解説

メタボールを作成するにあたり、グラデーションを用います。
例えば2つの円があります。
それぞれ以下のようにグラデーションによる濃度を持っています。

次に閾値を設定します。
閾値以上の透明度を持つならば透明度を1.0に
閾値よりも小さい透明度ならば透明度を0.0に設定します。
以下は赤が透明度1.0を表し、ピンクが透明度0.0を表していると考えてください。

そして、重なった部分が閾値以上であれば透明度を変更し、
くっついたり、はなれたりする表現を実現しています。

コードの解説

描画するためのcanvasと
pixcelデータのみを利用するtemp canvasを用意します。

 

temp canvasにグラデーションメタボールのデータを入力します。
しかしこれだけでは、ただグラデーションを持つ円データが入力されたままです。

 

透明度は重なると数値が大きくなる(当たり前ですが念のため。)ことを利用します。
そのために、getImageDataでtemp canvasのピクセルデータを取得し、
(n-1) + 3番目に透明度のデータを持つのでそれを利用し、
透明度と閾値の比較を行います。

 

変更したピクセルデータをputImageDataでcanvasに描画してやれば完成です。

 

以上です。
次回までしばしお待ちを。

 

スポンサーリンク

メールアドレスが公開されることはありません。

youya66

だらけとびびり、それとちょっぴりのてきとーさ。

コアラになってだらだらしながら愛されたい。