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)
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
140
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
61
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
180
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
110
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
100
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
53
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
57
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
Other Decks in Technology
See All in Technology
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
170
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
140
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
260
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
350
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
230
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
160
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
180
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
400
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
860
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
120
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
2
2.2k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
RailsConf 2023
tenderlove
30
1.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
For a Future-Friendly Web
brad_frost
179
9.8k
Designing Experiences People Love
moore
142
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Designing for Performance
lara
610
69k
A better future with KSS
kneath
238
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Done Done
chrislema
184
16k
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 で作った別作品も セットで持参しつつ
ビジュアルプログラミングつながりの話 試作中でも見せ方によって
ある程度の段階でも 楽しめるコンテンツに
終わり!