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
0
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
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
180
本当のAWS基礎
toru_kubota
0
540
アクセス制御にまつわる改善 / Improving access control
itkq
0
560
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
300
Janus
bkuhlmann
1
490
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
3
560
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
170
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
380
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
2
180
競技としてのKaggle、役に立つKaggle
yu4u
5
2k
ルーターでプレゼンする
puhitaku
0
870
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Visualization
eitanlees
136
14k
It's Worth the Effort
3n
180
27k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Done Done
chrislema
178
15k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Designing the Hi-DPI Web
ddemaree
276
33k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Designing with Data
zakiwarfel
96
4.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
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)床になっている 部分のパラメータ も変える