p5.jsの続きです。前回はいろんな図形をcanvas要素に配置してみました。次のステップに進むにあたり、ちょっと方向性が見えにくかったため、習得の上で参考になりそうなサイトや書籍をいろいろ調べてみました。
【目次】
- 公式リファレンス
- 書籍「p5.js版ジェネラティブデザイン」
- ブログ「infosmith.biz」
- ドットインストール
- The Coding Trainのp5.js講座（YouTube）
- 習得の展望（着手する優先順位）
- 最後に：ブログの更新形態について
※前回：p5.js事始め：いろんな図形を配置してみる - クモのようにコツコツと
公式リファレンス
「p5.js」で検索をすると出てくる公式サイト
※参考：home | p5.js
前回の記事ではまず「Get Started」でp5.jsをゲッティングしてスターティドしたわけです。
そのあとに「Reference」に進み一番上の「Color」はパッと見で意味がわかる感じだったので後回しにし、次の「Shape」（形状）に進んだ。この中の最初の「2D Primitives」を「Get Started」のcanvasに配置した感じです。
その次の「Attributes」以降もざっと見てみたんだが、なんつーか、あまりにも網羅的というか断片的というか。。自分がまずやってみたいのはパーティクルのインタラクティブなモーションで、そこに向かうにあたってもう少し系統立てて理解ができるサイトがないか…。
なお、このページにはp5.jsを拡張するライブラリの一覧があった。上の3つ（p5.dom、p5.sound、p5.accessibility）が公式ライブラリのようだ。サウンドもあるのは嬉しい。
こちらのページにはサンプルがたくさんある。ここらへんの気になるコードを読み解くのもいいか？
※参考：examples | p5.js
ちなみにp5.jsの日本語公式サイトもあったが、翻訳はあまり進んでいない様子…。
書籍「p5.js版ジェネラティブデザイン」
休日に書店でこんな本を見つけた！
ものすごく分厚いがサンプルがアーティスティックでカッコいい！
しかし、内容的にはビジュアルコーディングがメインで、拡張ライブラリであるDOM（p5.dom）や音声（p5.sound）などのWebならではのライブラリは扱われていない。（たぶん基本を理解したらライブラリは簡単なのかな？と推察するが）
※参考（DOM）：reference | p5.js
※参考（音声）：reference | p5.js
これはかなり分厚くて重たいので購入に勇気はいる。しかし、素晴らしいことにジェネラティブデザインのサンプルのソースコードが公開されていた！！！
※参考：Generative Design with p5.js［p5.js版ジェネラティブデザイン］ ―ウェブでのクリエイティブ・コーディング
なな、なんちゅー大判振る舞い！！もしかしたらp5.jsの基本を身につけるとこのソースコードを読む解くことができるのではないかな、という淡い期待も
ちなみに「ジェネラティブデザイン」は元々はProcessing版の名著があり、それのp5.js版。
※参考：Generative Design-Processingで切り拓く、デザインの新たな地平
ブログ「infosmith.biz」
p5.jsについて調べているとフリーランスライター・編集者の柴田克己さんが運営されているブログ「infosmith.biz」の記事に高確率で遭遇する！ブログ自体の記事一覧を見てもp5.jsネタはかなりの比重になっており、日本のp5.js情報発信の第一人者ではなかろうか、と思っている。
※参考：infosmith.biz
ドットインストール
なんと、ドットインストールにもp5.jsの講座があった！！2つあった。
※参考：https://dotinstall.com/lessons/basic_p5js
※参考：https://dotinstall.com/lessons/creativecoding_intro_p5js
こちらはもちろん日本語だし動画の長さ的にはダン先生よりコンパクト。無料枠で全編が見れそうだし、ダン先生の前にこちらを見てみようかな。
The Coding Trainのp5.js講座（YouTube）
「The Coding Train」というYouTubeチャンネルがあって、陽気なダン先生がプログラミングを解説してくれている。その中にp5.js講座の再生リストを発見！これは濃ゆいボリューム♪
※参考：Code! Programming with p5.js - YouTube
※参考：8: HTML / CSS / DOM - p5.js Tutorial - YouTube
※参考：9: Additional Topics - p5.js Tutorial - YouTube
※参考：10: Working with data - p5.js Tutorial - YouTube
※参考：11: Video and Pixels - p5.js Tutorial - YouTube
※参考：12: Web Sockets and p5.js Tutorial - YouTube
※参考：13: What is Perlin Noise? - YouTube
※参考：14: Hamilton Lottery Simulator with p5.js - YouTube
なぜか「15」が見つからない。お蔵入り？*1
※参考：16: Topics of JavaScript/ES6-ES8 - p5.js Tutorial - YouTube
※参考：17: p5.js Sound Tutorial - YouTube
※参考：18: WebGL - p5.js Tutorial - YouTube
動画自体は英語なんだけど、YouTubeの「自動翻訳」で「日本語」を選択するとすごく自然な日本語字幕で動画を見ることができる！Googleの翻訳機能は磨きがかかっているなぁ。ただ、自分がやり方がわからないだけかもしれないけどスマホアプリのYouTubeではこの「自動翻訳」が見当たらず、英語の字幕になってしまう。PCブラウザでしか見れないとしたらそれは制限になる。。
AudioやDOM、WebGLなどのライブラリの解説もあるのが嬉しい♪
（2019/08/27追加）
これもかな？Nodeとかサーバサイドがからみそう。
※参考：https://www.youtube.com/watch?v=DbcLg8nRWEg&list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X
Coding Challengeというコーナーにもp5.jsの動画が見受けられる
※参考：Coding Challenges - YouTube
（2020/03/29追加）
「Nature of Code 2」という再生リストもp5.jsぽい！元はProcessingの本なんだが。
※参考：The Nature of Code 2 - YouTube
習得の展望（着手する優先順位）
いろいろ調べた結果、このような順番で進んでみようかと思う。
- ドットインストールを見る（スマホ&PC）
- The Coding Trainを自動翻訳で見る（PC前提？）
- 公式リファレンスを見直す（ここで体系的な手順が見えたら着手する）
- ジェネラティブデザインのサンプルを見る（ここで理解できたらカスタマイズ）
- ジェネラティブデザインのサンプルが理解できなかったら書籍を購入
- あとはググる。「infosmith.biz」の記事は引き続き遭遇すると思うのでお世話になる。
最後に：ブログの更新形態について
自分はブログの形態として、ある程度のボリュームのソースコードと完成物を載せることを意識していたが、その工程（=実装フェーズ）を前提にすると、その前の構想、調査、検証など（=設計フェーズ）の間、ブログを更新できないことがわかった。それが結構なストレスでだんだんと気分が落ちてくる。。今後は肩の力を抜いて設計フェーズ段階でも気軽に「脳内会議」的な形でブログを更新していこうと心に決めた。
これまで、何かシリーズを始める初期の段階では設計フェーズ的な記事もあったのだけど、走り出したら実装フェーズの記事を載せ続ける前提にしていた。でもそうすると途中で手こずったときに動きが鈍くなってしまう。途中途中の段階でも再設計フェーズになったらその状態を記録していきたい。ブログのアジャイル開発。それではまた！！
※続き書きました！（ドットインストールから着手しました）
※参考：p5.jsを習得するためにやった事まとめ qiita.com
*1:15は「Node.js & Proccessing」のチュートリアルなのかも。19以降もp5.jsじゃないチュートリアルが続くようなのでこの連番はp5.jsだけじゃないっぽい
