p5.jsの全体像について書きました。合わせて当ブログで紹介した入門記事をまとめました。今後の展望として、p5.jsを勉強した後に何を勉強したら良いのかを挙げてみました。参考程度にどうぞ。
p5.jsの全体像
下記は、p5.jsのリファレンスにある項目です。これがp5.jsの全体像です。つまり、「Webで2D・3Dを描画するために用意されている機能群」について書いてあります。
- Color
- Constants
- DOM
- Data
- Environment
- Events
- Foundation
- IO
- Image
- Lights, Camera
- Math
- Rendering
- Shape
- Structure
- Transform
- Typography
p5.jsの入門記事のまとめ
当ブログでは、p5.jsの基本的な項目について取り上げました。これらを使えると2D・3Dの簡単なアニメーションが作れるはずです。
基本
- クリエイティブコーディングとは
- p5.jsの導入
- 基本的な書き方(ひな型)
- 基本のアニメーション
- 色の指定
- 定義済み変数を利用する
- 図形の描画
- 塗りと線の指定
- テキストの描画
- 図形の変形
- マウス座標の取得
- キー入力の取得
- 乱数を使ったアニメーション
- 三角関数を使ったアニメーション
- DOMの利用
- 画像の読み込みと表示
- 3Dの描画
- カメラとデバッグモード
- 画像に書き出す
- canvasタグを任意の場所に表示させる
応用
今後の展望
p5.jsを勉強した後にやることを挙げてみました。
