Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ビジュアルプログラミングでプロトタイピングする / 第12回 ビジュアルプログラミング交流会
Search
you(@youtoy)
PRO
November 02, 2021
Technology
0
220
ビジュアルプログラミングでプロトタイピングする / 第12回 ビジュアルプログラミング交流会
you(@youtoy)
PRO
November 02, 2021
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
ヒーローズ・リーグの応募作品で使ったデバイス・アイテム・ライブラリなど / #ヒーローズリーグ 2025 開発素材LT
you
PRO
0
13
最近発売された端末+UIFlow 2.0の組み合わせ(+1.0の話)をUSB接続で / ビジュアルプログラミングIoTLT vol.21
you
PRO
0
6
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
120
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.7k
Webの技術とガジェットで那須の子ども達にワクワクを! / IoTLT_20250720
you
PRO
0
140
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
2.5k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
170
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
310
Other Decks in Technology
See All in Technology
20250905_MeetUp_Ito-san_s_presentation.pdf
magicpod
1
100
エンジニアリングマネージャーの成長の道筋とキャリア / Developers Summit 2025 KANSAI
daiksy
3
1.1k
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
データ分析エージェント Socrates の育て方
na0
7
2.5k
Apache Spark もくもく会
taka_aki
0
140
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
270
AWSで始める実践Dagster入門
kitagawaz
1
750
テストを軸にした生き残り術
kworkdev
PRO
0
220
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
Snowflake×dbtを用いたテレシーのデータ基盤のこれまでとこれから
sagara
0
120
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.1k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Into the Great Unknown - MozCon
thekraken
40
2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Documentation Writing (for coders)
carmenintech
74
5k
Faster Mobile Websites
deanohume
309
31k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Transcript
ビジュアルプログラミングで プロトタイピングする 2021年11月2日 (火) 【enebular developersコラボ】ビジュアルプログラミング交流会 豊田 陽介 ( @youtoy
)
豊田陽介(@youtoy) 自己紹介 普段は、某通信会社勤務 自宅にたくさん ガジェット好き その他 IT系イベント主催、登壇や運営なども 子ども向けの活動いろいろ(IT系以外も) プライベートでの活動 ビジュアルプログラミングIoTLT
(共同主催)や他いろいろ、 Microsoft MVP(2021/10 から)
今日の話題は 「プロトタイピング」
試作したもの(7月29日に動画投稿) 雑にピクトグラムになれる
思いついた時 最初は...
JavaScript で 「MediaPipe + p5.js」 という構成を考えた
よく使っている組み合わせ 「カメラでの認識+何かの 描画」という組み合わせで よく利用してる
すぐ後に、 ふと思った
あれ?Stretch3 のほうが楽なのでは? PoseNetで姿勢推定できるし ※ Stretch3 ⇒ Scratch の独自拡張版 の1つで、独自拡張に
機械学習系のものも
SNS投稿して、 何が起こってるかが 分かるくらいにする
もう少し細かく言うと
必要な要素 姿勢推定で人の顔や体 ・腕などを認識 (とりあえず上半身) ピクトグラム用の作図 (丸とか四角などわり とシンプルな形状) 認識結果と図形の 描画と調整
必要なこと(当初案):JavaScript 姿勢推定で人の顔や体 ・腕などを認識 (とりあえず上半身) ピクトグラム用の作図 (丸とか四角とかわり とシンプルな形状) 認識結果と図形の 描画と調整 ペイントソフトか
何かで? or p5.js で図形描画 p5.js の プログラムで 画像重畳 or 図形描画 MediaPipe JavaScript版
必要なこと(最終版) 姿勢推定で人の顔や体 ・腕などを認識 (とりあえず上半身) ピクトグラム用の作図 (丸とか四角とかわり とシンプルな形状) 認識結果と図形の 描画と調整 Stretch3
の 独自拡張で Scratch標準機能 で描画できる Scratch標準機能 の座標指定等で
全て Stretch3 内で 完結!
作図
作図 四角 丸 四角 四角
作図 四角 丸 四角 四角 丸2つ と台形
計算をする
1つはこの話 カメラに顔が近づいている時 ⇒ 顔のパーツのサイズを大きく カメラから顔が離れている時 ⇒ 顔のパーツのサイズを小さく
サイズを変える仕組み作る 顔の部分の例 右耳と左耳の x座標の差を 割り算する ↓ その値を大きさに反映 (描画してる場所は「鼻」の位置)
サイズを変える仕組み作る 顔の部分の例 右耳と左耳の x座標の差を 割り算する ↓ その値を大きさに反映 カメラに近いと画面内の顔が大きくうつり、 カメラから離れると小さくうつる ↓
顔の特定の2点間の距離の大小が変わる ピクトグラムの顔の サイズ感が、実際の 顔のサイズと合う
計算をする その2
腕の角度を求める PoseNet で 座標が分かる PoseNet で 座標が分かる 腕に合わせて 傾けたい サイズ調整した
パーツをうまく 重ねたい
腕の角度を求める atan Scratch標準の計算機能で
腕の角度を求める atan Scratch標準の計算機能で arc tangent 【数学に出てくるやつ】 ある2つの座標 (x1, y1) と
(x2, y2) を通る直線の傾き
数式で求められたはず、 と思い浮かぶものの
記憶はしていなくて、 だいたい毎回ググってる ( “2点間の角度” とかで)
プログラム全体は
各パーツのプログラム
わりとコンパクト
思い立ってから 数時間で作成や動画撮影
サクッと プロトタイピング!
プロトタイプだけど 活用してみる
前置きをつけて
保育園の子ども達向けに体験会 MediaPipe + p5.js で作った別作品も セットで持参しつつ
ビジュアルプログラミングつながりの話 試作中でも見せ方によって
ある程度の段階でも 楽しめるコンテンツに
終わり!