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

by you（@youtoy）

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

今日の話題は「プロトタイピング」

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

すぐ後に、ふと思った

Slide 9

Slide 9 text

あれ？Stretch3 のほうが楽なのでは？ PoseNetで姿勢推定できるし ※ Stretch3 ⇒ Scratch の独自拡張版　の1つで、独自拡張に　機械学習系のものも

Slide 10

Slide 10 text

SNS投稿して、何が起こってるかが分かるくらいにする

Slide 11

Slide 11 text

もう少し細かく言うと

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

必要なこと（当初案）：JavaScript 姿勢推定で人の顔や体・腕などを認識（とりあえず上半身）ピクトグラム用の作図（丸とか四角とかわりとシンプルな形状）認識結果と図形の描画と調整ペイントソフトか何かで？ or p5.js で図形描画 p5.js のプログラムで画像重畳 or 図形描画 MediaPipe JavaScript版

Slide 14

Slide 14 text

必要なこと（最終版）姿勢推定で人の顔や体・腕などを認識（とりあえず上半身）ピクトグラム用の作図（丸とか四角とかわりとシンプルな形状）認識結果と図形の描画と調整 Stretch3 の独自拡張で Scratch標準機能で描画できる Scratch標準機能の座標指定等で

Slide 15

Slide 15 text

全て Stretch3 内で完結！

Slide 16

Slide 16 text

作図

Slide 17

Slide 17 text

作図四角丸四角四角

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

計算をする

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

サイズを変える仕組み作る顔の部分の例右耳と左耳の x座標の差を割り算する ↓ その値を大きさに反映カメラに近いと画面内の顔が大きくうつり、カメラから離れると小さくうつる　　　　　　　　　↓ 顔の特定の2点間の距離の大小が変わるピクトグラムの顔のサイズ感が、実際の顔のサイズと合う

Slide 23

Slide 23 text

計算をするその2

Slide 24

Slide 24 text

腕の角度を求める PoseNet で座標が分かる PoseNet で座標が分かる腕に合わせて傾けたいサイズ調整したパーツをうまく重ねたい

Slide 25

Slide 25 text

腕の角度を求める atan Scratch標準の計算機能で

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

数式で求められたはず、と思い浮かぶものの

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

プログラム全体は

Slide 30

Slide 30 text

各パーツのプログラム

Slide 31

Slide 31 text

わりとコンパクト

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

サクッとプロトタイピング！

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

前置きをつけて

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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