p5.jsでパーティクルやカラフルで動く描画を扱う(機械学習やデバイスとの連携も)2022年7月16日 (土)夏のJavaScript祭り Online 2022豊田陽介( )@youtoy
View Slide
自己紹介豊田陽介( )@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+専用マットBLEHTML +JavaScriptBGMプロジェクションLeapMotion
最終版の構成的にはPC(Chromo)toio+専用マットBLEHTML +JavaScriptBGMプロジェクションLeapMotion■ 描画:・p5.js■ toio の制御・p5.toio(通信は Web Bluetooth API)■ LeapMotion・WebSocket API■ 音の再生・制御・howler.js【ライブラリ・API】
ブラウザ上の描画処理を他と組み合わせるのも楽しい!
終わり!