Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

you(@youtoy)

July 16, 2022
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

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

  2. 自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10 から)

    プライベートでの活動 ・ガジェット大好き ・今年、本を2冊出しました 好きなこと・近況 3月発売 (共著) 今月25日 発売(単著)
  3. 過去のJavaScript祭りのセッションにて 【2019年6月】 デバイスやアプリで楽しむIoT 【2021年7月】 ブラウザでのデバイス連携や機械学習

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

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

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

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

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

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

  10. 楽しくなってきた!

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

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

  13. デモ:画像認識+パーティクル・システム

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

  15. 描画関連でもう1つ

  16. 「万華鏡」のような描画

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

  18. あれこれ 手を加えてみる

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

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

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

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

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

  24. 最終版の構成的には PC (Chromo) toio+専用マット BLE HTML + JavaScript BGM プロジェ

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

    クション LeapMotion ▪ 描画: ・p5.js ▪ toio の制御 ・p5.toio(通信は Web  Bluetooth API) ▪ LeapMotion ・WebSocket API ▪ 音の再生・制御 ・howler.js 【ライブラリ・API】
  26. ブラウザ上の描画処理を 他と組み合わせるのも楽しい!

  27. 終わり!