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

映像資料

スライド資料

• p5.js Libraryを使う 1 – p5.dom でHTML 5オブジェクトを使う

投稿作品とランキング

投稿作品

• 第1位 : 数式 17票
• 第2位 : ParticleMoji 13票
• 第3位 : 色彩 8票
• 第4位 : Audio Visualiser LCD 7票
• 第5位 : W杯日本頑張れ 6票

おめでとうございます!!

本日の課題

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

• p5.domで利用する機能は自由
  • GUI系 (テキスト入力、ボタン、スライダー …etc.)
  • カメラ
  • オーディオ (マイク入力が使えます!)
• 講義内で紹介していない機能も自由に使用してください
  • リファレンス: https://p5js.org/reference/#group-DOM
• 投稿したURLをアンケートから提出
• 投稿の際に sfc221111 のタグをつけてください!
• 締切: 2022年11月16日(水)まで!

アンケート

• 今回も、前回の提出作品の人気投票を行います!
• 前回のタグ sfc221104 でOpenProcessingで検索 (検索方法をSketches that are tagged にする必用あり)
• 一番良いと思った作品に1票投票 (自信があれば自分の作品でも可)