p5.js 雲

p5.jsを使って「雲」を描くプログラムを作ってみました。

青空に雲が漂っているイメージです。

デモページとソースコードは以下にあります。

よかったら見てみてください。

editor.p5js.org

雲を描く仕組みは単純です。

１．キャンバスの背景色を青色にする

２．キャンバス上にグリッドを配置する

３．パーリンノイズを使って各グリッドの色を決める

４．グリッド数を増やしていく

これだけです。

実際には以下のような感じで雲を描いています。

まずキャンバスの背景色を青色にします。

次にキャンバス上にグリッドを配置します。

※わかりやすいようにグリッドの境界を赤線で描いています。

次にパーリンノイズを使って各グリッドの色を決めます。

グリッドの色は「白色」で固定し、色の透明度をパーリンノイズで変更します。

透明度を変えることで青色と白色のグラデーションが現れるようになります。

あとはグリッド数をどんどん増やしていきます。

100×100のグリッドくらいにするとグラデーションがより滑らかになるので、

雲のような絵が出来上がります。

「グリッド」と「パーリンノイズ」はいろいろと応用ができそうなので今後も試していきたいと思います。

今日はここまで。

最後まで読んでいただきありがとうございました。