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

映像資料

スライド資料

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

投稿作品とランキング

投稿作品

人気ランキングTOP5

• 1位 : 球 16票
• 2位 : 君のストレスを消す 12票
• 3位 : 蝶と四角と丸 9票
• 3位 : 使えないGoogle 9票
• 5位 : ビンタくん 8票

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

本日の課題

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

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

アンケート

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