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
160
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you(@youtoy)
PRO
November 26, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
33
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
83
ブラウザで 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
94
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
610
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
2.4k
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
5k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
1
2.6k
Other Decks in Technology
See All in Technology
OpenID Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
460
Goで作って学ぶWebSocket
ryuichi1208
3
2.4k
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
190
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
120
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
250
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
150
CDKのコードを書く環境を作りました with Amazon Q
nobuhitomorioka
1
130
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
160
遷移の高速化 ヤフートップの試行錯誤
narirou
3
680
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
530
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
870
日経のデータベース事業とElasticsearch
hinatades
PRO
0
190
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Producing Creativity
orderedlist
PRO
344
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
420
Automating Front-end Workflow
addyosmani
1368
200k
The Invisible Side of Design
smashingmag
299
50k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Embracing the Ebb and Flow
colly
84
4.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
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)床になっている 部分のパラメータ も変える