見出し画像

ビスケットで花火をプログラミングしよう

ビスケットファシリテーターの利根川です。

オンライン×ビスケット バーチャル花火大会をしよう!にたくさんの反響をいただき、嬉しい限りです。

花火っぽい作品をプログラミングするって、どう作るの?

という声にお応えしまして。
あまりプログラムの中身をnoteではお伝えしていないのですが、、、
最後に載せます

私がビスケットのプログラミングテクニック(メガネの中身)をあまり公表していかないのは、自分自身が「ゼロから生み出す」ことが苦手だからです。

プログラマーだったころ、人のプログラムを解読、コピペ、改変みたいなことをしていました。

これからの世界を担う子どもたちには、コピペじゃなくて、『自分で生み出す楽しさ』を知ってもらいたいです。

ちょっと長くなりますが、どこを学べば「バーチャル花火」の基礎がわかるのか説明していくので、共感してくださる方は順に読んでくださるとうれしいです。

夏が終わる前に、今すぐ!つくり方知りたい!という方は目次の最後をご覧ください。

動く模様の作り方

ビスケットの基本的な使い方は、ビスケットの公式サイトで無料でどなたでも入手できます。PDFで配布されていますので、必要なファイルをダウンロードしましょう。

上記リンクの

4 動く模様

の進行手順書をダウンロードします。
まずはその手順通りに制作してみましょう。

①回転の練習

ビスケットのメガネを使って、部品(絵)を回す方法を学びます。

公開されている資料と、回転命令の時の目安が変わっているので注意してください。

スクリーンショット (33)

回転ボタンを押して、出てきて・・・の大きな・をずらすと、回転させることができます。

うまく風車を回せたら、(✕)を押して(→)へ進みます。

ここでのポイントは、「左右の絵を同じ場所に置く」です。
中心が揃うと、(+)のガイドが表示されますので、それを参考にしてくださいね。

②動く模様の基本

マニュアルの手順に従って、左向き◁を描きます。
とりあえずマニュアルに従ってつくってみましょう。

1.◁の後ろに|がでてくる
2.|が下にさがる
3.|を回してみる
4.|を描き直してみる

ですね。

このマニュアルの手順通りに授業をするだけでも、子どもたちのテンション爆上がりです!!

③応用

マニュアルの最後のページが、応用です。

そこに、なんとなく丸い感じの図が載っています。

花火の元はここにあります。

5.◁を回す

この手順で丸い形をした素敵な模様が描けるはずです。

丸い形のきれいな模様を描く

ビスケット開発者の原田ハカセのブログです。

開発者自ら、きれいな模様の描き方を解説してくださっています。

わたしも、たくさんの子どもたちと素敵な模様を制作しました。
ビスケット授業のパイオニアである林先生は、図工の授業でこの素敵な模様を作っています。

一番きれいなタイミングで模様の増殖を止める(真ん中の回す部品をタップしたら、消える)プログラムを追加して、それをスクリーンショットで撮影しプリントアウトしたものを掲示されたそうです。

それも、めちゃくちゃ素敵✨です!!

そして、最後に「より、花火っぽい」作品の作り方です。

花火ですから、背景は黒がいいですね。
学校でビスケット3をつかう場合は、以下を参照してください。

ビスケットで花火をつくろう!

スクリーンショット (36)

手順1:背景を黒に

他の人の作品と一緒に打ち上げたい場合は、↑のリンク「学校でビスケット3deバーチャル花火大会をしよう!」をたどってくださいね。

オンライン×ビスケット の授業では、児童は自分の出席番号をはじめに描きました。大人が練習するには、「↑(矢印)」がオススメです。

スクリーンショット (37)

手順2:真ん中で回す部品を描く

黒に対して、目立つ色で矢印を描きましょう。

手順3:ステージの真ん中に、一つ置く

手順4:メガネで回転させる

スクリーンショット (38)

メガネを1つ出し、左、右の順でメガネに部品を置き、(+)ガイドを確認して同じ位置に置いていることを確認しましょう。

画面右側のメニュー、一番下のボタンが「回転ボタン」です。

スクリーンショット (39)

クリックすると、回転ボタンが凹みます。

点線ガイドをずらすと、中心がそろったまま部品を回転させることができます。

手順5:花火のパーツを描く

できるだけシンプルな図がよいです。
色は透明の薄い色を選びます。

スクリーンショット (41)

薄くて見えにくいですが、こんなただの棒でよいです。
尼崎の林せんせいのおすすめは透明の部品3つくらいだそうです。

いろいろな色をつかって、部品を3つ描きましょう。

手順6:作った部品を、右のメガネに入れる

スクリーンショット (42)

薄い色の部品や白に近いものがメガネの中に入ると、メガネの色が灰色に変わります。見えやすくするための配慮ですので気になさらず。

作った部品を適当に、メガネの右側に入れると、円形の素敵な模様ができあがってきます。

手順7:部品をうごかしてみる

透明部品を「より、花火っぽく」動かしてみましょう。

・ピンクの棒が上に進む

スクリーンショット (44)

・黄色の棒は回る

スクリーンショット (45)

だんだん、花火っぽくなってきました。

オンライン×ビスケット「バーチャル花火大会をしよう!」の授業の中で、林せんせいも

コンピューターは、
 〇くりかえし が得意
 〇正確 に並べることができる
 〇やりなおし 何度でもやり直せる

ということをおっしゃっていましたね。

ちょっとづつ調整してみて、素敵な花火作品をつくってくださいね。


おまけ。

真ん中の矢印が、花火っぽさを邪魔している?と思ったら、最後に真ん中のパーツを目立たない色で描き直してみましょう。(たとえば黒い・とか)

本物の花火大会は中止が相次いでいますが、バーチャル花火大会はいつでも、どこでも開催できますよ!

みなさんのコンピューターでも素敵な花火が舞いますように。

サポートいただけると、やる気がでます(*´▽`*) お役にたてたら、「スキ」と「サポート」とシェアしてもらえたら大感激!! ICTの日常化に向けて、大人ができること。