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

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. 終わり！