WEBGL with p5.jsで地形メッシュを作る

2020.03.11

はじめに

表現系でよくある、プリミティブな地形を作ってみました。 アルゴリズム自体は、シンプルで頂点ごとに、Sin関数で変化させ、 メッシュでつないでいきます。 今回は、WEBGL系の機能を含めバージョンアップした「P5js」 +「 WEBGLでビジュアル」を作ってみました。

P5.jsの実装

以下p5.jsの実装です。

p5jsのWEBGLの安定性・高速化されたということで、
比較的よくある表現ですがうねりのあるプレーンを作ってみました。

メッシュの色と動きが海の波っぽい感じになりました。

バーテックスでプレーンを作って頂点を
sin関数とマウス座標で変化をつけています。

P5.jsのWeb エディターがありますので、
そちらで色々アレンジして遊んでみるのもいかがでしょうか?
基本形はこのままにテクスチャで色々遊ぶのがおすすめです。