Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
続・Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 8th Anniversary
you(@youtoy)
October 23, 2022
Technology
2
140
続・Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 8th Anniversary
you(@youtoy)
October 23, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
モバイルモーションキャプチャーデバイス「mocopi」を軽く試してみた / IoTLT vol.95 (新年会IoTLTラジオ)
you
0
100
IoTを始めたきっかけの話と個人でできるIoTの今後 / 新年LT会「私の愛するIoT 2023」
you
0
250
UIFlowの2.0がやってきた! / ビジュアルプログラミングIoTLT vol.13
you
0
270
2022年のメーカーフェアに出展した作品を振り返ってみる / スイッチサイエンス Maker Awards 2022授賞式&LT大会
you
0
66
p5.jsを使ったクリエイティブコーディングに機械学習やデバイス連携などを組み合わせている話 / Creative Coding作品の周辺を語る会 03
you
0
81
個人で手軽にブラウザやビジュアルプログラミングでIoT /【イマドキのIoTを支える技術】/ TechFeed Experts Night#10
you
2
58
ブラウザ上での機械学習と描画処理でインタラクティブな「透明マント・光学迷彩」 / HL2022「MAID」部門最終選考会
you
1
40
第2回ナブかつLABキャリアトーク / 豊田陽介
you
0
12
個人的に使いやすいと思う/好きなガジェットをいくつか紹介してみる / トヨタ ガジェット研究所
you
1
92
Other Decks in Technology
See All in Technology
インフラ技術基礎勉強会 開催概要
toru_kubota
0
180
UEでPLATEAU触ってみた
41h0_shiho
0
230
「一通りできるようになった」その先の話
hitomi___kt
0
140
OpenShiftのリリースノートを整理してみた
loftkun
2
440
re:Inventの完全招待制イベント Building a Roadmap to SaaSについて / Building a Roadmap to SaaS an invitation only event at reinvent
yayoi_dd
0
150
AWS Cloud Forensics & Incident Response
e11i0t_4lders0n
0
410
Google Cloud Workflows: API automation, patterns and best practices
glaforge
0
100
USB PD で迎える AC アダプター大統一時代
puhitaku
2
2k
Dockerに疲れた人のためのLXDではじめるシステムコンテナ入門
devops_vtj
0
120
ECテックカンファレンス2023 EC事業部のモバイル開発2023
tatsumi0000
0
340
230125 モニターマウントLT ITガジェット翁(Ryu.Cyber)さん
comucal
PRO
0
4.8k
OCI技術資料 : ロード・バランサー 詳細 / Load Balancer 200
ocise
2
7.2k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
KATA
mclloyd
12
9.7k
Infographics Made Easy
chrislema
235
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
22
1.7k
What's in a price? How to price your products and services
michaelherold
233
9.7k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
840
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
Gamification - CAS2011
davidbonilla
75
4.1k
The Art of Programming - Codeland 2020
erikaheidi
36
11k
What the flash - Photography Introduction
edds
64
10k
Transcript
続・Webの技術でできる様々なこと 〜ブラウザで機械学習やデバイス制御など〜 2022年10月23日 (日) HTML5 8th Anniversary @オンライン 豊田陽介( )
@youtoy
自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10 から)
プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 (共著) 7月発売 (単著)
スライドは公開済みなので 発表中は文字などの記載を 追わなくても大丈夫です
今回の主な内容は
昨年の話の一部を深掘り+α 昨年の話に出していた内容のキーワード 画像の機械学習 音の機械学習 VTuber的なこと 物理演算エンジン WebXR IoT系 ガジェット系 昨年の資料の
URL
昨年の内容は 聞いてなくてもOKです
先日のイベントの内容と一部は重複 重複してない部分をいろいろ盛り込みつつ その時の資料
ライブデモ多めで 紹介していきます
本編へ
学習済み機械学習モデル を使った画像認識 + 描画ライブラリ
いきなりですが デモをご覧ください
ライブデモ! 機械学習による手の認識 + パーティクルの描画
【動画】ブラウザで手・指の位置検出+p5.jsによる描画 両手の指先に炎が 灯っていく
【動画】ブラウザで手・指の位置検出+p5.jsによる描画 光学迷彩・透明マント のような表現 その2
「MediaPipe」のJavaScript版のHands MediaPipe Hands 画像から手のキーポイント の位置(複数)を認識 ※ 指を立てたかどうかの判定は 位置座標などから自前で計算
TensorFlow.jsベースのため ブラウザ上で動作
カメラ付きPCがあれば 手軽にデモを作れる/試せる
手軽に試せる JavaScript版の 公式デモも紹介
ここから試せます! Hands
ライブで オプションの一部も 説明などしつつ
【ライブデモ】MediaPipe Hands https://mediapipe.dev/demo/hands
実際に試していきます https://google.github.io/mediapipe/getting_started/javascript
MediaPipe JavaScript版で扱えるもの 手を対象としたもの以外の一部を紹介 MediaPipe Face Mesh MediaPipe Holistic
ここから試せます! https://google.github.io/mediapipe/getting_started/javascript Face Mesh Holistic
【ライブデモ】 https://mediapipe.dev/demo/face_mesh https://mediapipe.dev/demo/holistic
また先ほどのページへ https://google.github.io/mediapipe/getting_started/javascript
自分が作ったもののデモ! MediaPipe Holistic による顔・上半身の認識
【動画】顔のキーポイント検出・姿勢推定とアニメーション 目・口・体の動きと ネコ画像が連動
描画周りも説明してみる
デモしたものの描画部分:p5.js メディアアート系などで有名な Processing の JavaScript版 •home | p5.js https://p5js.org/
•p5.js Web Editor https://editor.p5js.org/ •OpenProcessing https://openprocessing.org/ オンラインで開発 できる環境も
炎のような 見た目を作った部分
パーティクル・システムについて ゲーム物理、モーショングラフィックス、コンピュータ グラフィックなどで使われる技術のひとつで、たくさん の細かいスプライト画像、3Dモデル、またはその他のCG オブジェクトを使って、ある種の「ファジー」な現象を シミュレートするもの 出典: Wikipedia「パーティクル・システム」より
公式デモを ライブで試す
p5.js公式:パーティクル・システム https://p5js.org/examples/simulate-particle-system.htm
円が吹き出す仕組みに手を加えると... 透明度付き PNG画像に 置きかえ 煙が 吹き出す 色の 加算処理 (合成) 炎の
ゆらめき? 円が出てくる (基本のサンプル でよくある)
煙のほう
シンプルな図形のパーティクルを画像に アルファチャネル付 の PNG画像を利用
炎のような見た目
色の加算:単純な重ね合わせではない描画 p5.js の「blendMode()」 ADD SCREEN 重ねた色は明るくなる 重ねた色は明るくなるが ADD より少し弱め 単純な
重畳 ADD SCREEN ※ Canvas の「globalCompositeOperation」 という API による
炎の見た目単体を取り出すと マウスカーソルに追従させる仕組みでお試し
画像からの機械学習と 描画ライブラリは セットで活用しやすい
デバイスを 連携させる話へ
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
有線・無線での通信
プロトタイピングに使った事例 (【コンセプト】遠隔にいるネコ同士が コミュニケーション)
ハッカソンで利用してみた事例の話 ネコのしっぽ っぽくした ジョイスティック (M5Stack + シリアル通信) ロボットトイ (toio +
BLE での通信) ネコのしっぽ をサーボモーター で動かす仕組み (micro:bit + シリアル通信)
2022年9月のハッカソンでチーム開発 シリアル通信と BLE をそれぞれ利用
システム構成(機器と通信方法) PC (Chromo) toio BLE HTML + JavaScript M5Stack Core2
+ ジョイスティック micro:bit + サーボモーター シリアル 通信 シリアル 通信
ブラウザ(Chrome系)があれば デバイスをいっぺんに扱える
有線でのシリアル通信
シリアル通信(Web Serial API) 手っ取り早く試すなら
こちらのページが便利 https://googlechromelabs.github.io/serial-terminal/
Bluetoothによる無線通信
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
Webの技術を使って ブラウザ上で様々な仕組みを 実装して楽しめます!
イベントの告知
「ガジェット」に興味がある方へ! 「ガジェット・enebular」に興味がある方 へ! https://enebular.connpass.com/event/250779/ 10/27(木) オンライン開催 enebular developersコラボのイベント
終わり!