Javascriptで試作した様々な仕組みの話（機械学習・物理・画像や音など） / Saitama.js vol.0

by you（@youtoy）

Slide 1

Slide 1 text

Javascriptで試作した様々な仕組みの話（機械学習・物理・画像や音など） 2021年10月14日 (木) Saitama.js vol.0 @オンライン　　豊田陽介 ( @youtoy )

Slide 2

Slide 2 text

豊田陽介（@youtoy）自己紹介普段は、某通信会社勤務 Microsoft MVP （2021年10月より）ガジェット好きその他 IT系イベント主催、運営や登壇なども子ども向けの活動いろいろ（IT系以外も）プライベートでの活動ビジュアルプログラミング・ IoTに関するコミュニティなど

Slide 3

Slide 3 text

今日の話題

Slide 4

Slide 4 text

JavaScript を使いブラウザ上でこれらを扱う

Slide 5

Slide 5 text

JavaScript 画像の機械学習音の機械学習 VTuber的なこと物理演算エンジン WebAR IoT系ガジェット系

Slide 6

Slide 6 text

ここから、技術の話と実例と

Slide 7

Slide 7 text

【技術の部分の話1】人を対象にした画像認識系

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

【技術の部分の話2】 2D・3D描画

Slide 12

Slide 12 text

p5.js メディアアート系などで有名な Processing の JavaScript版 ●home | p5.js 　https://p5js.org/

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

MediaPipe ＋ p5.js = ?

Slide 15

Slide 15 text

ブラウザ上の処理でVTuber的なこと MediaPipe Holistic（人の顔や姿勢の認識）＋ p5.js（画像表示系の処理）

Slide 16

Slide 16 text

ブラウザ上で両手の認識と3D描画 MediaPipe Hands（両手の認識）＋ p5.js（WebGLベースの3D描画）

Slide 17

Slide 17 text

ブラウザ上での人物と背景の分離＋描画 MediaPipe Selﬁe Segmentation （人物と背景の分離）＋ p5.js（2D・3D描画）

Slide 18

Slide 18 text

MediaPipe の最近のアップデート

Slide 19

Slide 19 text

ブラウザ上で虹彩の位置まで検出できる！ MediaPipe Face Mesh （人の顔の検出）＋ p5.js（2D描画）

Slide 20

Slide 20 text

【技術の部分の話3】音の機械学習モデル作成＋推論

Slide 21

Slide 21 text

Teachable Machine（画像・音声・ポーズ） Googleさんがオンラインで提供している仕組み ⇒ ブラウザ上の操作で学習ができて推論のお試しも

Slide 22

Slide 22 text

【技術の部分の話4】 Bluetooth通信（BLE）

Slide 23

Slide 23 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 24

Slide 24 text

Slide 25

Slide 25 text

デバイス系のAPIについてはこんな話も ●Appleがプライバシ上の理由から、NFC、Bluetooth、他14のWeb APIの実装を拒否　https://www.infoq.com/jp/news/2020/07/apple-ﬁngerprinting-privacy/ ●Mozilla Speciﬁcation Positions 　https://mozilla.github.io/standards-positions/ 自分に閉じて使うパターンではない場合、特に注意！（ユーザが許可する操作なしに利用できないもの　ではあるものの...）

Slide 26

Slide 26 text

Teachable Machine ＋ Web Bluetooth API = ?

Slide 27

Slide 27 text

ブラウザで音の認識とBluetooth通信 Teachable Machine（音を対象）＋ Web Bluetooth API

Slide 28

Slide 28 text

共同主催しているコミュニティで出展して終了後モノ作り系イベント（Maker Faire Tokyo 2020）で展示体験：子どもも大人も

Slide 29

Slide 29 text

実例メイン

Slide 30

Slide 30 text

【技術の部分の話5】リアルタイム通信（MQTT）

Slide 31

Slide 31 text

Slide 32

Slide 32 text

MQTT ＋ p5.js = ?

Slide 33

Slide 33 text

2台のスマホの描画連動

Slide 34

Slide 34 text

物理演算エンジン＋画像認識＋ p5.js = ?

Slide 35

Slide 35 text

物理演算エンジンエンジン＋手の認識

Slide 36

Slide 36 text

ARマーカー認識＋ p5.js = ?

Slide 37

Slide 37 text

ARマーカー認識＋2D描画

Slide 38

Slide 38 text

イベントの話 x 2 （connpass に掲載）

Slide 39

Slide 39 text

ビジュアルプログラミング x IoT 再来週 10/28（木）20:00 から（視聴は YouTube にて）

Slide 40

Slide 40 text

ビジュアルプログラミング全般 3週間後、 11/2（火）19:30 から（視聴は YouTube にて）

Slide 41

Slide 41 text

終わり！