Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

you(@youtoy)

November 26, 2023
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. IT系技術を使わない方向でも
    楽しい体験を提供したい!
    (少し余談的な話)

    View full-size slide

  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/

    View full-size slide

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

    View full-size slide

  12. 体験イベント

    「子どもプログラミング喫茶」
    というワークショップ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 何をやったか?
    (ボール転がしゲームであそぼうとは?)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. 終わり!

    View full-size slide

  31. 発表後に追加したページ

    View full-size slide

  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)床になっている
     部分のパラメータ
     も変える

    View full-size slide