Tweet
Tweet

Slide 1

Slide 1 text

続・Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜 2022年10月23日 (日) HTML5 8th Anniversary @オンライン 豊田陽介（ ） @youtoy

Slide 2

Slide 2 text

自己紹介 豊田陽介（ ） @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP（2021/10 から） プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 （共著） 7月発売 （単著）

Slide 3

Slide 3 text

スライドは公開済みなので 発表中は文字などの記載を 追わなくても大丈夫です

Slide 4

Slide 4 text

今回の主な内容は

Slide 5

Slide 5 text

昨年の話の一部を深掘り＋α 昨年の話に出していた内容のキーワード 画像の機械学習 音の機械学習 VTuber的なこと 物理演算エンジン WebXR IoT系 ガジェット系 昨年の資料の URL

Slide 6

Slide 6 text

昨年の内容は 聞いてなくてもOKです

Slide 7

Slide 7 text

先日のイベントの内容と一部は重複 重複してない部分をいろいろ盛り込みつつ その時の資料

Slide 8

Slide 8 text

ライブデモ多めで 紹介していきます

Slide 9

Slide 9 text

本編へ

Slide 10

Slide 10 text

学習済み機械学習モデル を使った画像認識 ＋ 描画ライブラリ

Slide 11

Slide 11 text

いきなりですが デモをご覧ください

Slide 12

Slide 12 text

ライブデモ！ 機械学習による手の認識 ＋ パーティクルの描画

Slide 13

Slide 13 text

【動画】ブラウザで手・指の位置検出＋p5.jsによる描画 両手の指先に炎が 灯っていく

Slide 14

Slide 14 text

【動画】ブラウザで手・指の位置検出＋p5.jsによる描画 光学迷彩・透明マント のような表現 その2

Slide 15

Slide 15 text

「MediaPipe」のJavaScript版のHands MediaPipe Hands 画像から手のキーポイント の位置（複数）を認識 ※ 指を立てたかどうかの判定は 　 位置座標などから自前で計算

Slide 16

Slide 16 text

TensorFlow.jsベースのため ブラウザ上で動作

Slide 17

Slide 17 text

カメラ付きPCがあれば 手軽にデモを作れる／試せる

Slide 18

Slide 18 text

手軽に試せる JavaScript版の 公式デモも紹介

Slide 19

Slide 19 text

ここから試せます！ Hands

Slide 20

Slide 20 text

ライブで オプションの一部も 説明などしつつ

Slide 21

Slide 21 text

【ライブデモ】MediaPipe Hands https://mediapipe.dev/demo/hands

Slide 22

Slide 22 text

実際に試していきます https://google.github.io/mediapipe/getting_started/javascript

Slide 23

Slide 23 text

MediaPipe JavaScript版で扱えるもの 手を対象としたもの以外の一部を紹介 MediaPipe Face Mesh MediaPipe Holistic

Slide 24

Slide 24 text

ここから試せます！ https://google.github.io/mediapipe/getting_started/javascript Face Mesh Holistic

Slide 25

Slide 25 text

【ライブデモ】 https://mediapipe.dev/demo/face_mesh https://mediapipe.dev/demo/holistic

Slide 26

Slide 26 text

また先ほどのページへ https://google.github.io/mediapipe/getting_started/javascript

Slide 27

Slide 27 text

自分が作ったもののデモ！ MediaPipe Holistic による顔・上半身の認識

Slide 28

Slide 28 text

【動画】顔のキーポイント検出・姿勢推定とアニメーション 目・口・体の動きと ネコ画像が連動

Slide 29

Slide 29 text

描画周りも説明してみる

Slide 30

Slide 30 text

デモしたものの描画部分：p5.js メディアアート系などで有名な Processing の JavaScript版 ●home | p5.js 　https://p5js.org/

Slide 31

Slide 31 text

●p5.js Web Editor 　https://editor.p5js.org/ ●OpenProcessing 　https://openprocessing.org/ オンラインで開発 できる環境も

Slide 32

Slide 32 text

炎のような 見た目を作った部分

Slide 33

Slide 33 text

パーティクル・システムについて ゲーム物理、モーショングラフィックス、コンピュータ グラフィックなどで使われる技術のひとつで、たくさん の細かいスプライト画像、3Dモデル、またはその他のCG オブジェクトを使って、ある種の「ファジー」な現象を シミュレートするもの 出典： Wikipedia「パーティクル・システム」より

Slide 34

Slide 34 text

公式デモを ライブで試す

Slide 35

Slide 35 text

p5.js公式：パーティクル・システム https://p5js.org/examples/simulate-particle-system.htm

Slide 36

Slide 36 text

円が吹き出す仕組みに手を加えると... 透明度付き PNG画像に 置きかえ 煙が 吹き出す 色の 加算処理 （合成） 炎の ゆらめき？ 円が出てくる （基本のサンプル 　でよくある）

Slide 37

Slide 37 text

煙のほう

Slide 38

Slide 38 text

シンプルな図形のパーティクルを画像に アルファチャネル付 の PNG画像を利用

Slide 39

Slide 39 text

炎のような見た目

Slide 40

Slide 40 text

色の加算：単純な重ね合わせではない描画 p5.js の「blendMode()」 ADD SCREEN 重ねた色は明るくなる 重ねた色は明るくなるが ADD より少し弱め 単純な 重畳 ADD SCREEN ※ Canvas の「globalCompositeOperation」 　 という API による

Slide 41

Slide 41 text

炎の見た目単体を取り出すと マウスカーソルに追従させる仕組みでお試し

Slide 42

Slide 42 text

画像からの機械学習と 描画ライブラリは セットで活用しやすい

Slide 43

Slide 43 text

デバイスを 連携させる話へ

Slide 44

Slide 44 text

JavaScriptで外部デバイスとの通信 ブラウザ上で実行 Node.js 　・Web Serial 　・Web Bluetooth 　・Fetch API 　・axios等を利用 　・WebSocket API 　・MQTT.js等を利用 　・Node Serialport 　・noble・bleno 　・Fetch API 　・axios等を利用 　・ws等を利用 　・MQTT.js等を利用 シリアル通信 　 BLE 　 HTTPリクエスト 　 WebSocket 　 MQTT

Slide 45

Slide 45 text

有線・無線での通信

Slide 46

Slide 46 text

プロトタイピングに使った事例 （【コンセプト】遠隔にいるネコ同士が 　コミュニケーション）

Slide 47

Slide 47 text

ハッカソンで利用してみた事例の話 ネコのしっぽ っぽくした ジョイスティック （M5Stack ＋ 　　シリアル通信） ロボットトイ （toio ＋ BLE での通信） ネコのしっぽ をサーボモーター で動かす仕組み （micro:bit ＋ 　　シリアル通信）

Slide 48

Slide 48 text

2022年9月のハッカソンでチーム開発 シリアル通信と BLE をそれぞれ利用

Slide 49

Slide 49 text

システム構成（機器と通信方法） PC （Chromo） toio BLE HTML + JavaScript M5Stack Core2 ＋ ジョイスティック micro:bit ＋ サーボモーター シリアル 通信 シリアル 通信

Slide 50

Slide 50 text

ブラウザ（Chrome系）があれば デバイスをいっぺんに扱える

Slide 51

Slide 51 text

有線でのシリアル通信

Slide 52

Slide 52 text

シリアル通信（Web Serial API） 手っ取り早く試すなら

Slide 53

Slide 53 text

こちらのページが便利 https://googlechromelabs.github.io/serial-terminal/

Slide 54

Slide 54 text

Bluetoothによる無線通信

Slide 55

Slide 55 text

Web Bluetooth API での 3つの処理 ・Read、Write、Notification Read Write Notification センサーの値を任意の タイミングで読み取る LED・モーターなどの 制御情報を送る デバイスから通知される 値を読み取る 定期的な送信や状態変化 の際に送信される等 ●Web Bluetooth 　https://webbluetoothcg.github.io/web-bluetooth/ ●DataView - JavaScript | MDN　 https://developer.mozilla.org/ja /docs/Web/JavaScript/Referenc e/Global_Objects/DataView ●BufferSource - Web API | MDN 　 https://developer.mozilla.org/ja/docs/We b/API/BufferSource

Slide 56

Slide 56 text

Webの技術を使って ブラウザ上で様々な仕組みを 実装して楽しめます！

Slide 57

Slide 57 text

イベントの告知

Slide 58

Slide 58 text

「ガジェット」に興味がある方へ！ 「ガジェット・enebular」に興味がある方 へ！ https://enebular.connpass.com/event/250779/ 10/27（木） オンライン開催 enebular developersコラボのイベント

Slide 59

Slide 59 text

終わり！