p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会（第九回） / 20231126

Transcript

1. 2023年11月26日 (日) p5.js勉強会（第九回） @オンライン 豊田陽介（ ） @youtoy p5.js・p5playを使った体験イベントに参加した子達が 手を動かすこと・考えることを楽しんでくれた話
2. 自己紹介 豊田陽介（ ） @youtoy ・IT系イベント主催、登壇や運営なども ・モノ作り系のイベントに作品出展 ・機械学習・IoTの書籍を出版 ・ワークショップ講師（大人／子ども向け） ・ Microsoft MVP（2021/10 から） プライベートでの活動 IoT工作の本 （共著） 機械学習の本 （単著）
3. p5.jsとの関わりや 自分が普段作っているもの • p5.js の利用は 2021年の1月か2月くらいから • 動きがある、インタラクション系のものが好き • どちらかというと「変化球」みたいな方向性 • 物理世界とつなぐ、AI・機械学習を絡めたものも
4. p5.jsとAI・機械学習を組み合わせた作品事例 光学迷彩・透明マントを 体験できるWebアプリ （ブラウザで動く）
5. p5.jsの描画を擬似ホログラムで投影する ダイソーで買った 透明な下敷きで工作で ペッパーズ・ゴースト iPadでp5.jsの描画を
6. IoTの仕組みで2つの画面を仮想的につなぐ 2台のスマホの別々の キャンバスが仮想的に つながって見える （つながり方が縦 or 横 　で動的に変わる）
7. p5.jsを使って 「楽しい！」と思うことをやる
8. 技術で楽しいことをする 未来の仲間を増やしたい！
9. IT系技術を使わない方向でも 楽しい体験を提供したい！ （少し余談的な話）
10. 子ども向けの活動：ワークショップ・ショーなど 工作ワークショップ マジック・バルーンアート・科学実験ショー くらき永田保育園 公式ブログより： 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/
11. 2023年11月26日 (日) p5.js勉強会（第九回） @オンライン 豊田陽介（ ） @youtoy p5.js・p5playを使った体験イベントに参加した子達が 手を動かすこと・考えることを楽しんでくれた話
12. 体験イベント ↓ 「子どもプログラミング喫茶」 というワークショップ
13. 子どもプログラミング喫茶とは？ •子どもプログラミング喫茶　https://pgmsaloon4kids.github.io/ •子ども向けプログラミング体験 　を喫茶店メニューのように •注文されたメニューの体験を 　スタッフがお手伝い •体験時間は15－20分 •プログラミングが初めてでも 　大歓迎！
14. 子どもプログラミング喫茶とは？ •子どもプログラミング喫茶　https://pgmsaloon4kids.github.io/ 東京だと「メーカーフェア東京」というモノ作り系イベントの中で実施 （2022年はハイブリッドでも実施、たくさんの子が体験）
15. 子どもプログラミング喫茶のメニュー 喫茶メニューの表紙 メニューの中身 p5.js： ボール転がしゲームであそぼう
16. 手を動かすこと・考えることを 楽しんでくれた？
17. 子ども達が体験後に書いてくれた内容とその時の様子
18. 何をやったか？ （ボール転がしゲームであそぼうとは？）
19. 体験メニューの1つのデフォルト動作 •p5.jsとp5playの組み合わせ •物理演算エンジンを利用 •ボールをうまくゴールさせる
20. ゼロから 内容を作った流れ
21. 事前準備の流れ： 制約条件 •自分以外のスタッフも対応することを考慮する 　必要あり（JavaScriptに詳しいとは限らない） •体験する子のレベル感は、過去の経験上、PCを 　触るのが初めての子も（キーボード、マウスを 　使ったことがないなど） •上記の子が体験ができ、ある程度プログラミングを 　知っている子も楽しめると良い
22. コンテンツのぼやっとした仕様 •アルファベットのタイピングを必須にしない •プログラムを書いて付け足すのは厳しい 　＝ 書きかえをメインにする •PCを触ったことがない子でも、何が起こるかが 　分かりやすい内容にする
23. そのころに遊んでいたもの：p5playの物理演算エンジン •p5playの物理演算エンジン ⇒ 以前使った「Matter.js」や 「p5-matter 」よりシンプル
24. 物理演算エンジンの動きが心地よく現象がわかりやすい まずはベースにできそうなもの を手を動かしながら考える （シンプルな内容で検討）
25. 内容を明確化していく •アルファベットのタイピングを必須にしない •書きかえをメインにする 　⇒ パラメータとなる数字の変更 •PCを触ったことがない子でも、何が起こるかが 　分かりやすい内容にする 　⇒ 物理現象と数値の大小に紐付く現象の変化 ＋「何かうまくいかないものを、うまくゴール 　　させる」というパズルゲーム的進行
26. さらにあれこれ対応したこと
27. 子ども達にどう対応するか？ •導入 •一方通行にならないようにする（問いかけ等） •盛り上げる・緊張を緩和する（何らか会話を 　続けてみる、わざと極端な変更をしてもらう等） •話し方を明るく、気持ちテンション高め
28. 運用面の対応 •現地で初めてセットアップ開始という状況で 　オフライン対応も可能な環境を整える •ソースコードをスタッフ側や自分が分かりやすい 　ようにする •その他いろいろ...
29. 大変だったけど とても貴重な経験ができた！
30. 終わり！
31. 発表後に追加したページ
32. イベント用に自分が用意して使ったコンテンツ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）床になっている 　部分のパラメータ 　も変える