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を使った体験イベントに参加した子達が手を動かすこと・考えることを楽しん...
Search
you(@youtoy)
PRO
November 26, 2023
Technology
0
180
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you(@youtoy)
PRO
November 26, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
57
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
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
240
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile for engineer
hr01
1
34k
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
240
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
3
1.2k
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.1k
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.7k
OPENLOGI Company Profile
hr01
0
67k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
6.8k
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
230
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.3k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
170
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
14k
It's Worth the Effort
3n
185
28k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
For a Future-Friendly Web
brad_frost
179
9.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Code Reviewing Like a Champion
maltzj
524
40k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.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)床になっている 部分のパラメータ も変える