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
360
p5.jsでパーティクルやカラフルで動く描画を扱う(機械学習やデバイスとの連携も) / jsfes 2022 summer
you(@youtoy)
PRO
July 16, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
35
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
84
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
180
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.5k
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
97
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
610
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
2.4k
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
5k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
1
2.7k
Other Decks in Technology
See All in Technology
実は強い 非ViTな画像認識モデル
tattaka
2
1.2k
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
640
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
580
【Findy】「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly by findy
i35_267
5
880
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
200
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.1k
Active Directory攻防
cryptopeg
PRO
8
5.5k
What's new in Go 1.24?
ciarana
1
110
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
200
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
120
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
BBQ
matthewcrist
87
9.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
How STYLIGHT went responsive
nonsquared
98
5.4k
Visualization
eitanlees
146
15k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
RailsConf 2023
tenderlove
29
1k
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】
ブラウザ上の描画処理を 他と組み合わせるのも楽しい!
終わり!