いろラボブログ

ビジュアルプロミング言語「Viscuit(ビスケット)」の使い方、プログラミング作品やゲーム、プログラミング教育のアイデアなどを掲載していきます。

『オリジナル天の川をつくろう!』ビスケット基本技マスターへの道!②動いたら…ふえる

f:id:koba1426:20190704104854p:image

Viscuit(ビスケット)のプログラミングテクニックを楽しく学べる

「ビスケットプログラミング・基本技マスターへの道!」

 

今日しょうかいする技は、

テクニックその②「動いたら…ふえる」です!

 

たんじゅんな技ですが、おくぶかいですよ〜

 

それでははじめましょう。プログラミングテーマは、

七夕🎋にちなんで

「オリジナル天の川をつくろう!」

です!

絵をかくのが苦手でも、すごいプログラムができますよ〜

(授業やワークショップのネタとしても、おススメです)

 

 

じゅんび  Viscuit(ビスケット)アプリを開く

f:id:koba1426:20190706141217j:image

「Viscuit(ビスケット)」のアプリをひらいて…

①「ひとりでつくる」をえらんで、

黒色のへやをえらんで、

③「えんぴつ」ボタンをおしてください。

 

ステップ1  絵をかこう!

今日つかう絵はたったの2つ

かなりてきとうにかいてもだいじょうぶです。

「スター」

f:id:koba1426:20190706141300p:image

「2色のてんてん」

f:id:koba1426:20190706141314p:image

⬆︎じつは、これが「ほしくず」になります。

めっちゃてきとうな てんてんでOKです!

 

ステップ2  「スターをうごかそう!」

はい、問題です!

クイズ①

「スターを左下にうごかす」には、どうすればいいでしょう?

 

 

 

 

これはもう、らくしょうで分かりますよね。

 

 

 

まずスターをだして、

f:id:koba1426:20190706141821j:image

こういうメガネつくればいいですね。

f:id:koba1426:20190706142654j:image

f:id:koba1426:20190706142718j:image

スターは左下にうごく



メガネつくったら、左下にうごいた〜〜〜〜

f:id:koba1426:20190706142920j:image

 

 

ステップ2  「ほしくずをたくさんふやそう!」

クイズ②  

今つくったメガネの右のへやに、

2色のてんてんを入れると、どうなるでしょうか?

 

やってみて、たしかめましょう!

こんなふうにしてみてください。

f:id:koba1426:20190706144450j:image
 (⬆︎の画像、ちょっとわかりにくいけど、この場所にてんてんおきましょう)

 

うまくいくと、こんなふうになります!

f:id:koba1426:20190706144344j:image

てきとうなてんてんが、ほしくずをあつめた天の川に!

f:id:koba1426:20190706144530p:image

じつは、これが今日の技

「動いたら…ふえる」

です!

f:id:koba1426:20190706145243j:image

スターは左下にうごき、ほしくずがふえる

 

ワンポイント メガネのひみつ

メガネには、実はあらかじめ「ずっと繰り返す」命令が組み込まれています。

なので「動いたら…ふえる」という命令が

1つのメガネだけで、こんなにも簡単につくれちゃうのです。

 

メガネの仕組みをもっと詳しく知りたい方は、開発者・原田はかせのブログをご覧ください!

ビスケット開発室「ViscuitとScratchの違い」

https://devroom.viscuit.com/2019/03/03/post-1735/

 

 

ステップ3  「ほしくずをうごかそう!」

クイズ③

ほしくず(2色のてんてん)を、

メガネで色んな方向にうごかしたらどうなるでしょうか?

やってみてたしかめよう!

 

こんなメガネをつくってみましょう。

これは、「ほしくずは下にうごく」
f:id:koba1426:20190706151246j:image

メガネをつくって、しばらく見てみると…
f:id:koba1426:20190706151226p:image
f:id:koba1426:20190706151233j:image

f:id:koba1426:20190706151904p:image

⬆︎さっきとちょっとちがいますね〜

 

今度は、「ほしくずは左上にうごく」
f:id:koba1426:20190706151230j:image
f:id:koba1426:20190706151239p:image
f:id:koba1426:20190706151236p:image

ちょっとのちがいで、

できる天の川のもようがぜんぜんちがう!

おもしろいですね〜!

 

ステップ4  「ほしくずをかいてんさせよう!」

クイズ④

ほしくずを、

メガネでかいてんさせると、どうなるでしょうか?

やってみよう!

 

 

これまたうすくて、画像見にくいのですが…

まず、いったんメガネの外にほしくずを出して、

f:id:koba1426:20190707122827j:image

「かいてんボタン」をおします。
f:id:koba1426:20190707122419j:image

こんなてんせんが出ますので、
f:id:koba1426:20190707123128j:image

まんなかの黒いてんを、ちょっとうごかします。

f:id:koba1426:20190707140235j:image

⬆︎そしたら絵がかいてんします。(わかりにくいけど)

 

そして、またさっきのメガネの右のへやにもどしましょう。

f:id:koba1426:20190707122843j:image

すると…

f:id:koba1426:20190707123409p:image

ほしくずが、全部かいてんして

またちがうふんいきの天の川に!
f:id:koba1426:20190707123413p:image

⬆︎あとでうごいているところも、ぜひ見てください。

 

ステップ5  スターもかいてんさせてみよう!

クイズ⑤

スターをかいてんさせると、どうなるでしょうか?

さいしょのメガネを、少しかえてみましょう。

 

ここのスターを、かいてんさせてみましょう。

どういうふうにかわるかな?

f:id:koba1426:20190707130054j:image

 

おまけにせっていボタンをおすと、

はいけいの色もかえることができるよ!

f:id:koba1426:20190707125336j:image

ここをさわると、すきな色にできます。
f:id:koba1426:20190707125333j:image

 

お気に入りの色で、七夕の夜空をつくろう!

f:id:koba1426:20190707125505p:image

 

もっとやってみよう!

てんてんのほしくずを、ちがう絵にもかえてみよう!

f:id:koba1426:20190707125602j:image

出てくる「えんぴつボタン」をおしたら、

ほしくずの絵をちがう絵にかきなおせます。

f:id:koba1426:20190707130242j:image

 

たとえば、ぼうせんにしてみて、

f:id:koba1426:20190707130410p:image

絵がかわりました!
f:id:koba1426:20190707130406p:image

f:id:koba1426:20190707192432j:image

 

こんな×もいいかも?
f:id:koba1426:20190707130419p:image

 

こんなかんたんな絵でも、

いがいとすごいのができますのでいろいろためしてみましょう!

 

つくりかたを動画で見てみよう

つくりかたを動画でかくにんしてみよう!

さいごには、おまけもあるよ!

youtu.be

きょうのプログラムは、こちらからViscuitアプリでひらけます!

https://develop.viscuit.com/env/view.html?control=edit%3A06511873%3A007%2F2019-0312-2035%2F1-8%2F002.json%3A1-8%3A

viscuit
viscuit
開発元:Digital Pocket Limited Liability Company

まとめ  テクニック②「動いたら…ふえる」

今回は、メガネ2つだけでもできる

なかなかすごい技をしょうかいしました。

 

「動いたら、ふえる」ということを

コンピュータが無限に永遠に正確にくりかえしているので、

こんなすごいことができるのですね。

 

「どんなもようがきれいか、感性をはたらせるのは人間」

「正確にくりかえして作業するのはコンピュータ」

 

人間とコンピュータが協力して、今までにない

新しい時代のものづくりを体験することにもつながりますよね。

 

ぜひ色んな作品づくりにチャレンジしてみてください!

 

 

⬇︎基本技その①「ぶつかったら…変わる」は、こちらです!

www.irolaboblog.com