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

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

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

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

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

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

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

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

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

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

楽しくなってきた！

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

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

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

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

描画関連でもう1つ

「万華鏡」のような描画

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

あれこれ手を加えてみる

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

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

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

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

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

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

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

ブラウザ上の描画処理を他と組み合わせるのも楽しい！

終わり！

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