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

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

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

you(@youtoy)

October 29, 2023
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

  1. 2023年10月29日 (日)
    HTML5 9th Anniversary @オンライン
    豊田陽介( )
    @youtoy
    ハッカソンでWebの技術を使った作品を作ってみた
    〜ブラウザで機械学習やデバイス制御など〜

    View full-size slide

  2. 自己紹介
    豊田陽介( )
    @youtoy
    ・IT系イベント主催、登壇や運営なども
    ・機械学習・IoTの書籍を出版
    ・子ども向けの活動いろいろ
    ・ Microsoft MVP(2021/10 から)
    プライベートでの活動
    ・ガジェット大好き
    ・ビジュアルプログラミング/JavaScript
     とガジェットの組み合わせをよくやって
     いたり、AI・機械学習系の内容も使って
     みていたり
    好きなこと、他

    View full-size slide

  3. 過去のイベントでは
    こんな話で登壇してました

    View full-size slide

  4. 一昨年と昨年の登壇タイトル
    7th Anniversary
    「Webの技術でできる様々なこと(機械学習・
     物理演算・デバイス連携など )」
    8th Anniversary
    「続・Webの技術でできる様々なこと
     〜ブラウザで機械学習やデバイス制御など〜」

    View full-size slide

  5. 【余談】AI・機械学習と
    Webの技術で試作した
    作品の一部を紹介

    View full-size slide

  6. 透明マント/光学迷彩的なエフェクト

    View full-size slide

  7. ボールを使ったジャグリングっぽいもの?

    View full-size slide

  8. 「作って楽しい」
    「やってみて面白い」
    という方向が多め

    View full-size slide

  9. 今回は石巻で行われた
    ハッカソンに参加した際に
    開発した作品の話

    View full-size slide

  10. 石巻ハッカソンについて
    ・2012年から毎年開催されて
     いる恒例のハッカソン
    ・各地から多くの参加者が集う
    ・アイデアピッチ・チーム作り
     から始まり、開発後には作品
     の展示を行う流れ

    View full-size slide

  11. 余談:海の幸が美味しい!

    View full-size slide

  12. 自分が参加したチームについてなど
    ・今年のテーマは「未来」
    ・「未来の屋台」を作るという
     コンセプトのチームに入って
     工作・開発
    ・手作り屋台とWebの技術を
     使った作品2つを展示

    View full-size slide

  13. Webの技術を使って
    作った作品のうちの1つ

    View full-size slide

  14. バーチャルなポップコーン作り

    View full-size slide

  15. 作品の体験の流れ
    ① テーブルの特定の
      箇所に触れる
    (カメラ映像で手が
      特定の位置にくる
      ようにする)
    ② PC画面に火が燃え
      さかる演出
      (BGMの再生開始)

    View full-size slide

  16. 作品の体験の流れ
    ③ フライパンを一定
      時間振り続ける
     (何かがはじける
      ような効果音も)
    ④ BGMがテンポアップ、
      その後、成功を知らせる
      効果音再生+紙吹雪演出

    View full-size slide

  17. 仕組みの話をざっくりと
    ① テーブルの特定の
      箇所に触れる
    (カメラ映像で手が
      特定の位置にくる
      ようにする)
    ② PC画面に火が燃え
      さかる演出
      (BGMの再生開始)
    AI・機械学習
    (画像認識)
    画像合成、
    音の制御

    View full-size slide

  18. 仕組みの話をざっくりと
    ③ フライパンを一定
      時間振り続ける
     (何かがはじける
      ような効果音も)
    ④ BGMがテンポアップ、
      その後、成功を知らせる
      効果音再生+紙吹雪演出
    BLEでデバイス制御、
    音の制御
    アニメーション
    描画、音の制御

    View full-size slide

  19. 使っている技術など(細かな部分)
    ・ブラウザでの処理
    ・描画の主な部分: 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均のフライパン

    View full-size slide

  20. 使っている
    Webの技術について
    一部をさらに補足

    View full-size slide

  21. AI・機械学習による画像認識(手の認識)
    ライブラリ「ml5.js」を利用
    手のキーポイントの
    位置(複数)を画像
    から検出

    View full-size slide

  22. p5.jsによる画像合成 ≠ 単純な重ね合わせ
    p5.js の「blendMode()」
    単純な
    重畳
    ADD
    SCREEN
    ※ Canvas の「globalCompositeOperation」
      という API による
    Adobe Photoshopなどにもある
    画像合成の仕組み

    View full-size slide

  23. エフェクト用動画をカメラ映像に合成

    View full-size slide

  24. Web Bluetooth API
    ・ただし、caniuse.com を見てみると対応ブラウザは限定的
    ・Bluetooth をブラウザから利用し、BLE対応デバイスとの間で
     情報の読み書きをする機能等を提供してくれるAPI

    View full-size slide

  25. ガジェットとPCとの間での通信
    デバイスで検出したシェイクイベントをBLEによりPCへ
    PC
    (Chrome)
    toio+フライパン
    HTML +
    JavaScript
    BLE
    Web Bluetooth API

    View full-size slide

  26. あと物理的な
    工作をした部分

    View full-size slide

  27. 力技でフライパンにデバイスを固定
    ダンボールとテープ
    でくるんだものを、
    紐でぐるぐる巻きに

    View full-size slide

  28. 展示で体験いただいた方の反応や
    作品を作ってみての感想

    View full-size slide

  29. 嬉しいくらいの驚き・笑顔などの反応をもらえた
    ・炎の演出の部分
    ・テーブルに触れたら火がつく!?
    ・フライパンを振るところ
    ・横から盛り上げる ⇒ 全力でフライパンを振る
      ⇒ フライパンを振る動作、音の演出などを
        楽しんでもらえた
    ・体験後のおまけも
    ・小分けにしたポップコーン(本物)をプレゼント

    View full-size slide

  30. Webの技術でできることは幅広い!
    今後も楽しく利用していきたい!

    View full-size slide

  31. 余談:Meta Quest 3でのWebXRが気になってる
    ・カラーパススルー機能:ゴーグルのカメラ映像を利用できる
    ・WebXRのサンプルで床や壁の検出などができるのは確認済み
    今月10/10の
    発売日にゲット

    View full-size slide

  32. 終わり!

    View full-size slide