アニメーションはp5.jsの最も得意な分野の一つである。この章で取り上げる内容は大きく分けると以下の３種類である。
イメージ処理
以下の３段階でイメージ処理を行う。
- ・imgフォルダ（名前は任意）を作成し、イメージファイルをアップロード。
- ・preload関数内で、loadImage関数により指定したイメージファイルをロード。
- ・draw関数内で、image関数によりイメージを表示。
アニメーション
アニメーションを行うための基本的な機能として以下がある。
- frameRate(n)
draw関数を１秒間に呼び出す回数を設定する。デフォルトは60回。
- frameCount
予約変数の一つで、現在のフレーム数(draw関数が呼ばれた回数)を示す。
３D描画
3次元空間内に立体的なオブジェクト（立方体、球、円環面など）を描画し、座標移動、回転操作を行うことができる。また、カメラを移動したり、光源を制御したりすることができる。具体的にはcreateCanvas関数の第３引数に定数WEBGLを指定することで、３D関連の関数が使用できるようになる。ックを描く際にも有効である。