p5.jsを使ったクリエイティブコーディングやJavaScriptによる機械学習・デバイス制御などの処理と組み合わせる話 / PWA Night vol.44

Transcript

1. p5.jsを使ったクリエイティブコーディングやJavaScriptによる
   機械学習・デバイス制御などの処理と組み合わせる話
   2022年10月19日 (水)
   PWA Night vol.44 @オンライン
   豊田陽介（ ）
   @youtoy
   

   View Slide

2. 自己紹介
   豊田陽介（ ）
   @youtoy
   ・IT系イベント主催、登壇や運営なども
   ・子ども向けの活動いろいろ
   ・ Microsoft MVP（2021/10 から）
   プライベートでの活動
   ・ガジェット大好き
   ・今年、本2冊出したり、メーカーフェア出展3回
   好きなことなど
   3月発売
   （共著）
   7月発売
   （単著）
   

   View Slide

3. 自己紹介
   豊田陽介（ ）
   @youtoy
   ・IT系イベント主催、登壇や運営なども
   ・子ども向けの活動いろいろ
   ・ Microsoft MVP（2021/10 から）
   プライベートでの活動
   ・ガジェット大好き
   ・今年、本2冊出したり、メーカーフェア出展3回
   好きなことなど
   3月発売
   （共著）
   7月発売
   （単著）
   作例の実装方法は主に 2つ、
   うち 1つが「p5.js」
   

   View Slide

4. スライドを公開するので
   発表中は文字などの記載を
   追わなくても大丈夫です
   

   View Slide

5. クリエイティブコーディングで
   作るものは、自分の場合は以下に
   関するものが多いです
   　・動きや変化がある
   　・インタラクション
   　・デバイス連携
   　　※ 自分個人の好みにより
   

   View Slide

6. 「クリエイティブコーディング」について
   クリエイティブ・コーディングとは、コンピュータ・
   プログラミングの一種で、機能的なものではなく表現的な
   ものを作ることを目的としたものです。ライブ映像の制作や
   VJをはじめ、ビジュアルアートやデザイン、ゲームなどの
   エンターテインメント、アートインスタレーション、
   プロジェクションマッピング、サウンドアート、広告、
   プロダクトプロトタイプなどの制作に利用されています。
   出典： Wikipedia「Creative coding」の冒頭部分を DeepL で機械翻訳
   　　　https://en.wikipedia.org/wiki/Creative_coding
   

   View Slide

7. この後の話の方向性
   

   View Slide

8. p5.js を使ったクリエイティブ
   コーディングについては
   既に話されていそうなので...
   

   View Slide

9. View Slide

10. p5.jsを用いた表現を多様化させるための
    ブラウザで動く機械学習・デバイス制御の技術
    〜 それらを使った事例集 〜
    2022年10月19日 (水)
    PWA Night vol.44 @オンライン
    豊田陽介（ ）
    @youtoy
    

    View Slide

11. できることの事例集と
    利用した技術を多く紹介
    

    View Slide

12. いきなりですが
    デモをご覧ください
    

    View Slide

13. ライブデモ！
    機械学習による手の認識 ＋ p5.js によるパーティクル
    

    View Slide

14. 【動画】ブラウザで手・指の位置検出＋p5.jsによる描画
    両手の指先に炎が
    灯っていく
    

    View Slide

15. 【動画】ブラウザで手・指の位置検出＋p5.jsによる描画
    光学迷彩・透明マント
    のような表現
    その2
    

    View Slide

16. いったん
    デモで用いた技術の話へ
    

    View Slide

17. ブラウザで動く
    機械学習（手の認識）
    

    View Slide

18. 「MediaPipe」のJavaScript版のHands
    MediaPipe Hands
    画像から手のキーポイント
    の位置（複数）を認識
    ※ 指を立てたかどうかの判定は
    　 位置座標などから自前で計算
    

    View Slide

19. TensorFlow.jsベースのため
    ブラウザ上で動作
    

    View Slide

20. 取得した座標をそのまま使う、
    座標間の位置関係や距離の計算など
    を行って活用
    

    View Slide

21. 手の位置、指の位置、
    折り曲げた／伸ばした等の状態、
    手や指の位置関係などを活用できる
    

    View Slide

22. 炎のような見た目の描画
    

    View Slide

23. パーティクル・システムについて
    ゲーム物理、モーショングラフィックス、コンピュータ
    グラフィックなどで使われる技術のひとつで、たくさん
    の細かいスプライト画像、3Dモデル、またはその他のCG
    オブジェクトを使って、ある種の「ファジー」な現象を
    シミュレートするもの
    出典： Wikipedia「パーティクル・システム」より
    

    View Slide

24. 円が吹き出す仕組みに手を加えると...
    透明度付き
    PNG画像に
    置きかえ 煙が
    吹き出す
    色の
    加算処理
    （合成）
    炎の
    ゆらめき？
    円が出てくる
    （基本のサンプル
    　でよくある）
    

    View Slide

25. 単純な重ね合わせではない描画
    p5.js の「blendMode()」
    ADD
    SCREEN
    重ねた色は明るくなる
    重ねた色は明るくなるが
    ADD より少し弱め
    単純な
    重畳
    ADD
    SCREEN
    ※ Canvas の「globalCompositeOperation」
    　 という API による
    

    View Slide

26. その他にもたくさんの
    バリエーションが
    

    View Slide

27. 動画：フィルターと組み合わせたグローエフェクト
    マウス操作連動
    ＋パーティクル
    ＋色の合成
    ＋フィルター
    

    View Slide

28. 様々な見た目を作ったり、
    画像エフェクト的な描画にも便利！
    

    View Slide

29. MediaPipe の
    他のバリエーション
    

    View Slide

30. MediaPipe JavaScript版で扱えるもの
    手を対象としたもの以外の一部を紹介
    MediaPipe Face Mesh MediaPipe Holistic
    

    View Slide

31. 試してみた時の様子
    （Holistic から）
    

    View Slide

32. 【動画】顔のキーポイント検出・姿勢推定とアニメーション
    目・口・体の動きと
    ネコ画像が連動
    

    View Slide

33. 仕組みに関する補足
    ※ ネコの画像は画像
    　 ジェネレーターの
    　 サービスを活用
    ネコ画像・カメラ画像
    の描画：p5.js
    顔認識や姿勢推定：
    MediaPipe Holistic
    

    View Slide

34. 画像を用意して動かすところの元になったのは
    ←こちらの動作する様子と以下の情報より
    ・イラストはジェネレーターを使って用意
    ・4パターンを組み合わせせる：
    　「目を開いている/閉じている、口を
    　　開けている/閉じている」
    ・体を少し揺らすような動きを入れると
    　良い感じに
    

    View Slide

35. MediaPipe Facemesh
    の機能追加を最速で
    試してみた時のもの
    

    View Slide

36. 【動画】顔のキーポイント検出（虹彩も）と描画
    虹彩の位置も
    とれる顔認識
    

    View Slide

37. 顔・目・口などの位置・動きや、
    上半身・下半身・全身の動き・
    ポーズなど様々利用できる！
    

    View Slide

38. MediaPipe以外でも：
    「Handtrack.js」
    ※ 手の開閉のイベントをとれる
    

    View Slide

39. 【動画】物理演算エンジンにSVGフィルターも組み合わせた
    手の開閉の認識
    ＋物理演算エンジン
    ＋SVGフィルター
    （溶けるような見た目）
    

    View Slide

40. 物理演算エンジン Matter.js
    （p5-matter というのもあるけど）
    SVGフィルターは
    feGaussianBlur と
    feColorMatrix
    

    View Slide

41. ブラウザで扱える仕組みを
    様々組み合わせるのも楽しい！
    

    View Slide

42. MediaPipe のバリエーション
    の1つをサクッと紹介
    

    View Slide

43. 【動画】人物と背景の分離：「MediaPipe Selfie Segmentation」
    デバッグ用情報
    （画面上部 3つ）と
    処理結果を表示
    

    View Slide

44. デバイスを
    連携させる話へ
    

    View Slide

45. 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
    

    View Slide

46. この後に出てくるもの
    ブラウザ上で実行 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
    

    View Slide

47. デバイス間をMQTT
    （リアルタイム通信）でつなぐ
    

    View Slide

48. 【動画】物理演算エンジンでの描画を画面間で
    2台の iPad上の描画
    を擬似的につなぐ
    

    View Slide

49. 【動画】物理演算エンジンでの描画を画面間で
    スマホ間を擬似的に
    つなぎ、動的に位置
    関係を変える
    

    View Slide

50. ローカルに MQTTブローカー
    （仲介役）をたてて、
    MQTT.js でリアルタイム通信
    

    View Slide

51. 複数デバイス（画面・ブラウザ）
    を連動させた作品を作れる！
    

    View Slide

52. 有線の通信（シリアル通信）
    を扱う
    

    View Slide

53. 【動画】micro:bitとのシリアル通信を利用
    micro:bit ＋ LED
    テープと p5.js を
    連動させる試作
    

    View Slide

54. 【動画】M5Stack・micro:bitとのシリアル通信
    ジョイスティック
    の操作と円の動き
    の連動
    p5.js内の円の移動
    処理と LEDテープ
    の点灯位置の連動
    

    View Slide

55. Chrome系で使える
    Web Serial API による実装
    

    View Slide

56. 様々なデバイスが対応している
    シリアル通信で
    データの読み書きを活用できる！
    

    View Slide

57. センサーの値を読み取ったり、
    モーター・LED などの制御を
    実行したり（書き込み）
    

    View Slide

58. 他の有線での通信：
    Web MIDI API
    ※ デバイスが限定されるけれど...
    

    View Slide

59. 【動画】MIDI対応デバイスとp5.jsを連動させる
    MIDI対応の物理
    コントローラーの
    ノブ・フェーダー
    の操作を利用
    

    View Slide

60. BLE通信を扱う
    

    View Slide

61. 【動画】ロボットトイ（toio）6台をBluetoothで制御
    片手の指の距離に
    応じた toio の
    同時制御のON/OFF
    （通信は PC→toio）
    

    View Slide

62. 【動画】toioの動き（位置座標）を取得して描画
    toio専用マットで取得可能
    な位置座標を入力に利用
    ⇒ 入力を元にした万華鏡の
    　 ような描画
    （通信は toio→PC）
    

    View Slide

63. Chrome系で使える
    Web Bluetooth API による実装
    

    View Slide

64. BLE での読み書き・通知
    （Read・Write・Notify）
    の双方向通信が一通り扱える！
    

    View Slide

65. 能動的な処理
    （センサー・モーター・LED などを扱うもの）
    受動的な処理
    （デバイス側からの値の変化に応じた通知）
    の両方を活用できる
    

    View Slide

66. 他の事例も掲載してみる
    （今回のトピック外のもの）
    

    View Slide

67. 物理工作
    ＋
    p5.js
    

    View Slide

68. 【動画】擬似ホログラム（ペッパーズ・ゴースト）
    ダイソーの透明な
    下敷きを切り貼り、
    擬似ホログラム用の
    表示を iPad で
    

    View Slide

69. WebAR
    ＋
    p5.js
    

    View Slide

70. 【動画】WebARでのマーカー利用のARと組み合わせる
    ARマーカーに描画を
    重畳、マーカーの向きの
    変化と描画を連動させる
    （p5.js ＋ TweenJS
    　　＋ A-Frame ＋ AR.js ）
    

    View Slide

71. Leap Motion
    ＋
    p5.js
    

    View Slide

72. 【動画】Leap Motionによる両手のセンシング
    空中での両手や指
    の位置を認識
    （JavaScriptライブラリを使う
    　or WebSocket を利用）
    

    View Slide

73. p5.jsの3D描画を扱う
    

    View Slide

74. 【動画】3D描画とフィルター／ノイズの組み合わせ
    p5.js の標準機能のみ
    

    View Slide

75. ブラウザ上でのJavascriptの
    処理だけでも様々な表現を！
    

    View Slide

76. p5.jsを含まない作品も
    1つ紹介してみる
    （機械学習＋BLE）
    

    View Slide

77. Teachable Machine
    ＋
    バニラなJavaScript
    ＋
    Web Bluetooth API
    

    View Slide

78. 【動画】鳴らした音によって異なる動きをするtoio
    機械学習モデルを自分で
    ブラウザ上で作成、音の
    識別もブラウザ上で
    

    View Slide

79. この仕組みは展示イベント
    （メーカーフェア＠つくば・
    東京）でも活用
    

    View Slide

80. 自分の作品を展示イベントで体験してもらった事例
    大人のみならず、小さなお子さんにも楽しんでもらえた
    

    View Slide

81. PCとブラウザがあれば
    手軽にできる
    クリエイティブコーディング
    

    View Slide

82. まずはちょっと試してみる
    というところからでも気軽に！
    

    View Slide

83. イベントなどの告知
    

    View Slide

84. Web周りの技術、ガジェットが関連
    https://html5.connpass.com/event/261876/
    10/23（日）
    オンライン開催
    https://enebular.connpass.com/event/250779/
    10/27（木）
    オンライン開催
    

    View Slide

85. 終わり！
    

    View Slide