【CoderDojo 2022】漫画で使われるエフェクトの「集中線」を Scratch で作って CoderDojo の活動でデモした時のちょっとした気づき

はじめに

この記事は、Adventar というサービスで作成されたカレンダーである「CoderDojo Advent Calendar 2022」の 4日目の記事です。
（4日目は、この記事と別に こちらの一人アドベントカレンダー用のものも 1つ書いた ⇒ [続・OpenAI の ChatGPT のネタ：JavaScript の特定の技術仕様を教えてもらう - Qiita）

この記事の内容

少し補足： CoderDojo関連の話

自分のサポーター参加

子ども達がプログラミングをする場を提供する世界的な活動（※ アイルランド発のもの）で、CoderDojo というものがあり、その活動にサポーターとして参加しています。

↓オンラインで名古屋の Dojo に参加した時のもの。

ツイート の URL

↓小机・御茶ノ水・末広町の Dojo にオフラインで参加した時のもの

日本国内の Dojo の数

現在、日本国内でも 200箇所以上で実施されており（※ 以下のツイート参照）、その中の多数の Dojo に参加しています（オフラインだと東京・神奈川・埼玉にあるもので、オンラインでは東北や九州、四国などさらにいろいろなところで）。

漫画で使われるエフェクトの「集中線」を Scratch で作ったもの

CoderDojo の活動の中でデモした「漫画で使われるエフェクトの 集中線 を Scratch で作ったもの」というのはこちらです。

仕組みとしては、マウスカーソルを画面内で移動させ、マウスをクリックすると、クリックした際のマウスカーソルの位置を起点とした集中線を描画する、というものです。
もともと、p5.js で実装してみていて（以下のツイートのもの）、その際に「これは Scratch のペンの拡張機能を使って、似たものを作れるのでは？」と思って、試しに作ってみたものでした。

プログラムで使ったブロック数というか、規模感はこんな感じでした。

そういえば、これらの実装について記事などかけてないので、あらためてその辺りは記事にしたいところ...

デモした時の気づき

CoderDojo武蔵小杉の 11/13 の回に参加した際、この作品のデモをやったのですが、そこで気づきがあったので、少しメモしておこうと思います。

デモとしては、上記のツイートでも掲載していたような集中線が表示される動作を、PC の画面を直接見てもらう形でやっていました。
そして、ノートPC の画面を見てもらう形でやったので、子ども達が立って見る位置によっては、この Scratch内のカメラ映像にうつりこむことがありました。そこで、その映りこんだ子ども達にも集中線を出してみたりもしました。

そうすると、とある子が、この「自分に合うようにでてくる集中線を避ける」という行動をとったり、「画面内に入ってきて、集中線を出そうとしたタイミングでぱっと画面外に出る（⇒ そして、また画面内に戻ってくる）」ということをやって楽しんでいました。
普段作る作品で、意図的に第三者とのインタラクションをする意図で作った作品は、誰かとやりとりしながら使うということをやっていますが、単に画面にエフェクトを出すだけの作品というつもりで作ったものは、「それを使って第三者とのインタラクションを楽しむ」ということを思いつけていませんでした。

この話に関して、単純に見た目のエフェクトを出すアプリが、そのままでも誰かとのインタラクションを楽しむという活用法があったり、さらには何かゲームのような要素をとり入れた仕組みに変えることもできそうかなとも思ったり、自分としては気づきを得られた事例でした。
（あと、上記のやりとりをしていた子が、ものすごくはしゃいで楽しそうにやってくれてたのが、嬉しくてさらに何か作っていこうという強いモチベーションにもなりました）

終わりに

気になった技術やガジェットをとりあえず触ってみる、思いついたことをとりあえず作ってみる、ということをいろいろ普段やっています。その中で、作ったものを楽しんでもらう方法という点で、今回は気づきが得られました。

今回の出来事について、自分が当初は発想してなかった使い方ができないかという観点を持ちたいなと思ったりしつつ、また作ったものは誰かに見てもらって反応をもらうことが重要だなと思わされました。

余談

上記で、p5.js で作ってみたものを Scratch でもやってみた、という話が出てきていました。
それについて、別の事例でやったものや、逆に Scratch　で作ったものを p5.js　で実装した、という話もあるので、いくつかそういったものを掲載してみようと思います。

機械学習との組み合わせ： p5.js ⇒ Scratch（※ 正確には、Scratch に独自拡張機能を加えた Stretch3 というものを利用）

パーティクル： p5.js ⇒ Scratch

アート系の内容： p5.js ⇒ Scratc

アート系の内容：Scratch ⇒ p5.js