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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

透明マント／光学迷彩的なエフェクト

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

余談：海の幸が美味しい！

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

終わり！