p5.js 関数を活用した描画

p5js, 公開資料
オリジナルの関数を作成する

p5jsで独自の関数を作るためには「function」を使用して右図のように記述します。

引数というのは関数が受け取るパラメータのことです。必ずしも必要ありませんが、引数を使用すると関数をより活用することができるようになります。

右の関数を呼び出すには下記のように記述します。
drawTexture(100);

関数を呼び出した際に、引数としてパラメーターを渡しているイメージ。呼び出された関数ではパラメーターを「haba」という変数で受け取っている。

関数を活用した描画方法

関数を使用した一例を紹介します。

こちらは関数「draw()」では繰り返しの処理に専念し、実際の描画は関数「drawTexture()」に任せています。任された関数「drawTexture()」では原点の保存や移動などを行ってから、楕円を原点に描画しています。

このように処理を大まかにグループ化して、役割分担をさせることで、プログラムの記述がシンプルで視認性が上がり、エラーが発生にくくなります。

Related Posts

No results found

メニュー