Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 /...

ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary

you(@youtoy)

October 29, 2023
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

  1. 自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・機械学習・IoTの書籍を出版 ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10

    から) プライベートでの活動 ・ガジェット大好き ・ビジュアルプログラミング/JavaScript  とガジェットの組み合わせをよくやって  いたり、AI・機械学習系の内容も使って  みていたり 好きなこと、他
  2. 仕組みの話をざっくりと ① テーブルの特定の   箇所に触れる (カメラ映像で手が   特定の位置にくる   ようにする)

    ② PC画面に火が燃え   さかる演出   (BGMの再生開始) AI・機械学習 (画像認識) 画像合成、 音の制御
  3. 仕組みの話をざっくりと ③ フライパンを一定   時間振り続ける  (何かがはじける   ような効果音も) ④ BGMがテンポアップ、  

    その後、成功を知らせる   効果音再生+紙吹雪演出 BLEでデバイス制御、 音の制御 アニメーション 描画、音の制御
  4. 使っている技術など(細かな部分) ・ブラウザでの処理 ・描画の主な部分: p5.js(Canvas API) ・締めの演出の描画:Canvas Confetti(Canvas API) ・音の制御: p5.sound(Web

    Audio API) ・AI・機械学習: ml5.js(TensorFlow.jsベース) ・BLEでデバイス制御: p5.toio(Web Bluetooth API) ・物理の部分 ・デバイス: toio ・他: 100均のフライパン
  5. p5.jsによる画像合成 ≠ 単純な重ね合わせ p5.js の「blendMode()」 単純な 重畳 ADD SCREEN ※

    Canvas の「globalCompositeOperation」   という API による Adobe Photoshopなどにもある 画像合成の仕組み