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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
you(@youtoy)
PRO
November 02, 2021
Technology
0
230
ビジュアルプログラミングでプロトタイピングする / 第12回 ビジュアルプログラミング交流会
you(@youtoy)
PRO
November 02, 2021
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
Deno・Bunの標準機能やElysiaJSを使ったWebSocketサーバー実装 / ラーメン屋を貸し切ってLT会! IoTLT 2026新年会
you
PRO
0
310
M5Stack Chain DualKey を UIFlow 2.0 + USB接続で試す / ビジュアルプログラミングIoTLT vol.22
you
PRO
2
160
ローカルLLMをJavaScriptで(少しAIエージェントSDKなどの話も) / 冬のJavaScript祭り @Pleasanter Lounge
you
PRO
0
940
Webの技術で「特殊なゲーム用コントローラーや他デバイスなど」とブラウザを連携させる / HTML5 11th Anniversary
you
PRO
0
82
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
200
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
880
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
440
子ども向けの活動や自身のモノづくり活動などでやったこと / micro:bit ファンの集い
you
PRO
0
46
ブラウザのAPIで色々なデバイスをあれこれ扱ってみた話(主にWeb HID API) / IoTLT @JLCPCB オープンハードカンファレンス
you
PRO
0
170
Other Decks in Technology
See All in Technology
量子クラウドサービスの裏側 〜Deep Dive into OQTOPUS〜
oqtopus
0
150
GitHub Issue Templates + Coding Agentで簡単みんなでIaC/Easy IaC for Everyone with GitHub Issue Templates + Coding Agent
aeonpeople
1
260
Tebiki Engineering Team Deck
tebiki
0
24k
データの整合性を保ちたいだけなんだ
shoheimitani
8
3.2k
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
daitak
1
390
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
zepprix
0
480
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
ama_ch
0
220
OCI Database Management サービス詳細
oracle4engineer
PRO
1
7.4k
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
coconala_engineer
2
780
私たち準委任PdEは2つのプロダクトに挑戦する ~ソフトウェア、開発支援という”二重”のプロダクトエンジニアリングの実践~ / 20260212 Naoki Takahashi
shift_evolve
PRO
2
210
GitHub Copilot CLI を使いやすくしよう
tsubakimoto_s
0
110
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
shibayu36
0
330
Featured
See All Featured
Faster Mobile Websites
deanohume
310
31k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
130
Making the Leap to Tech Lead
cromwellryan
135
9.7k
GraphQLとの向き合い方2022年版
quramy
50
14k
Building the Perfect Custom Keyboard
takai
2
690
Game over? The fight for quality and originality in the time of robots
wayneb77
1
120
Everyday Curiosity
cassininazir
0
130
Become a Pro
speakerdeck
PRO
31
5.8k
Visualization
eitanlees
150
17k
From π to Pie charts
rasagy
0
130
Code Reviewing Like a Champion
maltzj
527
40k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
110
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 で作った別作品も セットで持参しつつ
ビジュアルプログラミングつながりの話 試作中でも見せ方によって
ある程度の段階でも 楽しめるコンテンツに
終わり!