ブラウザ上でリアルタイム画像認識と認識結果に連動した描画（MediaPipeとp5.js） / xTech ゆるっとLT (202109)

Slide 1

Slide 1 text

ブラウザ上でリアルタイム画像認識と認識結果に連動した描画（MediaPipeとp5.js） 2021年9月3日 (金) xTech ゆるっとLT: Fukuoka.php and AR_Fukuoka @オンライン　　豊田陽介 ( @youtoy )

Slide 2

Slide 2 text

豊田陽介（@youtoy）自己紹介普段は、某通信会社の研究所勤務自宅にたくさんビジュアルプログラミング、 IoT関連、その他の複数のコミュニティを主催ガジェット好きその他 IT系イベント主催、登壇や運営なども子ども向けの活動いろいろ（IT系以外も）プライベートでの活動

Slide 3

Slide 3 text

技術雑誌で連載中（機械学習関連）・Googleさんの Teachable Machine に関する記事 ⇒ 全4回のうち 2回目まで月刊I/O に掲載済

Slide 4

Slide 4 text

いきなり余談から

Slide 5

Slide 5 text

最近作ってみたものの1つビジュアルプログラミングを使って刀（ダイソーで 200円）を光らせる

Slide 6

Slide 6 text

イベント中にさくっと試作したもの Scratch 3.0 のビデオモーションセンサーを使って花火を打ち上げ

Slide 7

Slide 7 text

以前、雑にピクトグラムになってみたやつビジュアルプログラミングを使って（Scratch 3.0＋独自拡張「PoseNet2Scratch」）

Slide 8

Slide 8 text

ガジェットを使うものとかインタラクティブな作品が好き

Slide 9

Slide 9 text

面白そうと思うものに幅広く手を出してみたりする

Slide 10

Slide 10 text

ちょこちょこ動画をアップしていますここ 2ヶ月の間に作ってアップしたもの

Slide 11

Slide 11 text

ここ2ヶ月の動画に関連するキーワード p5.js、MediaPipe Holistic、Scratch 3.0、M5stamp Pico、MQTT、 micro:bit、MakeCode、Grove、LEDテープ、Alexa、toio、アルファチャンネル付動画、色画用紙の工作あそび・しかけ付カード、 Arduino MKR Wiﬁ 1010、MediaPipe Selﬁe Segmentation、 Handtrack.js、MediaPipe Pose、PoseNet2Scratch、Node-RED、はじめてゲームプログラミング、MediaPipe Hands、M5Stack、UIFlow

Slide 12

Slide 12 text

その中で頻出している「MediaPipe」 p5.js、MediaPipe Holistic、Scratch 3.0、M5stamp Pico、MQTT、 micro:bit、MakeCode、Grove、LEDテープ、Alexa、toio、アルファチャンネル付動画、色画用紙の工作あそび・しかけ付カード、 Arduino MKR Wiﬁ 1010、MediaPipe Selﬁe Segmentation、 Handtrack.js、MediaPipe Pose、PoseNet2Scratch、Node-RED、はじめてゲームプログラミング、MediaPipe Hands、M5Stack、UIFlow

Slide 13

Slide 13 text

今日の本題の1つ

Slide 14

Slide 14 text

「MediaPipe」とは？・Googleさんが提供している機械学習を使った仕組み・Python用やスマホ用、C++用などが提供されている・MediaPipe の JavaScript版（TensorFlow.jsベース）　・Face Mesh 　・Face Detection 　・Hands 　・Holistic 　・Pose 　・Selﬁe Segmentation 　　など...

Slide 15

Slide 15 text

認識できる対象の例（一部抜粋） Hands Face Mesh

Slide 16

Slide 16 text

認識できる対象の例（一部抜粋） Holistic Selﬁe Segmentation

Slide 17

Slide 17 text

自分がよく使う機械学習系の技術（Teachable Machine も好き）

Slide 18

Slide 18 text

JavaScript版はブラウザ上で動作

Slide 19

Slide 19 text

実現できることの例

Slide 20

Slide 20 text

人と背景とを分離（Selﬁe Segmentation）普通の PC内蔵カメラで撮った画像で人と背景を分離、その間に描画

Slide 21

Slide 21 text

背景分離の別パターン人と背景との間への描画

Slide 22

Slide 22 text

両手のキーポイントを認識（Hands）両手の位置と距離によって立方体の描画位置と大きさが変化

Slide 23

Slide 23 text

手のキーポイント認識の別パターン動画の中に動画＋指先の位置に...

Slide 24

Slide 24 text

手のキーポイント認識の別パターン2 指を曲げているか伸ばしているかによって画像表示を ON/OFF

Slide 25

Slide 25 text

顔・手・姿勢の認識（Holistic）目・口の動きと体の揺れをイラストに反映（ほぼ顔の認識しか...）

Slide 26

Slide 26 text

デモ動画に共通すること

Slide 27

Slide 27 text

認識の処理と一緒に使っているのは...

Slide 28

Slide 28 text

今日の本題のもう1つ描画（p5.js）

Slide 29

Slide 29 text

JavaScriptの描画ライブラリ「p5.js」メディアアート系などで有名な Processing の JavaScript版 ●home | p5.js 　https://p5js.org/

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

2Dだけでなく3Dも公式リファレンス

Slide 32

Slide 32 text

3D描画の例

Slide 33

Slide 33 text

余談2：ブラウザで動くので...

Slide 34

Slide 34 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 35

Slide 35 text

Slide 36

Slide 36 text

BLEと組み合わせると、例えば... カメラでとらえた人の動き（手の動き）とガジェットの動きを連動

Slide 37

Slide 37 text

ブラウザのデバイス系APIでの通信・ブラウザから BLE・シリアル通信で制御 ⇒ toio・M5Stack・micro:bit 等に対して使った例手の動きに連動した 6台の toio の同時制御 M5Stack Core2 へ文字送信・表示、画面の色変更 micro:bit の加速度（XYZ）のグラフ化

Slide 38

Slide 38 text

終わり！