yoppa.org


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日(木)まで!

課題提出フォーム


openFrameworks 3Dグラフィクスの基本

この講義では、ここまで主に2次元平面上での描画による表現を扱ってきました。今回は2次元での表現からさらに(文字通り)次元を越えて、3次元空間での表現について考えていきたいと思います。

openFrameworksで3Dグラフィクスを扱う手法はこれまでとさほど変化はありません。なぜなら、openFrameworksの描画の基本はOpenGLで行っています。OpenGLはそもそも3次元のグラフィクスの描画のために開発されたライブラリであり、最初から3次元空間をとり扱うための様々な機能が備わっています。

しかし、3Dの物体を扱うには、これまでとは違った様々な要素が加わります。カメラ(視点)、ライティング、光と影(シェーディング)、奥行の重なりなどといった2次元の平面には無かった様々な技術や概念の理解が必要となります。

今回は、立方体 (ofBoxPrimitive) と球体 (ofSpherePrimitive) という3Dの基本図形の描画を通して、3Dグラフィクスの基本を学んでいきます。

スライド資料、サンプルプログラム

アンケート

本日の授業に出席した方は、以下のアンケートに回答してください。