yoppa.org


芸大 – メディアアート・プログラミング I 2023

p5.dom でHTML 5オブジェクトを使う

今回は、p5.domを使用します。p5.domを使用することで、p5.jsのcanvasの枠を越えて、HTML 5のDOMに直接アクセスすることが可能となります。例えば、Webブラウザで用意されている、ボタンやチェックボックス、スライダーなどのGUIのパーツを利用したり、Webカメラやマイクなどのデバイスへのアクセスしてインタラクションすることが出来るようになります。

映像資料

スライド資料

サンプルプログラム

本日の課題

p5.jsのp5.domライブラリーを用いて作品を制作してください!

  • p5.domで利用する機能は自由
    • GUI系 (テキスト入力、ボタン、スライダー …etc.)
    • カメラ
    • オーディオ (マイク入力が使えます!)
  • 講義内で紹介していない機能も自由に使用してください
  • OpenProcessingに投稿、提出フォームからURLを提出してください!

本日のタグは、geidaima230526でお願いします!

提出フォーム