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でパーティクルやカラフルで動く描画を扱う(機械学習やデバイスとの連携も) / jsfes 2022 summer
Search
you(@youtoy)
PRO
July 16, 2022
Technology
0
330
p5.jsでパーティクルやカラフルで動く描画を扱う(機械学習やデバイスとの連携も) / jsfes 2022 summer
you(@youtoy)
PRO
July 16, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
120
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
1.6k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
160
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.4k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
2
2.1k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
53
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.3k
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / #ヒーローズリーグ 2023 予選 in 第二部
you
PRO
0
95
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you
PRO
0
110
Other Decks in Technology
See All in Technology
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
300
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
VS CodeでAWSを操作しよう
smt7174
8
1.7k
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
480
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
520
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
320
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.2k
Building Dashboards as a Hobby
egmc
0
220
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
220
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
250
Featured
See All Featured
Making Projects Easy
brettharned
108
5.5k
Teambox: Starting and Learning
jrom
128
8.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
A better future with KSS
kneath
231
16k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
A designer walks into a library…
pauljervisheath
200
23k
4 Signs Your Business is Dying
shpigford
175
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Faster Mobile Websites
deanohume
299
30k
YesSQL, Process and Tooling at Scale
rocio
164
13k
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】
ブラウザ上の描画処理を 他と組み合わせるのも楽しい!
終わり!