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
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
Search
you(@youtoy)
PRO
November 26, 2023
Technology
0
53
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you(@youtoy)
PRO
November 26, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
48
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
120
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
1.6k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
170
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.4k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
2
2.1k
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.3k
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / #ヒーローズリーグ 2023 予選 in 第二部
you
PRO
0
96
ハッカソンでWebの技術を使った作品を作ってみた 〜ブラウザで機械学習やデバイス制御など〜 / HTML5 9th Anniversary
you
PRO
0
110
Other Decks in Technology
See All in Technology
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
400
On Your Data を超えていく!
hirotomotaguchi
2
710
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
260
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.7k
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
200
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
120
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
130
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
130
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
640
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Rails Girls Zürich Keynote
gr2m
91
13k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
BBQ
matthewcrist
80
8.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Debugging Ruby Performance
tmm1
70
11k
We Have a Design System, Now What?
morganepeng
43
6.8k
4 Signs Your Business is Dying
shpigford
175
21k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Infographics Made Easy
chrislema
238
18k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Transcript
2023年11月26日 (日) p5.js勉強会(第九回) @オンライン 豊田陽介( ) @youtoy p5.js・p5playを使った体験イベントに参加した子達が 手を動かすこと・考えることを楽しんでくれた話
自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・モノ作り系のイベントに作品出展 ・機械学習・IoTの書籍を出版 ・ワークショップ講師(大人/子ども向け) ・ Microsoft
MVP(2021/10 から) プライベートでの活動 IoT工作の本 (共著) 機械学習の本 (単著)
p5.jsとの関わりや 自分が普段作っているもの • p5.js の利用は 2021年の1月か2月くらいから • 動きがある、インタラクション系のものが好き • どちらかというと「変化球」みたいな方向性
• 物理世界とつなぐ、AI・機械学習を絡めたものも
p5.jsとAI・機械学習を組み合わせた作品事例 光学迷彩・透明マントを 体験できるWebアプリ (ブラウザで動く)
p5.jsの描画を擬似ホログラムで投影する ダイソーで買った 透明な下敷きで工作で ペッパーズ・ゴースト iPadでp5.jsの描画を
IoTの仕組みで2つの画面を仮想的につなぐ 2台のスマホの別々の キャンバスが仮想的に つながって見える (つながり方が縦 or 横 で動的に変わる)
p5.jsを使って 「楽しい!」と思うことをやる
技術で楽しいことをする 未来の仲間を増やしたい!
IT系技術を使わない方向でも 楽しい体験を提供したい! (少し余談的な話)
子ども向けの活動:ワークショップ・ショーなど 工作ワークショップ マジック・バルーンアート・科学実験ショー くらき永田保育園 公式ブログより: https://www.kurakids.ed.jp/2022/12/28/%E4%BB%8A%E5%B9%B4%E3%82%82%E3%81%82%E3%82%8A%E3%81%8C%E3%81%A8%E3%81%86%E3%81%94 %E3%81%96%E3%81%84%E3%81%BE%E3%81%97%E3%81%9F%EF%BC%81/
2023年11月26日 (日) p5.js勉強会(第九回) @オンライン 豊田陽介( ) @youtoy p5.js・p5playを使った体験イベントに参加した子達が 手を動かすこと・考えることを楽しんでくれた話
体験イベント ↓ 「子どもプログラミング喫茶」 というワークショップ
子どもプログラミング喫茶とは? •子どもプログラミング喫茶 https://pgmsaloon4kids.github.io/ •子ども向けプログラミング体験 を喫茶店メニューのように •注文されたメニューの体験を スタッフがお手伝い •体験時間は15-20分 •プログラミングが初めてでも 大歓迎!
子どもプログラミング喫茶とは? •子どもプログラミング喫茶 https://pgmsaloon4kids.github.io/ 東京だと「メーカーフェア東京」というモノ作り系イベントの中で実施 (2022年はハイブリッドでも実施、たくさんの子が体験)
子どもプログラミング喫茶のメニュー 喫茶メニューの表紙 メニューの中身 p5.js: ボール転がしゲームであそぼう
手を動かすこと・考えることを 楽しんでくれた?
子ども達が体験後に書いてくれた内容とその時の様子
何をやったか? (ボール転がしゲームであそぼうとは?)
体験メニューの1つのデフォルト動作 •p5.jsとp5playの組み合わせ •物理演算エンジンを利用 •ボールをうまくゴールさせる
ゼロから 内容を作った流れ
事前準備の流れ: 制約条件 •自分以外のスタッフも対応することを考慮する 必要あり(JavaScriptに詳しいとは限らない) •体験する子のレベル感は、過去の経験上、PCを 触るのが初めての子も(キーボード、マウスを 使ったことがないなど) •上記の子が体験ができ、ある程度プログラミングを 知っている子も楽しめると良い
コンテンツのぼやっとした仕様 •アルファベットのタイピングを必須にしない •プログラムを書いて付け足すのは厳しい = 書きかえをメインにする •PCを触ったことがない子でも、何が起こるかが 分かりやすい内容にする
そのころに遊んでいたもの:p5playの物理演算エンジン •p5playの物理演算エンジン ⇒ 以前使った「Matter.js」や 「p5-matter 」よりシンプル
物理演算エンジンの動きが心地よく現象がわかりやすい まずはベースにできそうなもの を手を動かしながら考える (シンプルな内容で検討)
内容を明確化していく •アルファベットのタイピングを必須にしない •書きかえをメインにする ⇒ パラメータとなる数字の変更 •PCを触ったことがない子でも、何が起こるかが 分かりやすい内容にする ⇒ 物理現象と数値の大小に紐付く現象の変化 +「何かうまくいかないものを、うまくゴール
させる」というパズルゲーム的進行
さらにあれこれ対応したこと
子ども達にどう対応するか? •導入 •一方通行にならないようにする(問いかけ等) •盛り上げる・緊張を緩和する(何らか会話を 続けてみる、わざと極端な変更をしてもらう等) •話し方を明るく、気持ちテンション高め
運用面の対応 •現地で初めてセットアップ開始という状況で オフライン対応も可能な環境を整える •ソースコードをスタッフ側や自分が分かりやすい ようにする •その他いろいろ...
大変だったけど とても貴重な経験ができた!
終わり!
発表後に追加したページ
イベント用に自分が用意して使ったコンテンツ2つ 1)•p5.js Web Editor | 【#MFTokyo2023】p5play:ボール転がしゲーム【手順1・2】 https://editor.p5js.org/toyota_ref/sketches/hbjItVJn3 2)•p5.js Web Editor
| 【#MFTokyo2023】p5play:ボール転がしゲーム【手順3】 https://editor.p5js.org/toyota_ref/sketches/Z6p4rB6ut 1)ボール関連の パラメータを 主に変える 2)床になっている 部分のパラメータ も変える