yoppa.org


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

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

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

映像資料

https://youtube.com/watch?v=mQun92HLjLk%3Fversion%3D3%26rel%3D1%26showsearch%3D0%26showinfo%3D1%26iv_load_policy%3D1%26fs%3D1%26hl%3Den-US%26autohide%3D2%26wmode%3Dtransparent

スライド資料

サンプルプログラム

本日の課題

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

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

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

提出フォーム