p5.jsを使ったクリエイティブコーディングに機械学習やデバイス連携などを組み合わせている話2022年12月18日 (日)Creative Coding作品の周辺を語る会 03 @オンライン豊田陽介（ ）@youtoy
View Slide
自己紹介豊田陽介（ ）@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台のスマホ上のキャンバスをつなぐ
you
yu4u
weblyzard
hato3isfriend
banjun
junkifurukawa
hikiroku
tsutaj
hayaosuzuki
zakiyama
yujisoftware
inesmontani
tarappo
bryan
chriscoyier
panda_program
kneath
jmmastey
maggiecrowley
jonyablonski
destraynor
lara
addyosmani
akmur
chrislema