p5.jsでパーティクルやカラフルで動く描画を扱う（機械学習やデバイスとの連携も） / jsfes 2022 summer

Slide 1

Slide 1 text

p5.jsでパーティクルやカラフルで動く描画を扱う（機械学習やデバイスとの連携も） 2022年７月16日 (土) 夏のJavaScript祭り Online 2022 豊田陽介（） @youtoy

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

過去のJavaScript祭りのセッションにて【2019年6月】デバイスやアプリで楽しむIoT 【2021年7月】ブラウザでのデバイス連携や機械学習

Slide 4

Slide 4 text

今回の話題：描画ライブラリ「p5.js」関連など

Slide 5

Slide 5 text

Canvasでの2D・3D描画を便利にしてくれる

Slide 6

Slide 6 text

その中の「パーティクル・システム」

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

ブラウザ上で作るとこれくらい？ p5.js の公式サンプルの一例

Slide 9

Slide 9 text

ではなかった！透明度付き PNG画像を出現させる煙が吹き出す色の加算処理炎のゆらめき？

Slide 10

Slide 10 text

楽しくなってきた！

Slide 11

Slide 11 text

インタラクティブな感じにしたい

Slide 12

Slide 12 text

機械学習による画像認識を組み合わせた事例

Slide 13

Slide 13 text

デモ：画像認識＋パーティクル・システム

Slide 14

Slide 14 text

ブラウザ上で両手の画像認識 Googleさんが提供：　MediaPipe の JavaScript版（TensorFlow.jsベース）の　仕組みの 1つ Hands

Slide 15

Slide 15 text

描画関連でもう1つ

Slide 16

Slide 16 text

「万華鏡」のような描画

Slide 17

Slide 17 text

p5.jsの公式サンプル「Kaleidoscope」マウスを適当に動かすだけで、面白くて綺麗な描画がされる

Slide 18

Slide 18 text

あれこれ手を加えてみる

Slide 19

Slide 19 text

マウスの軌跡でモノクロの万華鏡的な描画

Slide 20

Slide 20 text

マウスの軌跡でモノクロの万華鏡的な描画 toio＋専用マットランダムに動く toio の軌跡色とりどり toio の周辺にプロジェクション

Slide 21

Slide 21 text

デモ：軌跡を使った描画のプロジェクション

Slide 22

Slide 22 text

LeapMotionを使った仕組みや BGMも追加して...

Slide 23

Slide 23 text

Sendai Micro Maker Faire 2022 に出展カメラ越しだと、色がとんでいるけれど...

Slide 24

Slide 24 text

最終版の構成的には PC （Chromo） toio＋専用マット BLE HTML + JavaScript BGM プロジェクション LeapMotion

Slide 25

Slide 25 text

最終版の構成的には PC （Chromo） toio＋専用マット BLE HTML + JavaScript BGM プロジェクション LeapMotion ■ 描画：・p5.js ■ toio の制御・p5.toio（通信は Web 　Bluetooth API） ■ LeapMotion ・WebSocket API ■ 音の再生・制御・howler.js 【ライブラリ・API】