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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. 楽しくなってきた!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. 描画関連でもう1つ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. 終わり!

    View Slide