p5.js アルゴリズムによる図形描画

p5js, 公開資料
ノイズの描画

ノイズを使用すると、ランダムでありながら連続性のある模様を作り出すことができます。ノイズのパラメーターはx,yですが、この数値を大きくすると模様が細かくなり、逆に大きくすると模様も大きくなります。ノイズの値を使用すれば文様の破れ表現も実現が容易です。

波形の描画

sinやcosを使用することで、波形を描けます。sinに必要なパラメータは角度。360度で1周期となるため、角度の変化が大きいほど波の起伏回数が増えることになります。

また下記の例ではmapが使われていますが、これは大変便利な命令で、範囲と範囲を対応づけてくれる計算をしてくれます。このプログラムでは、yが(0〜300)に変化する範囲に、angleの(0〜360*repeat)を対応づけています。

多角形の描画

sinとcosの組み合わせで多角形を描くことができます。グローバル変数のcornerが角数となっているので変更してみてください。角数が多くなるほど円に近づいていきます。(ということは円も描けます)

螺旋の描画

多角形の描画の応用で、螺旋を描いてみた例です。

Related Posts

No results found

メニュー