Tweet
Tweet

Slide 1

Slide 1 text

p5.jsを使ったクリエイティブコーディングやJavaScriptによる 機械学習・デバイス制御などの処理と組み合わせる話 2022年10月19日 (水) PWA Night vol.44 @オンライン 豊田陽介（ ） @youtoy

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

クリエイティブコーディングで 作るものは、自分の場合は以下に 関するものが多いです 　・動きや変化がある 　・インタラクション 　・デバイス連携 　　※ 自分個人の好みにより

Slide 6

Slide 6 text

「クリエイティブコーディング」について クリエイティブ・コーディングとは、コンピュータ・ プログラミングの一種で、機能的なものではなく表現的な ものを作ることを目的としたものです。ライブ映像の制作や VJをはじめ、ビジュアルアートやデザイン、ゲームなどの エンターテインメント、アートインスタレーション、 プロジェクションマッピング、サウンドアート、広告、 プロダクトプロトタイプなどの制作に利用されています。 出典： Wikipedia「Creative coding」の冒頭部分を DeepL で機械翻訳 　　　https://en.wikipedia.org/wiki/Creative_coding

Slide 7

Slide 7 text

この後の話の方向性

Slide 8

Slide 8 text

p5.js を使ったクリエイティブ コーディングについては 既に話されていそうなので...

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

p5.jsを用いた表現を多様化させるための ブラウザで動く機械学習・デバイス制御の技術 〜 それらを使った事例集 〜 2022年10月19日 (水) PWA Night vol.44 @オンライン 豊田陽介（ ） @youtoy

Slide 11

Slide 11 text

できることの事例集と 利用した技術を多く紹介

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

いったん デモで用いた技術の話へ

Slide 17

Slide 17 text

ブラウザで動く 機械学習（手の認識）

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

取得した座標をそのまま使う、 座標間の位置関係や距離の計算など を行って活用

Slide 21

Slide 21 text

手の位置、指の位置、 折り曲げた／伸ばした等の状態、 手や指の位置関係などを活用できる

Slide 22

Slide 22 text

炎のような見た目の描画

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

その他にもたくさんの バリエーションが

Slide 27

Slide 27 text

動画：フィルターと組み合わせたグローエフェクト マウス操作連動 ＋パーティクル ＋色の合成 ＋フィルター

Slide 28

Slide 28 text

様々な見た目を作ったり、 画像エフェクト的な描画にも便利！

Slide 29

Slide 29 text

MediaPipe の 他のバリエーション

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

試してみた時の様子 （Holistic から）

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

仕組みに関する補足 ※ ネコの画像は画像 　 ジェネレーターの 　 サービスを活用 ネコ画像・カメラ画像 の描画：p5.js 顔認識や姿勢推定： MediaPipe Holistic

Slide 34

Slide 34 text

画像を用意して動かすところの元になったのは ←こちらの動作する様子と以下の情報より ・イラストはジェネレーターを使って用意 ・4パターンを組み合わせせる： 　「目を開いている/閉じている、口を 　　開けている/閉じている」 ・体を少し揺らすような動きを入れると 　良い感じに

Slide 35

Slide 35 text

MediaPipe Facemesh の機能追加を最速で 試してみた時のもの

Slide 36

Slide 36 text

【動画】顔のキーポイント検出（虹彩も）と描画 虹彩の位置も とれる顔認識

Slide 37

Slide 37 text

顔・目・口などの位置・動きや、 上半身・下半身・全身の動き・ ポーズなど様々利用できる！

Slide 38

Slide 38 text

MediaPipe以外でも： 「Handtrack.js」 ※ 手の開閉のイベントをとれる

Slide 39

Slide 39 text

【動画】物理演算エンジンにSVGフィルターも組み合わせた 手の開閉の認識 ＋物理演算エンジン ＋SVGフィルター （溶けるような見た目）

Slide 40

Slide 40 text

物理演算エンジン Matter.js （p5-matter というのもあるけど） SVGフィルターは feGaussianBlur と feColorMatrix

Slide 41

Slide 41 text

ブラウザで扱える仕組みを 様々組み合わせるのも楽しい！

Slide 42

Slide 42 text

MediaPipe のバリエーション の1つをサクッと紹介

Slide 43

Slide 43 text

【動画】人物と背景の分離：「MediaPipe Selfie Segmentation」 デバッグ用情報 （画面上部 3つ）と 処理結果を表示

Slide 44

Slide 44 text

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

Slide 45

Slide 45 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 46

Slide 46 text

この後に出てくるもの ブラウザ上で実行 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 47

Slide 47 text

デバイス間をMQTT （リアルタイム通信）でつなぐ

Slide 48

Slide 48 text

【動画】物理演算エンジンでの描画を画面間で 2台の iPad上の描画 を擬似的につなぐ

Slide 49

Slide 49 text

【動画】物理演算エンジンでの描画を画面間で スマホ間を擬似的に つなぎ、動的に位置 関係を変える

Slide 50

Slide 50 text

ローカルに MQTTブローカー （仲介役）をたてて、 MQTT.js でリアルタイム通信

Slide 51

Slide 51 text

複数デバイス（画面・ブラウザ） を連動させた作品を作れる！

Slide 52

Slide 52 text

有線の通信（シリアル通信） を扱う

Slide 53

Slide 53 text

【動画】micro:bitとのシリアル通信を利用 micro:bit ＋ LED テープと p5.js を 連動させる試作

Slide 54

Slide 54 text

【動画】M5Stack・micro:bitとのシリアル通信 ジョイスティック の操作と円の動き の連動 p5.js内の円の移動 処理と LEDテープ の点灯位置の連動

Slide 55

Slide 55 text

Chrome系で使える Web Serial API による実装

Slide 56

Slide 56 text

様々なデバイスが対応している シリアル通信で データの読み書きを活用できる！

Slide 57

Slide 57 text

センサーの値を読み取ったり、 モーター・LED などの制御を 実行したり（書き込み）

Slide 58

Slide 58 text

他の有線での通信： Web MIDI API ※ デバイスが限定されるけれど...

Slide 59

Slide 59 text

【動画】MIDI対応デバイスとp5.jsを連動させる MIDI対応の物理 コントローラーの ノブ・フェーダー の操作を利用

Slide 60

Slide 60 text

BLE通信を扱う

Slide 61

Slide 61 text

【動画】ロボットトイ（toio）6台をBluetoothで制御 片手の指の距離に 応じた toio の 同時制御のON/OFF （通信は PC→toio）

Slide 62

Slide 62 text

【動画】toioの動き（位置座標）を取得して描画 toio専用マットで取得可能 な位置座標を入力に利用 ⇒ 入力を元にした万華鏡の 　 ような描画 （通信は toio→PC）

Slide 63

Slide 63 text

Chrome系で使える Web Bluetooth API による実装

Slide 64

Slide 64 text

BLE での読み書き・通知 （Read・Write・Notify） の双方向通信が一通り扱える！

Slide 65

Slide 65 text

能動的な処理 （センサー・モーター・LED などを扱うもの） 受動的な処理 （デバイス側からの値の変化に応じた通知） の両方を活用できる

Slide 66

Slide 66 text

他の事例も掲載してみる （今回のトピック外のもの）

Slide 67

Slide 67 text

物理工作 ＋ p5.js

Slide 68

Slide 68 text

【動画】擬似ホログラム（ペッパーズ・ゴースト） ダイソーの透明な 下敷きを切り貼り、 擬似ホログラム用の 表示を iPad で

Slide 69

Slide 69 text

WebAR ＋ p5.js

Slide 70

Slide 70 text

【動画】WebARでのマーカー利用のARと組み合わせる ARマーカーに描画を 重畳、マーカーの向きの 変化と描画を連動させる （p5.js ＋ TweenJS 　　＋ A-Frame ＋ AR.js ）

Slide 71

Slide 71 text

Leap Motion ＋ p5.js

Slide 72

Slide 72 text

【動画】Leap Motionによる両手のセンシング 空中での両手や指 の位置を認識 （JavaScriptライブラリを使う 　or WebSocket を利用）

Slide 73

Slide 73 text

p5.jsの3D描画を扱う

Slide 74

Slide 74 text

【動画】3D描画とフィルター／ノイズの組み合わせ p5.js の標準機能のみ

Slide 75

Slide 75 text

ブラウザ上でのJavascriptの 処理だけでも様々な表現を！

Slide 76

Slide 76 text

p5.jsを含まない作品も 1つ紹介してみる （機械学習＋BLE）

Slide 77

Slide 77 text

Teachable Machine ＋ バニラなJavaScript ＋ Web Bluetooth API

Slide 78

Slide 78 text

【動画】鳴らした音によって異なる動きをするtoio 機械学習モデルを自分で ブラウザ上で作成、音の 識別もブラウザ上で

Slide 79

Slide 79 text

この仕組みは展示イベント （メーカーフェア＠つくば・ 東京）でも活用

Slide 80

Slide 80 text

自分の作品を展示イベントで体験してもらった事例 大人のみならず、小さなお子さんにも楽しんでもらえた

Slide 81

Slide 81 text

PCとブラウザがあれば 手軽にできる クリエイティブコーディング

Slide 82

Slide 82 text

まずはちょっと試してみる というところからでも気軽に！

Slide 83

Slide 83 text

イベントなどの告知

Slide 84

Slide 84 text

Web周りの技術、ガジェットが関連 https://html5.connpass.com/event/261876/ 10/23（日） オンライン開催 https://enebular.connpass.com/event/250779/ 10/27（木） オンライン開催

Slide 85

Slide 85 text

終わり！