yoppa.org


SFC – デザインとプログラミング 2022

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

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

映像資料

https://youtube.com/watch?v=JJGd-THY-NY%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.)
    • カメラ
    • オーディオ (マイク入力が使えます!)
  • 講義内で紹介していない機能も自由に使用してください
  • 投稿したURLをアンケートから提出
  • 投稿の際に sfc221111 のタグをつけてください!
  • 締切: 2022年11月16日(水)まで!

アンケート

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