# 2020Web基礎 / p5.js

2020-07-06
杉本達應

#### Canvas要素

p5.jsは、Canvas要素に描画している

<canvas></canvas>

#### Canvas要素の特徴

- 2D/3DグラフィックをJavaScriptで描ける
- ビットマップ画像（ピクセル単位の操作ができる）
- グラフィック要素が増えても軽い（SVGと比べて）
- ゲームアプリに使われている

#### p5.jsの使いどころ

1. グラフィック／アニメーションを描く
画像ファイルの代わりに
2. インタラクティブなグラフィック
マウスの動き、キー入力、ボタンなど
3. データ可視化
データから表やチャートを作る

#### サンプル

- [背景](https://codepen.io/sugi2000/full/MWKrOpV)
Canvasを背面にすることで、インタラクティブな背景が作れます。
- [テキスト入力](https://codepen.io/sugi2000/full/PoZQOoY)
ユーザのテキスト入力を反映させたグラフィックを作成します。
- [p5.js Web Editor | COVID-19 Tokyo](https://editor.p5js.org/sugi2000/sketches/ICAfqeuqp)
新型コロナウイルス感染症の患者データからチャートやリストを作成します。

#### 参考資料

- [君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA](https://ics.media/entry/200520/)
CSS/SVG/Canvasのそれぞれの特徴を解説
- [Generative Design with p5.js［p5.js版ジェネラティブデザイン］ ―ウェブでのクリエイティブ・コーディング](http://www.bnn.co.jp/support/generativedesign_p5js/)
書籍のサンプルコード
- [Code! Programming with p5.js - YouTube](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA)
p5.jsチュートリアルの動画
- [東京の夏は着実に｢暑く･長く｣なっている](https://toyokeizai.net/sp/visual/tko/temperature/)
140年間の日別平均気温でヒートマップを作成
- [人と情報のエコシステム - 社会技術研究開発センター](https://www.jst.go.jp/ristex/hite/index.html)
p5.jsでも作れそうなインタラクティブなアニメーション
- [HACK The Nikkei](https://hack.nikkei.com/)
以前はp5.jsを使っていたが現在は変わった