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
170
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you(@youtoy)
PRO
November 26, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
40
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
39
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
93
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
210
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.5k
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
110
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
650
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.2k
Other Decks in Technology
See All in Technology
50人の組織でAIエージェントを使う文化を作るためには / How to Create a Culture of Using AI Agents in a 50-Person Organization
yuitosato
6
3.4k
生成AIによるCloud Native基盤構築の可能性と実践的ガードレールの敷設について
nwiizo
3
190
はじめてのSDET / My first challenge as a SDET
bun913
1
240
クォータ監視、AWS Organizations環境でも楽勝です✌️
iwamot
PRO
1
280
AWSのマルチアカウント管理 ベストプラクティス最新版 2025 / Multi-Account management on AWS best practice 2025
ohmura
4
270
SDカードフォレンジック
su3158
1
590
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
110
大AI時代で輝くために今こそドメインにディープダイブしよう / Deep Dive into Domain in AI-Agent-Era
yuitosato
1
350
LangfuseでAIエージェントの 可観測性を高めよう!/Enhancing AI Agent Observability with Langfuse!
jnymyk
1
210
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
1
130
Devinで模索する AIファースト開発〜ゼロベースから始めるDevOpsの進化〜
potix2
PRO
7
3.3k
AWS全冠芸人が見た世界 ~資格取得より大切なこと~
masakiokuda
5
5.7k
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Cult of Friendly URLs
andyhume
78
6.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Docker and Python
trallard
44
3.3k
Being A Developer After 40
akosma
91
590k
Typedesign – Prime Four
hannesfritz
41
2.6k
Optimizing for Happiness
mojombo
377
70k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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)床になっている 部分のパラメータ も変える