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を使ったクリエイティブコーディングに機械学習やデバイス連携などを組み合わせている話 ...
Search
you(@youtoy)
PRO
December 18, 2022
Technology
0
260
p5.jsを使ったクリエイティブコーディングに機械学習やデバイス連携などを組み合わせている話 / Creative Coding作品の周辺を語る会 03
you(@youtoy)
PRO
December 18, 2022
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
10
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
110
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.5k
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
300
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
230
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
130
Other Decks in Technology
See All in Technology
Skrub: machine-learning with dataframes
gaelvaroquaux
0
120
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
150
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
19
9k
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
200
ヒューリスティック評価を用いたゲームQA実践事例
gree_tech
PRO
0
540
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
570
実運用で考える PGO
kworkdev
PRO
0
150
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
200
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
540
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
160
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
9.9k
AWSで推進するデータマネジメント
kawanago
0
1k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
55
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
186
54k
It's Worth the Effort
3n
187
28k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Balancing Empowerment & Direction
lara
3
610
A designer walks into a library…
pauljervisheath
207
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Transcript
p5.jsを使ったクリエイティブコーディングに 機械学習やデバイス連携などを組み合わせている話 2022年12月18日 (日) Creative Coding作品の周辺を語る会 03 @オンライン 豊田陽介( )
@youtoy
自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10 から)
プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 (共著) 7月発売 (単著)
p5.js と組み合わせている、 p5.js以外のライブラリやモノ
「画面の中」と「画面の外」 がつながる話
自己紹介に出てきたものでも機械学習の話が 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10 から)
プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 (共著) 7月発売 (単著) ブラウザ上でできる機械学習 と「p5.js」の話など ビジュアルプログラミング + IoT の作例を執筆
自己紹介に出てきたものでモノとつながる話 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・子ども向けの活動いろいろ ・ Microsoft MVP(2021/10 から)
プライベートでの活動 ・ガジェット大好き ・今年、本2冊出したり、メーカーフェア出展3回 好きなことなど 3月発売 (共著) 7月発売 (単著) 仙台での展示(途中): センサー + ロボットトイ +α の組み合わせ 最終的には、画面描 画でなくマット上に プロジェクション
p5.jsの描画に人・ロボットトイの動きが影響 p5.js公式サンプルの 「Kaleidoscope」の 入力や描画の色などを 変更 ▪ マウス操作の軌跡 を入力にする部分 ⇒
ランダムに動く ロボットトイの軌跡に (センサーで手が近づく のを認識して、動き の規則を変えたりも)
大垣のイベント出展の際に 「透明マント・光学迷彩の人 ですよね」と言われる
画面内の描画と画面外の人の動きがつながる p5.js の描画に「MediaPipe Hands」という仕組みを組み合わせ
思いついたことを 作って試すのが好きです (そして SNS などで共有したり)
p5.js を使おうと思ったきっかけ: とある機械学習の仕組みの サンプルコードで出てきた
つくばでのイベント出展準備で触れた技術 ブラウザ上で「画像・音・ポーズ(人の姿勢)」 を対象にした機械学習モデルが作成できたりする 「Teachable Machine」 の公式実装サンプルの中で登場
描画ではない部分でp5.js(+α)が使われる形 ▪制作途中のものの動画 異なる音色・音の鳴らし方 を学習(鳴らす楽器類は ダイソーで安く仕入れた) 機械学習モデルを使い、 音によってロボットトイの 動きを変える仕組みを作成
この時も大人から子どもまでを対象に 物品選定や体験を設計、小さい子にも楽しんでもらえた!
この後も技術の話ではなく 事例集的な話が続きます
ハーフミラーを使った スマートミラー的なもの
ハーフミラーの後ろでp5.jsの描画 ハーフミラーの後ろに モバイルディスプレイなど を置いて描画を出力 黒背景の部分は鏡になって 明るい色の部分は鏡の上で 描画内容が見える
100均の透明下敷きで 擬似ホログラム
ペッパーズ・ゴーストと呼ばれるものを 透明下敷きで逆さまのピラ ミッドのようなものを作成 画面(iPad)の 4箇所に同 じ内容の方向違いの描画を 表示させて透明ピラミッド にうつす
デバイスの間をIoTの通信 でつなげてみる
2台のスマホ上のキャンバスをつなぐ 2台のスマホに別々に p5.js のキャンバスを用意 デバイス間で跳ね回る ボールの位置座標を IoT の 通信(MQTT)で共有 ※
画面のつながりを縦 or 横方向に変える仕組み も入れてみた
ブラウザでできるマーカーを 使うARとの組み合わせ
WebARのマーカー上に描画を重ねる 専用マーカーを使うARの ブラウザで動くものを利用 ボールが跳ねる描画をして いるキャンバスをARマー カーに重ねる (マーカーが回転すると 重力の方向も回転)
しゃべった内容を文字にして 画面の中で落下させてみる
しゃべった声が実体化して落下する ブラウザ内蔵の音声認識を 連続稼働させたり、文字に 対して物理演算を適用 声の大きさを文字の大きさ に反映させたりも
画面上の描画の動き・速度が LEDの点灯状態に連動
p5.jsで計算した位置・速度をLEDに反映 p5.jsで描画した動く円の 位置・速度を、USB接続し たデバイス(micro:bit) に送信 USB経由で受けとった数字 を元に LED の点灯位置を 変える
デバイス上のLEDの点灯位置と p5.jsでの図形描画位置が連動
傾きで移動するLEDの点灯位置を使った描画 micro:bit の傾き具合に よって LED の点灯位置を 変更 USB経由で受けとった点灯 位置の情報を使ってp5.js でブラウザ上の描画を実行
MIDIコントローラーでの操作を 描画に反映
スライダー・ノブの操作で色などを変える USB接続のMIDIコントロー ラーの操作結果をブラウザ で取得 取得した数値データを p5.jsの描画に反映させる
引き続き お試しを続けていきたい!
今日の話の中で使っていた技術の抜粋 ブラウザの API や JavaScriptライブラリ ・Web Serial ・Web Bluetooth ・Web
MIDI ・Teachable Machine ・MediaPipe シリアル通信 BLE MIDIデバイス 機械学習 (他にもいろいろ便利なものがあります!)
終わり!
ゲームのコントローラーや 電子工作ができるボードを 組み合わせてみる
2台のスマホ上のキャンバスをつなぐ