Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
p5.jsでパーティクルやカラフルで動く描画を扱う(機械学習やデバイスとの連携も) / jsf...
Search
you(@youtoy)
PRO
July 16, 2022
Technology
0
380
p5.jsでパーティクルやカラフルで動く描画を扱う(機械学習やデバイスとの連携も) / jsfes 2022 summer
you(@youtoy)
PRO
July 16, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
57
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
180
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
110
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
100
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
51
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
55
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
240
Other Decks in Technology
See All in Technology
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
380
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
4
280
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
1k
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
110
Lazy application authentication with Tailscale
bluehatbrit
0
120
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
110
Geminiとv0による高速プロトタイピング
shinya337
0
200
OPENLOGI Company Profile
hr01
0
67k
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.4k
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
350
How Community Opened Global Doors
hiroramos4
PRO
1
130
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.2k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building an army of robots
kneath
306
45k
We Have a Design System, Now What?
morganepeng
53
7.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Code Review Best Practice
trishagee
69
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Embracing the Ebb and Flow
colly
86
4.7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Code Reviewing Like a Champion
maltzj
524
40k
How to Ace a Technical Interview
jacobian
277
23k
Writing Fast Ruby
sferik
628
62k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Transcript
p5.jsでパーティクルやカラフルで動く描画を 扱う(機械学習やデバイスとの連携も) 2022年7月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】
ブラウザ上の描画処理を 他と組み合わせるのも楽しい!
終わり!