yoppa.org


前橋工科大学 – 情報メディアデザイン 2025

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

オンデマンド教材2回目

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

映像資料

スライド資料

本日の課題

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

  • p5.domで利用する機能は自由
    • GUI系 (テキスト入力、ボタン、スライダー …etc.)
    • カメラ
    • オーディオ (マイク入力が使えます!)
  • 講義内で紹介していない機能も自由に使用してください
  • 投稿したURLをアンケートから提出
  • 投稿の際にmitmedia250605のタグをつけてください!
  • 締切: 2025年6月12日(木)まで!

課題提出フォーム