Skip to content
Menu
Fujimura Seminar
  • Otsuma University >
  • Social Information Studies >
  • Information Design >
  • This Site >
  • About >
Fujimura Seminar

p5.jsとthree.jsによる音声に反応する3D再帰木

Posted on 2015-06-062019-04-09

HTML5では、PCのマイクやカメラから音声や映像を取得するMedia Streamと呼ぶインタフェースが提供されています。この機能はIE11やSafariでは、まだ実装されておらず、ChromeとFirefoxのみのサポートですが、今回、この機能を活用して、先週投稿したthree.jsによる3D再帰木を、マイクから拾った音声に応じて動くようにしてみました。以下の画像をクリックすると、ブラウザがマイクを使用してよいか尋ねるダイアログボックスが表示されますので、それをONにしてみて下さい。3D木が表示され音声に応じて動きます。YouTubeなどで音楽を流すと踊ります。
soundresponsivetree1
今回、p5.jsというライブラリを使ってMedia Stream APIを利用しました。p5.jsは、Processingに近いコーディングスタイルでアニメーションやメディア操作が容易に記述できるJavaScriptのライブラリで、昨年秋頃から大注目されています。p5.jsを使うと、Media Streaming APIが簡単に利用できるだけでなく、様々な他のJavaScriptライブラリとの連携も容易です。今回、3DモデルをWeb上で表示するthree.jsと組み合わせて実装しました。p5.jsのサウンドライブラリは、ボリュームだけでなくFFTによるスペクトル分析もできます。このサンプルでは、高音だと縦長の形状となり、ボリュームに応じて大きな木になるようにしてみました。詳細はソースコードをご覧ください。
追記2016-05-10:Chrome が2016年1月のアップデート以降、httpsのサイト以外ではマイクの使用ができなくなりました。Firefoxも最近のアップデートで使用できなくなりました。qa.fujimura.comがhttps化されるまでの間はMicrosoft Edgeを使用ください。
追記2017-01-23:qa.fujimura.comの上記サイトをhttps化して、動くようにしました。

追記2019-04-09:リンク先をgithub Pagesに変更しました。

最近の投稿

  • 2023年度 卒業研究発表会
  • ブロックチェーンによるWebアクセスの認証
  • 電子情報通信学会LOIS若手研究者賞を受賞
  • 2022年度 卒業研究発表会
  • Maker Faire Tokyo 2022に出展しました

最近のコメント

    アーカイブ

    • 2024年9月
    • 2024年1月
    • 2023年8月
    • 2023年6月
    • 2022年12月
    • 2022年5月
    • 2021年10月
    • 2021年6月
    • 2019年5月
    • 2019年4月
    • 2018年10月
    • 2018年4月
    • 2016年10月
    • 2015年10月
    • 2015年6月
    • 2015年5月
    • 2015年3月
    • 2015年2月
    • 2014年11月
    • 2014年10月
    • 2014年5月
    • 2013年11月
    • 2013年7月
    • 2013年6月
    • 2013年3月
    • 2013年2月

    カテゴリー

    • AI
    • art
    • data mining
    • event
    • JavaScript
    • media art
    • NFT
    • programming
    • visualization
    • web
    • wordpress
    • 未分類

    メタ情報

    • ログイン
    • 投稿フィード
    • コメントフィード
    • WordPress.org
    ©2025 Fujimura Seminar | WordPress Theme by Superb WordPress Themes