p5jsを勉強するコンテンツ。 このコースは魅力的かつダイナミックな動きを実現できるp5jsを学ぶコースです。 週一のTR+だけでなく家庭学習前提のコースとなるため、時間が確保できる人のみ選択してください。
p5jsというクリエイティブコーディング用のライブラリの使い方を学び、プログラミングをつかった強力な表現力をみにつける。
ボード系の考え方を身につける。ポチポチで色を変える。
パーティクルはクリエイティブコーディングの基本。大量のパーティクルを制御する方法を学ぶ。応用すれば宇宙の星空を再現したり、雨や雪を表現したりできる。クラスを学ぶ。
誕生、生存、過疎、過密の４つのルールを与えて、人工生命をシュミレーションする。ピクセルアートを完全に理解できる人のみ選択可能。
初回はテーマ決め、zennで基礎を学習し、サンプルアプリを模写、そのあと自作アプリorサンプルのカスタマイズを行う。
通常
| week | コンテンツ |
|---|---|
| 1 | 作りたいものを決める。 |
| 2 | zenn本のチャプタ-5まで終わらせる。終わらなければ家でやる。 |
| 3 | zenn本のチャプタ-9まで終わらせる。終わらなければ家でやる。 |
| 4 | p5jsをHTMLに統合してWebブラウザ上でみれるようにする |
| 5 | サンプルアプリ実装 |
| 6 | サンプルアプリ実装 |
| 7 | 自作アプリorカスタマイズ |
| 8 | 自作アプリorカスタマイズ |
| 9 | 自作アプリorカスタマイズ |
| 10 | 発表資料作成 |
| 11 | 最終発表会 |
作りたいものを決めましょう。
好きなもの × サンプルアプリ =
サンプルアプリ
- パーティクル
- ピクセルアート
応用サンプルアプリ
- ゲームオブライフ(ピクセルアートをクリアした人のみ)
学習 https://zenn.dev/ojk/books/intro-to-p5js
エクササイズ
p5jsを使って簡単な絵を描きましょう。オンラインエディタを使ってください。
コードは、exercises/week2/your-code.jsに貼り付けてください。
学習 https://zenn.dev/ojk/books/intro-to-p5js
エクササイズ キーボードの矢印キーを入力すると、四角が移動するプログラミムを書いてみましょう。ChatGPTに相談してもよいですが、まずは自分で手を動かして悩んだほうが、覚えやすいです。
オンラインエディタを使ってください。
コードは、exercises/week３/your-code.jsに貼り付けてください。
今まではオンラインのエディタを使ってp5jsを書いていました。オンラインエディタの内容はアカウント登録すれば保存でき他の人に見せることができます。 今回はアカウント登録せずに、他の人に見せることができるように、p5jsとHTMLを統合する方法を学びます。
学習
samples/skeletonフォルダを見てください。これがp5jsを利用するための最小構成です。index.htmlのheadでp5.min.jsファイルを読み込みその後にmy-p5.jsを読み込んでいます。順番が大事です。なぜならmy-p5.jsはp5jsのコードに依存するため、前もって読み込まれていなければいけないからです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- p5jsのライブラリ -->
<script src="p5.min.js"></script>
<!-- 自分のコード -->
<script src="my-p5.js"></script>
</head>
<body>
<!-- canvasはp5jsが作成してくれる -->
</body>
</html>p5.min.jsはp5jsの本体コードを圧縮したものです。読めなくて大丈夫ですが、これがp5jsのさまざまな機能を提供してくれていることを知っておいてください。
my-p5.jsは自分たちのコードを書く場所です。
また、TRでは画面をリロードして読み込み直していたと思いますが、TR+では修正時に自動的に画面が反映されるようにVSCodeに「Live Preview」拡張機能をいれましょう！ 左サイドバーから拡張機能一覧を開き、左上の検索窓で「live preview」と打ってください。Microsoftが提供してある青いやつが見つかったらインストールしましょう！
インストールが終わったら、samples/skeleton/index.htmlを開いてください。右上にアイコンが追加されているのがわかりますか？
それをクリックしてみてください。もう一つ画面が出てくると思います。
もし、見にくければブラウザで開くこともできます。
では、この状態でsamples/skeleton/my-p5.jsを開いてコードを編集し、保存してみましょう！すぐさま、画面に反映されていることがわかります。
これはホットリロードと呼ばれる機能で、開発をスピーディに助けてくれます。ただこの状態の画面をたくさん開きすぎるとPCに不可がかかるのできをつけてください。
ここまで理解したらエクササイズに進みましょう！
エクササイズ1
exercises/week4配下にindex.htmlファイルとmy-p5.jsを自作して、Week3のエクササイズを再現してください。p5jsのライブラリはそのフォルダ直下にあるp5.min.jsを利用してください。
エクササイズ２(余裕のある人だけ) エクササイズ１で作ったものを、GitHub Pagesにホスティングしてください。
学習 サンプルアプリ
- ピクセルアート
- パーティクル
- ゲームオブライフ
エクササイズ サンプルアプリに自分なりのカスタマイズをしてください。どんなに小さなカスタマイズでもOK! カスタマイズした箇所の説明とともにコードを提出してください。
最終発表会準備
最終発表会
p5jsでできること
p5jsの作例集 https://p5js.org/examples/
リリックビデオの作成。daniwellPさんは才能の塊だと思います。 https://textalive.jp/
チームラボの空間演出はp5jsの親戚であるProcessingで作られています https://www.team-lab.com/recruit/fresh/product_engineer/
HTML5の機能と組み合わせれば可能性は無限大？
p5.js のキャンバスにパワポの画面を取り込む（Screen Capture API を活用）
ブラウザ上で録音できるツールをflask + recorder.js + p5.js on TypeScript で作る
発した言葉の中にGとWがあれば祝福してくれるブラウザアプリをブラウザのみで作ってみた
Web Serial API を利用できる p5.js用のライブラリ「p5.web-serial」で micro:bit とのシリアル通信（p5.js Web Editor・MakeCodeを利用）