Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ビジュアルプログラミングでプロトタイピングする / 第12回 ビジュアルプログラミング交流会

ビジュアルプログラミングでプロトタイピングする / 第12回 ビジュアルプログラミング交流会

you(@youtoy)

November 02, 2021
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

  1. ビジュアルプログラミングで プロトタイピングする 2021年11月2日 (火) 【enebular developersコラボ】ビジュアルプログラミング交流会   豊田 陽介 ( @youtoy

    )
  2. 豊田陽介(@youtoy) 自己紹介 普段は、某通信会社勤務 自宅にたくさん ガジェット好き その他 IT系イベント主催、登壇や運営なども 子ども向けの活動いろいろ(IT系以外も) プライベートでの活動 ビジュアルプログラミングIoTLT

    (共同主催)や他いろいろ、 Microsoft MVP(2021/10 から)
  3. 今日の話題は 「プロトタイピング」

  4. 試作したもの(7月29日に動画投稿) 雑にピクトグラムになれる

  5. 思いついた時 最初は...

  6. JavaScript で 「MediaPipe + p5.js」 という構成を考えた

  7. よく使っている組み合わせ 「カメラでの認識+何かの  描画」という組み合わせで よく利用してる

  8. すぐ後に、 ふと思った

  9. あれ?Stretch3 のほうが楽なのでは? PoseNetで姿勢推定できるし ※ Stretch3 ⇒ Scratch の独自拡張版   の1つで、独自拡張に

      機械学習系のものも
  10. SNS投稿して、 何が起こってるかが 分かるくらいにする

  11. もう少し細かく言うと

  12. 必要な要素 姿勢推定で人の顔や体 ・腕などを認識 (とりあえず上半身) ピクトグラム用の作図 (丸とか四角などわり とシンプルな形状) 認識結果と図形の 描画と調整

  13. 必要なこと(当初案):JavaScript 姿勢推定で人の顔や体 ・腕などを認識 (とりあえず上半身) ピクトグラム用の作図 (丸とか四角とかわり とシンプルな形状) 認識結果と図形の 描画と調整 ペイントソフトか

    何かで? or p5.js で図形描画 p5.js の プログラムで 画像重畳 or 図形描画 MediaPipe JavaScript版
  14. 必要なこと(最終版) 姿勢推定で人の顔や体 ・腕などを認識 (とりあえず上半身) ピクトグラム用の作図 (丸とか四角とかわり とシンプルな形状) 認識結果と図形の 描画と調整 Stretch3

    の 独自拡張で Scratch標準機能 で描画できる Scratch標準機能 の座標指定等で
  15. 全て Stretch3 内で 完結!

  16. 作図

  17. 作図 四角 丸 四角 四角

  18. 作図 四角 丸 四角 四角 丸2つ と台形

  19. 計算をする

  20. 1つはこの話 カメラに顔が近づいている時 ⇒ 顔のパーツのサイズを大きく カメラから顔が離れている時 ⇒ 顔のパーツのサイズを小さく

  21. サイズを変える仕組み作る 顔の部分の例 右耳と左耳の x座標の差を 割り算する ↓ その値を大きさに反映 (描画してる場所は「鼻」の位置)

  22. サイズを変える仕組み作る 顔の部分の例 右耳と左耳の x座標の差を 割り算する ↓ その値を大きさに反映 カメラに近いと画面内の顔が大きくうつり、 カメラから離れると小さくうつる          ↓

    顔の特定の2点間の距離の大小が変わる ピクトグラムの顔の サイズ感が、実際の 顔のサイズと合う
  23. 計算をする その2

  24. 腕の角度を求める PoseNet で 座標が分かる PoseNet で 座標が分かる 腕に合わせて 傾けたい サイズ調整した

    パーツをうまく 重ねたい
  25. 腕の角度を求める atan Scratch標準の計算機能で

  26. 腕の角度を求める atan Scratch標準の計算機能で arc tangent 【数学に出てくるやつ】 ある2つの座標 (x1, y1) と

    (x2, y2) を通る直線の傾き
  27. 数式で求められたはず、 と思い浮かぶものの

  28. 記憶はしていなくて、 だいたい毎回ググってる ( “2点間の角度” とかで)

  29. プログラム全体は

  30. 各パーツのプログラム

  31. わりとコンパクト

  32. 思い立ってから 数時間で作成や動画撮影

  33. サクッと プロトタイピング!

  34. プロトタイプだけど 活用してみる

  35. 前置きをつけて

  36. 保育園の子ども達向けに体験会 MediaPipe + p5.js で作った別作品も セットで持参しつつ

  37. ビジュアルプログラミングつながりの話 試作中でも見せ方によって

  38. ある程度の段階でも 楽しめるコンテンツに

  39. 終わり!