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
210
ビジュアルプログラミングでプロトタイピングする / 第12回 ビジュアルプログラミング交流会
you(@youtoy)
PRO
November 02, 2021
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
35
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
85
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
180
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.5k
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
100
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
620
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
2.4k
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
5.1k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
1
2.7k
Other Decks in Technology
See All in Technology
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
1.8k
MIMEと文字コードの闇
hirachan
2
1.5k
“常に進化する”開発現場へ! SHIFTが語るアジャイルQAの未来/20250306 Yuma Murase
shift_evolve
0
100
OPENLOGI Company Profile
hr01
0
60k
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
790
エンジニアの健康管理術 / Engineer Health Management Techniques
y_sone
4
890
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
180
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
390
【Snowflake九州ユーザー会#2】BigQueryとSnowflakeを比較してそれぞれの良し悪しを掴む / BigQuery vs Snowflake: Pros & Cons
civitaspo
3
1.1k
OPENLOGI Company Profile for engineer
hr01
1
20k
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
850
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
GitHub's CSS Performance
jonrohan
1030
460k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Being A Developer After 40
akosma
89
590k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
We Have a Design System, Now What?
morganepeng
51
7.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.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 で作った別作品も セットで持参しつつ
ビジュアルプログラミングつながりの話 試作中でも見せ方によって
ある程度の段階でも 楽しめるコンテンツに
終わり!