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)
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
16
ブラウザで CircuitPython の開発:公式の「CircuitPython Code Editor」を試した / 【屋形船開催】IoT縛りの勉強会! IoTLT vol.126 @東京湾
you
PRO
0
110
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
2.5k
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
300
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
230
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
130
Other Decks in Technology
See All in Technology
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
9
4.3k
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
9.9k
[RSJ25] Feasible RAG: Hierarchical Multimodal Retrieval with Feasibility-Aware Embodied Memory for Mobile Manipulation
keio_smilab
PRO
0
100
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
580
「魔法少女まどか☆マギカ Magia Exedra」のグローバル展開を支える、開発チームと翻訳チームの「意識しない協創」を実現するローカライズシステム
gree_tech
PRO
0
550
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
280
テストを軸にした生き残り術
kworkdev
PRO
0
170
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
150
Obsidian応用活用術
onikun94
1
390
AWSで推進するデータマネジメント
kawanago
0
1.1k
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
120
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
240
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Navigating Team Friction
lara
189
15k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
186
54k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Become a Pro
speakerdeck
PRO
29
5.5k
Automating Front-end Workflow
addyosmani
1370
200k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
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 で作った別作品も セットで持参しつつ
ビジュアルプログラミングつながりの話 試作中でも見せ方によって
ある程度の段階でも 楽しめるコンテンツに
終わり!