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

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

you（@youtoy）
July 16, 2022
Technology
0
100

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

you（@youtoy）

July 16, 2022
Tweet

More Decks by you（@youtoy）

See All by you（@youtoy）
UIFlowのtoio用ブロックを使ってみた / ビジュアルプログラミングIoTLT vol.12
you
0
120
ブラウザ上でファンタジー・SF的な映像表現に挑んでみる / エンジニアの自由研究発表会vol.7
you
0
150
M5Station-BATを軽く試してみた / IoTLT vol.90
you
0
240
手軽に通知を送ることができる「ntfy.sh」 / IoTLT vol.89
you
0
2.8k
公式版Scratchやtoio DoでIoT（ブラウザ上でのJavaScript実行で） / ビジュアルプログラミングIoTLT vol.11
you
0
330
enebularクラウド実行環境でIoT / enebular developer meetup 20220602
you
0
120
LINEアプリでIoTやってみた / エンジニアの自由研究発表会vol.6
you
0
100
ビジュアルプログラミングのみで作る LINE ＋ IoT の仕組み / LINE DC Monthly LT #1
you
0
240
enebularの新機能「クラウド実行環境」を自分も使ってみた（LINE との組み合わせ）/ IoTLT vol.86
you
0
250

Other Decks in Technology

See All in Technology
Learn How to PowerShell Like a Pro
guyrleech
0
120
押しつけアジャイルは「ダメ。ゼッタイ。」
kitamu_mu
0
120
PBR in three.js
yomotsu
1
100
一休. com/Yahoo!トラベルのNuxt3移行における開発プロセス
sugitat
4
3.6k
KPTに慣れたチームがよりよい振り返りを行うために、K/P/Tのそれぞれにフォーカスをあてた考察
m3hiro3
11
3.1k
Google Espresso解説(2017年)
__kaname__
1
850
[PHP Conference Japan 2022] スケールアウト可能なマネージドデータベースサービスTiDB Cloudのご紹介
pingcap0315
0
180
pod-security-admission-k8s-policy
mochizuki875
0
140
ふりかえりでふりかえることしかできなかったジュニアチームが、次の打ち手を出せるチームになるのにやったこと
kumagoro95
1
220
【Notion ✕ PM Club】少数精鋭のスタートアップ開発組織におけるNotion活用事例 ～プロダクトバックログからスプリントに至るまで～
saik1010
1
400
Ideas for introducing new methods
teyamagu
0
390
あぁ…我らのECS…
sardineta23
1
140

Featured

See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.5k
Producing Creativity
orderedlist
PRO
334
37k
Web development in the modern age
philhawksworth
197
9.4k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
Navigating Team Friction
lara
175
11k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.6k
Building Flexible Design Systems
yeseniaperezcruz
311
34k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
980
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
8
1.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
18k
The Invisible Side of Design
smashingmag
291
48k
Designing with Data
zakiwarfel
91
4k

Transcript

  1. p5.jsでパーティクルやカラフルで動く描画を 扱う（機械学習やデバイスとの連携も） 2022年７月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. 終わり！