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を使ったクリエイティブコーディングやJavaScriptによる機械学習・デバイス制御...
Search
you(@youtoy)
PRO
October 19, 2022
Technology
2
840
p5.jsを使ったクリエイティブコーディングやJavaScriptによる機械学習・デバイス制御などの処理と組み合わせる話 / PWA Night vol.44
you(@youtoy)
PRO
October 19, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
15
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
6
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
120
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.7k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
140
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
2.5k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
170
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
310
Other Decks in Technology
See All in Technology
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
160
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
Modern Linux
oracle4engineer
PRO
0
160
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
460
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
590
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
280
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
2
200
テストを軸にした生き残り術
kworkdev
PRO
0
220
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Designing for Performance
lara
610
69k
Done Done
chrislema
185
16k
Visualization
eitanlees
148
16k
Six Lessons from altMBA
skipperchong
28
4k
For a Future-Friendly Web
brad_frost
180
9.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Faster Mobile Websites
deanohume
309
31k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
Building Adaptive Systems
keathley
43
2.7k
It's Worth the Effort
3n
187
28k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Transcript
p5.jsを使ったクリエイティブコーディングやJavaScriptによる 機械学習・デバイス制御などの処理と組み合わせる話 2022年10月19日 (水) PWA Night vol.44 @オンライン 豊田陽介( )
@youtoy
自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10 から)
プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 (共著) 7月発売 (単著)
自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10 から)
プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 (共著) 7月発売 (単著) 作例の実装方法は主に 2つ、 うち 1つが「p5.js」
スライドを公開するので 発表中は文字などの記載を 追わなくても大丈夫です
クリエイティブコーディングで 作るものは、自分の場合は以下に 関するものが多いです ・動きや変化がある ・インタラクション ・デバイス連携 ※ 自分個人の好みにより
「クリエイティブコーディング」について クリエイティブ・コーディングとは、コンピュータ・ プログラミングの一種で、機能的なものではなく表現的な ものを作ることを目的としたものです。ライブ映像の制作や VJをはじめ、ビジュアルアートやデザイン、ゲームなどの エンターテインメント、アートインスタレーション、 プロジェクションマッピング、サウンドアート、広告、 プロダクトプロトタイプなどの制作に利用されています。 出典: Wikipedia「Creative
coding」の冒頭部分を DeepL で機械翻訳 https://en.wikipedia.org/wiki/Creative_coding
この後の話の方向性
p5.js を使ったクリエイティブ コーディングについては 既に話されていそうなので...
None
p5.jsを用いた表現を多様化させるための ブラウザで動く機械学習・デバイス制御の技術 〜 それらを使った事例集 〜 2022年10月19日 (水) PWA Night vol.44
@オンライン 豊田陽介( ) @youtoy
できることの事例集と 利用した技術を多く紹介
いきなりですが デモをご覧ください
ライブデモ! 機械学習による手の認識 + p5.js によるパーティクル
【動画】ブラウザで手・指の位置検出+p5.jsによる描画 両手の指先に炎が 灯っていく
【動画】ブラウザで手・指の位置検出+p5.jsによる描画 光学迷彩・透明マント のような表現 その2
いったん デモで用いた技術の話へ
ブラウザで動く 機械学習(手の認識)
「MediaPipe」のJavaScript版のHands MediaPipe Hands 画像から手のキーポイント の位置(複数)を認識 ※ 指を立てたかどうかの判定は 位置座標などから自前で計算
TensorFlow.jsベースのため ブラウザ上で動作
取得した座標をそのまま使う、 座標間の位置関係や距離の計算など を行って活用
手の位置、指の位置、 折り曲げた/伸ばした等の状態、 手や指の位置関係などを活用できる
炎のような見た目の描画
パーティクル・システムについて ゲーム物理、モーショングラフィックス、コンピュータ グラフィックなどで使われる技術のひとつで、たくさん の細かいスプライト画像、3Dモデル、またはその他のCG オブジェクトを使って、ある種の「ファジー」な現象を シミュレートするもの 出典: Wikipedia「パーティクル・システム」より
円が吹き出す仕組みに手を加えると... 透明度付き PNG画像に 置きかえ 煙が 吹き出す 色の 加算処理 (合成) 炎の
ゆらめき? 円が出てくる (基本のサンプル でよくある)
単純な重ね合わせではない描画 p5.js の「blendMode()」 ADD SCREEN 重ねた色は明るくなる 重ねた色は明るくなるが ADD より少し弱め 単純な
重畳 ADD SCREEN ※ Canvas の「globalCompositeOperation」 という API による
その他にもたくさんの バリエーションが
動画:フィルターと組み合わせたグローエフェクト マウス操作連動 +パーティクル +色の合成 +フィルター
様々な見た目を作ったり、 画像エフェクト的な描画にも便利!
MediaPipe の 他のバリエーション
MediaPipe JavaScript版で扱えるもの 手を対象としたもの以外の一部を紹介 MediaPipe Face Mesh MediaPipe Holistic
試してみた時の様子 (Holistic から)
【動画】顔のキーポイント検出・姿勢推定とアニメーション 目・口・体の動きと ネコ画像が連動
仕組みに関する補足 ※ ネコの画像は画像 ジェネレーターの サービスを活用 ネコ画像・カメラ画像 の描画:p5.js 顔認識や姿勢推定:
MediaPipe Holistic
画像を用意して動かすところの元になったのは ←こちらの動作する様子と以下の情報より ・イラストはジェネレーターを使って用意 ・4パターンを組み合わせせる: 「目を開いている/閉じている、口を 開けている/閉じている」 ・体を少し揺らすような動きを入れると 良い感じに
MediaPipe Facemesh の機能追加を最速で 試してみた時のもの
【動画】顔のキーポイント検出(虹彩も)と描画 虹彩の位置も とれる顔認識
顔・目・口などの位置・動きや、 上半身・下半身・全身の動き・ ポーズなど様々利用できる!
MediaPipe以外でも: 「Handtrack.js」 ※ 手の開閉のイベントをとれる
【動画】物理演算エンジンにSVGフィルターも組み合わせた 手の開閉の認識 +物理演算エンジン +SVGフィルター (溶けるような見た目)
物理演算エンジン Matter.js (p5-matter というのもあるけど) SVGフィルターは feGaussianBlur と feColorMatrix
ブラウザで扱える仕組みを 様々組み合わせるのも楽しい!
MediaPipe のバリエーション の1つをサクッと紹介
【動画】人物と背景の分離:「MediaPipe Selfie Segmentation」 デバッグ用情報 (画面上部 3つ)と 処理結果を表示
デバイスを 連携させる話へ
JavaScriptで外部デバイスとの通信 ブラウザ上で実行 Node.js ・Web Serial ・Web Bluetooth ・Fetch API ・axios等を利用
・WebSocket API ・MQTT.js等を利用 ・Node Serialport ・noble・bleno ・Fetch API ・axios等を利用 ・ws等を利用 ・MQTT.js等を利用 シリアル通信 BLE HTTPリクエスト WebSocket MQTT
この後に出てくるもの ブラウザ上で実行 Node.js ・Web Serial ・Web Bluetooth ・Fetch API ・axios等を利用
・WebSocket API ・MQTT.js等を利用 ・Node Serialport ・noble・bleno ・Fetch API ・axios等を利用 ・ws等を利用 ・MQTT.js等を利用 シリアル通信 BLE HTTPリクエスト WebSocket MQTT
デバイス間をMQTT (リアルタイム通信)でつなぐ
【動画】物理演算エンジンでの描画を画面間で 2台の iPad上の描画 を擬似的につなぐ
【動画】物理演算エンジンでの描画を画面間で スマホ間を擬似的に つなぎ、動的に位置 関係を変える
ローカルに MQTTブローカー (仲介役)をたてて、 MQTT.js でリアルタイム通信
複数デバイス(画面・ブラウザ) を連動させた作品を作れる!
有線の通信(シリアル通信) を扱う
【動画】micro:bitとのシリアル通信を利用 micro:bit + LED テープと p5.js を 連動させる試作
【動画】M5Stack・micro:bitとのシリアル通信 ジョイスティック の操作と円の動き の連動 p5.js内の円の移動 処理と LEDテープ の点灯位置の連動
Chrome系で使える Web Serial API による実装
様々なデバイスが対応している シリアル通信で データの読み書きを活用できる!
センサーの値を読み取ったり、 モーター・LED などの制御を 実行したり(書き込み)
他の有線での通信: Web MIDI API ※ デバイスが限定されるけれど...
【動画】MIDI対応デバイスとp5.jsを連動させる MIDI対応の物理 コントローラーの ノブ・フェーダー の操作を利用
BLE通信を扱う
【動画】ロボットトイ(toio)6台をBluetoothで制御 片手の指の距離に 応じた toio の 同時制御のON/OFF (通信は PC→toio)
【動画】toioの動き(位置座標)を取得して描画 toio専用マットで取得可能 な位置座標を入力に利用 ⇒ 入力を元にした万華鏡の ような描画 (通信は toio→PC)
Chrome系で使える Web Bluetooth API による実装
BLE での読み書き・通知 (Read・Write・Notify) の双方向通信が一通り扱える!
能動的な処理 (センサー・モーター・LED などを扱うもの) 受動的な処理 (デバイス側からの値の変化に応じた通知) の両方を活用できる
他の事例も掲載してみる (今回のトピック外のもの)
物理工作 + p5.js
【動画】擬似ホログラム(ペッパーズ・ゴースト) ダイソーの透明な 下敷きを切り貼り、 擬似ホログラム用の 表示を iPad で
WebAR + p5.js
【動画】WebARでのマーカー利用のARと組み合わせる ARマーカーに描画を 重畳、マーカーの向きの 変化と描画を連動させる (p5.js + TweenJS + A-Frame +
AR.js )
Leap Motion + p5.js
【動画】Leap Motionによる両手のセンシング 空中での両手や指 の位置を認識 (JavaScriptライブラリを使う or WebSocket を利用)
p5.jsの3D描画を扱う
【動画】3D描画とフィルター/ノイズの組み合わせ p5.js の標準機能のみ
ブラウザ上でのJavascriptの 処理だけでも様々な表現を!
p5.jsを含まない作品も 1つ紹介してみる (機械学習+BLE)
Teachable Machine + バニラなJavaScript + Web Bluetooth API
【動画】鳴らした音によって異なる動きをするtoio 機械学習モデルを自分で ブラウザ上で作成、音の 識別もブラウザ上で
この仕組みは展示イベント (メーカーフェア@つくば・ 東京)でも活用
自分の作品を展示イベントで体験してもらった事例 大人のみならず、小さなお子さんにも楽しんでもらえた
PCとブラウザがあれば 手軽にできる クリエイティブコーディング
まずはちょっと試してみる というところからでも気軽に!
イベントなどの告知
Web周りの技術、ガジェットが関連 https://html5.connpass.com/event/261876/ 10/23(日) オンライン開催 https://enebular.connpass.com/event/250779/ 10/27(木) オンライン開催
終わり!