【ビジュアルコーディング】p5.jsを習得するためにやった事 まとめ（随時更新）

「p5.js」はProcessingから発展したビジュアルコーディングのJSライブラリ。Web AudioやWebGLまで、できることがとても多く可能性を感じています！習得するためにやってみたことををここにまとめます（随時更新！）

その他のJSライブラリはこちら
※参考：[JSライブラリ&フレームワークを試してみたシリーズまとめ（随時更新）](https://qiita.com/i-ryo/items/a2431232d62d87161f7f)

※**2021/12/31追加**：[p5.jsを使って三角関数の理解を深めるために作ったアプリ](#三角関数しらべmath)

# 事始め

### いろいろな図形を配置

SVG要素かCanvas要素か、それが問題だ。ともあれサンプルを見て純粋にワクワクできるp5.jsをやってみる！チュートリルを見ながら色んな図形を配置してみる。

※参考：[p5.js事始め：いろんな図形を配置してみる](https://www.i-ryo.com/entry/2019/05/26/213817)

### 参考サイト、書籍、動画

チュートリアルを見るだけだと体系的な理解が難しそうに感じたため、ネット上の情報や書籍、動画について調べてみる。ジェネラティブデザイン、ドットインストール、Dan先生など！

※参考：[p5.jsを習得するために参考になりそうなサイト、書籍、動画たち](https://www.i-ryo.com/entry/2019/06/06/205237)

# Coding Trainのp5.jsリスト

Youtubeの自動翻訳の制度もかなり実用的になってきて、「Coding Train」のダン先生の動画がとにかく楽しい！

その1：p5.jsとは何か、から四角を描く

※参考：[【p5.js】楽しく学ぶ重要性：Coding Trainのダン先生に付いていく！(p5.js 1.1〜1.2)](https://www.i-ryo.com/entry/2019/08/27/070404)

その2：setup（キャンバス描画）とdraw（四角、線、四角の原点）で四角の形を変える。

※参考：[【p5.js】基本書式とsetup（キャンバス描画）、draw（四角、線、四角の原点） Coding Train(p5.js 1.3)](https://www.i-ryo.com/entry/2019/09/12/065141)

その3：色の基本を理解する。JS全般知識であるコメント、エラー、コメントも。※2019/11/24追加

※参考：[【p5.js】色の基本、コメントとエラー、コメント：Coding Train(p5.js1.4〜1.6)](https://www.i-ryo.com/entry/2019/11/24/190441)

その4：変数を使ってペイントアプリを作る（※2019/12/30追加）

※参考：[【p5.js】変数mouseX、mouseYを使ってペイントアプリを作る：Coding Train(p5.js2.1)](https://www.i-ryo.com/entry/2019/12/30/204511)

その5：変数の上書き、オブジェクトを作る（2020/02/24追加）

[【p5.js】変数を上書き、変数にオブジェクトを設定：Coding Train(p5.js2.2-3)](https://www.i-ryo.com/entry/2020/02/24/160202)

# クリエイティブコーディング（ドットインストール）

ドットインストールのクリエイティブコーディングにトライ！

その1：モノクロでランダムなサイズのドットを配置

※参考：[【p5.js】クリエイティブコーディングに挑戦（その1）](https://www.i-ryo.com/entry/2019/06/20/234635)

その2：前半でドットをランダムなカラーにする。後半でマウスに合わせてドットのサイズを変えて動きを付ける。

※参考：[【p5.js】クリエイティブコーディングに挑戦（その2）](https://www.i-ryo.com/entry/2019/07/21/194243)

# Generative Design with p5.js

書籍「Generative Design with p5.js」のソースコードを読み解いてみる！

### 色編

色 P_1_0_01

※参考：[【p5.js】Generative Design with p5.js「色 P_1_0_01」のコードを読み解く](https://www.i-ryo.com/entry/2019/08/16/055934)

色 P_1_0_02（2020/03/29追加）

※参考：[【p5.js】Generative Design with p5.js「色 P_1_0_02」のコードを読み解く](https://www.i-ryo.com/entry/2020/03/29/205706)

色 P_1_0_02（2020/04/22追加）

※参考：[【p5.js】Generative Design with p5.js「色 P_1_0_03」のコードを読み解く](https://www.i-ryo.com/entry/2020/04/22/071059)

### 形編

形 P_2_0_01（2020/04/29追加）

※参考：[【p5.js】Generative Design with p5.js「形 P_2_0_01」のコードを読み解く](https://www.i-ryo.com/entry/2020/04/29/154617)

形 P_2_0_02、03（2020/05/19追加）

※参考：[【p5.js】Generative Design with p5.js「形 P_2_0_02、03」のコードを読み解く](https://www.i-ryo.com/entry/2020/05/19/190912)

色 P_2_1_1_01、02（2020/06/13追加）

※参考：[【p5.js】Generative Design with p5.js「色 P_2_1_1_01、02」のコードを読み解く](https://www.i-ryo.com/entry/2020/06/13/151601)

### 文字編

文字 P_3_0_01（2020/05/05追加）

※参考：[【p5.js】Generative Design with p5.js「文字 P_3_0_01」のコードを読み解く](https://www.i-ryo.com/entry/2020/05/05/181836)

文字 P_3_1_1_01（2020/05/28追加）

※参考：[【p5.js】Generative Design with p5.js「文字 P_3_1_1_01」のコードを読み解く](https://www.i-ryo.com/entry/2020/05/28/190542)

文字 P_3_1_2_01（2020/07/01追加）

※参考：[【p5.js】Generative Design with p5.js「文字 P_3_1_2_01」のコードを読み解く](https://www.i-ryo.com/entry/2020/07/01/183531)

### 画像編

画像 P_4_0_01（2020/05/14追加）

※参考：[【p5.js】Generative Design with p5.js「画像 P_4_0_01」のコードを読み解く](https://www.i-ryo.com/entry/2020/05/14/065803)

画像 P_4_1_1_01（2020/06/07追加）

※参考：[【p5.js】Generative Design with p5.js「画像 P_4_1_1_01」のコードを読み解く](https://www.i-ryo.com/entry/2020/06/07/082412)

画像 P_4_1_2_01、02（2020/07/12追加）

※参考：[【p5.js】Generative Design with p5.js「画像 P_4_1_2_01、02」のコードを読み解く](https://www.i-ryo.com/entry/2020/07/12/154919)

### 三角関数しらべMath

p5.jsを使って三角関数の理解を深めるために作ったアプリ（**2021/12/31追加**）

※参考：[【React & p5.js】「三角関数しらべMath」を作った（三角関数の理解を深めるアプリ）](https://www.i-ryo.com/entry/2021/12/31/160217)

今後も随時更新していきます！