Tweet
Tweet

Slide 1

Slide 1 text

2023年11月26日 (日) p5.js勉強会（第九回） @オンライン 豊田陽介（ ） @youtoy p5.js・p5playを使った体験イベントに参加した子達が 手を動かすこと・考えることを楽しんでくれた話

Slide 2

Slide 2 text

自己紹介 豊田陽介（ ） @youtoy ・IT系イベント主催、登壇や運営なども ・モノ作り系のイベントに作品出展 ・機械学習・IoTの書籍を出版 ・ワークショップ講師（大人／子ども向け） ・ Microsoft MVP（2021/10 から） プライベートでの活動 IoT工作の本 （共著） 機械学習の本 （単著）

Slide 3

Slide 3 text

p5.jsとの関わりや 自分が普段作っているもの ● p5.js の利用は 2021年の1月か2月くらいから ● 動きがある、インタラクション系のものが好き ● どちらかというと「変化球」みたいな方向性 ● 物理世界とつなぐ、AI・機械学習を絡めたものも

Slide 4

Slide 4 text

p5.jsとAI・機械学習を組み合わせた作品事例 光学迷彩・透明マントを 体験できるWebアプリ （ブラウザで動く）

Slide 5

Slide 5 text

p5.jsの描画を擬似ホログラムで投影する ダイソーで買った 透明な下敷きで工作で ペッパーズ・ゴースト iPadでp5.jsの描画を

Slide 6

Slide 6 text

IoTの仕組みで2つの画面を仮想的につなぐ 2台のスマホの別々の キャンバスが仮想的に つながって見える （つながり方が縦 or 横 　で動的に変わる）

Slide 7

Slide 7 text

p5.jsを使って 「楽しい！」と思うことをやる

Slide 8

Slide 8 text

技術で楽しいことをする 未来の仲間を増やしたい！

Slide 9

Slide 9 text

IT系技術を使わない方向でも 楽しい体験を提供したい！ （少し余談的な話）

Slide 10

Slide 10 text

子ども向けの活動：ワークショップ・ショーなど 工作ワークショップ マジック・バルーンアート・科学実験ショー くらき永田保育園 公式ブログより： 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/

Slide 11

Slide 11 text

2023年11月26日 (日) p5.js勉強会（第九回） @オンライン 豊田陽介（ ） @youtoy p5.js・p5playを使った体験イベントに参加した子達が 手を動かすこと・考えることを楽しんでくれた話

Slide 12

Slide 12 text

体験イベント ↓ 「子どもプログラミング喫茶」 というワークショップ

Slide 13

Slide 13 text

子どもプログラミング喫茶とは？ ●子どもプログラミング喫茶　https://pgmsaloon4kids.github.io/ ●子ども向けプログラミング体験 　を喫茶店メニューのように ●注文されたメニューの体験を 　スタッフがお手伝い ●体験時間は15－20分 ●プログラミングが初めてでも 　大歓迎！

Slide 14

Slide 14 text

子どもプログラミング喫茶とは？ ●子どもプログラミング喫茶　https://pgmsaloon4kids.github.io/ 東京だと「メーカーフェア東京」というモノ作り系イベントの中で実施 （2022年はハイブリッドでも実施、たくさんの子が体験）

Slide 15

Slide 15 text

子どもプログラミング喫茶のメニュー 喫茶メニューの表紙 メニューの中身 p5.js： ボール転がしゲームであそぼう

Slide 16

Slide 16 text

手を動かすこと・考えることを 楽しんでくれた？

Slide 17

Slide 17 text

子ども達が体験後に書いてくれた内容とその時の様子

Slide 18

Slide 18 text

何をやったか？ （ボール転がしゲームであそぼうとは？）

Slide 19

Slide 19 text

体験メニューの1つのデフォルト動作 ●p5.jsとp5playの組み合わせ ●物理演算エンジンを利用 ●ボールをうまくゴールさせる

Slide 20

Slide 20 text

ゼロから 内容を作った流れ

Slide 21

Slide 21 text

事前準備の流れ： 制約条件 ●自分以外のスタッフも対応することを考慮する 　必要あり（JavaScriptに詳しいとは限らない） ●体験する子のレベル感は、過去の経験上、PCを 　触るのが初めての子も（キーボード、マウスを 　使ったことがないなど） ●上記の子が体験ができ、ある程度プログラミングを 　知っている子も楽しめると良い

Slide 22

Slide 22 text

コンテンツのぼやっとした仕様 ●アルファベットのタイピングを必須にしない ●プログラムを書いて付け足すのは厳しい 　＝ 書きかえをメインにする ●PCを触ったことがない子でも、何が起こるかが 　分かりやすい内容にする

Slide 23

Slide 23 text

そのころに遊んでいたもの：p5playの物理演算エンジン ●p5playの物理演算エンジン ⇒ 以前使った「Matter.js」や 「p5-matter 」よりシンプル

Slide 24

Slide 24 text

物理演算エンジンの動きが心地よく現象がわかりやすい まずはベースにできそうなもの を手を動かしながら考える （シンプルな内容で検討）

Slide 25

Slide 25 text

内容を明確化していく ●アルファベットのタイピングを必須にしない ●書きかえをメインにする 　⇒ パラメータとなる数字の変更 ●PCを触ったことがない子でも、何が起こるかが 　分かりやすい内容にする 　⇒ 物理現象と数値の大小に紐付く現象の変化 ＋「何かうまくいかないものを、うまくゴール 　　させる」というパズルゲーム的進行

Slide 26

Slide 26 text

さらにあれこれ対応したこと

Slide 27

Slide 27 text

子ども達にどう対応するか？ ●導入 ●一方通行にならないようにする（問いかけ等） ●盛り上げる・緊張を緩和する（何らか会話を 　続けてみる、わざと極端な変更をしてもらう等） ●話し方を明るく、気持ちテンション高め

Slide 28

Slide 28 text

運用面の対応 ●現地で初めてセットアップ開始という状況で 　オフライン対応も可能な環境を整える ●ソースコードをスタッフ側や自分が分かりやすい 　ようにする ●その他いろいろ...

Slide 29

Slide 29 text

大変だったけど とても貴重な経験ができた！

Slide 30

Slide 30 text

終わり！

Slide 31

Slide 31 text

発表後に追加したページ

Slide 32

Slide 32 text

イベント用に自分が用意して使ったコンテンツ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）床になっている 　部分のパラメータ 　も変える