芸大 - メディアアート・プログラミング I 2019
第9回: p5.js Libraryを使う – p5.dom でカメラ映像をリアルタイム処理
p5.jsのライブラリー「p5.dom」を使用すると、canvasの内部だけではなく、それを支えているHTMLファイルの要素にアクセスすることが可能です。HTMLの要素を用いてボタンやスライダーなどのGUIを作成できるようになります。p5.domはHTMLの要素だけでなく、カメラや音声の入出力などのWebブラウザーから操作可能なデバイスへのアクセスも可能になります。
今回はp5.domのカメラ入力機能を活用して、カメラで撮影した映像をp5.jsのスケッチに取り込んでリアルタイムに処理する方法について紹介していきます。
スライド資料
サンプルファイル
スライドで使用したプログラムのサンプルは以下からダウンロードしてください。