いろラボブログ

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

『あじさい・さくさくプログラム』ビスケット基本技マスターへの道!①ぶつかったら…変わる

f:id:koba1426:20190627135142p:image

かなーり久しぶりの更新ですが、今日から

Viscuit(ビスケット)のテクニックを楽しく学べる

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

シリーズを始めたいと思います。

 

授業・ワークショップなどのアイデアの一つとしても、使えるかもしれません。

テクニックを順番にしょうかいしていきたいと思います!

 

さいしょは、

テクニックその①「ぶつかったら…変わる」です!

 

 

つくるプログラムはこれ

「あじさい・さくさくプログラム」

まだまだ6月!梅雨の季節ネタでも使えます。

つくってみましょう!

 

 

 

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

f:id:koba1426:20190627133835j:image

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

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

②どこでもいいので、すきな色のへやをえらんで、

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

 

ステップ1  絵をかこう!

まず、使う絵をかきましょう!

少していねいにかいたけど、もっとてきとうでもいいよ!

「はっぱ」

f:id:koba1426:20190627134117p:image

「あじさいのつぼみ」
f:id:koba1426:20190627134145p:image

「ムラサキあじさい」
f:id:koba1426:20190627134137p:image

「水色あじさい」
f:id:koba1426:20190627134105p:image

「ムラサキしずく」
f:id:koba1426:20190627135445p:image

「水色しずく」
f:id:koba1426:20190627134110p:image

 

ステップ2  「はっぱとつぼみをならべてみよう!」

はっぱをだします

f:id:koba1426:20190627152642j:image

「かいてんボタン」をおしましょう!
f:id:koba1426:20190627152629j:image

はっぱの下に点がでましたね
f:id:koba1426:20190627153908j:image

この点をクルっと右にうごかしましょう

かいてんします!
f:id:koba1426:20190627152623j:image

つぎのはっぱもだして…

f:id:koba1426:20190627152632j:image

こんどは左にかいてんさせて…
f:id:koba1426:20190627152657j:image

くっつけよう!
f:id:koba1426:20190627152655j:image

くりかえして、はっぱを3つこんなふうに

くっつけてみましょう

f:id:koba1426:20190627152651j:image

さいごに、つぼみをその上にのせましょう
f:id:koba1426:20190627152645j:image

そして、ムラサキしずくをつぼみの上の方におきましょう!
f:id:koba1426:20190627152648j:image

ステップ3  ムラサキしずくを下にうごかそう!

ここで問題です。

クイズ①

「ムラサキしずくを下にうごかす」には、どうすればいいでしょう?

 

考えてやってみよう!

 

 

 

 

答えはこれですね

f:id:koba1426:20190627154416j:image

こんなメガネをつくれば、ムラサキしずくは下にうごきます!

f:id:koba1426:20190627154618j:image

 

ステップ4  「ぶつかったら…ムラサキの花がさく!」をつくろう!

ここでまた問題です。

クイズ②

「ムラサキしずくがつぼみにぶつかったら、ムラサキあじさいがさく」には、どうしたらいいでしょう?

 

 

 

 

せいかいは…

f:id:koba1426:20190627155109j:image

こんなメガネです!

f:id:koba1426:20190627155238j:image

ムラサキしずくが、つぼみにぶつかったとき

⇨ムラサキのあじさいになる

 

下にうごいて

ぶつかったら…
f:id:koba1426:20190627155834j:image

かわった!
f:id:koba1426:20190627155847p:image

 

 

もう一つ、問題

今は、ぶつかったらしずくもいっしょにきえてしまうのですが、

クイズ③

「ムラサキあじさいがさいても、しずくがきえない」ようにするにはどうすればいいでしょう?

 

 

 

 

ヒント:さっきつくったメガネを、ちょっとかえます!

 

 

 

 

答えはこれ!

f:id:koba1426:20190628124400j:image

さっきつくったメガネの右のへやに、ムラサキしずくをおきます。

f:id:koba1426:20190627200409j:image

ムラサキしずくが、つぼみにぶつかったとき

⇨つぼみはムラサキあじさいになり、ムラサキしずくは下にうごく


という感じにすれば、しずくは

きえなくなりましたね!

f:id:koba1426:20190627201032j:image

 

ステップ5  「ぶつかったら…水色あじさいがさく」をつくろう!

もう1つ、はっぱとつぼみのセットをつくりましょう

f:id:koba1426:20190627191632j:image

水色しずくを、その上の方におきます

f:id:koba1426:20190628124750j:image

 

 

はい、また問題!

クイズ④

「水色しずくが下にうごいてつぼみにぶつかったら、水色あじさいがさいて、しずくはのこる」には、どうしたらいいでしょう?

 

考えてみよう!

 

 

 

 

 

答えはこれ!

f:id:koba1426:20190627155855j:image
ムラサキのときと同じようにすればできますね!

f:id:koba1426:20190627212934j:image

水色しずくが、つぼみにぶつかったとき

⇨つぼみは水色あじさいになり、水色しずくは下にうごく



これでほぼ完成!

 

 

ステップ6  たくさんならべてみよう!

あとは、こんなふうにたくさん

はっぱとつぼみ、しずくを出してならべてみよう!

(しずくのうごきも、少しかえてみました)

f:id:koba1426:20190628140028p:image

時間がたったら、こんなにカラフルに!

f:id:koba1426:20190628140127p:image

 

 

やってみよう!

こんなメガネをふやしたら、どうなるでしょう?

f:id:koba1426:20190627210420j:image

f:id:koba1426:20190627210506j:image

上のメガネ

ムラサキあじさいに水色しずくがぶつかったとき

⇨ムラサキあじさいは水色あじさいにかわって、水色しずくは下にうごく

下のメガネ

水色あじさいにムラサキしずくがぶつかったとき

⇨水色あじさいはムラサキあじさいにかわって、ムラサキしずくは下にうごく

 

しずくがぶつかつたびに、ずっと色がかわりつづける

楽しいアニメーションになりますよ!

 

もっとやってみよう!

オリジナルのお花やしずくも、どんどんつくってみよう!

f:id:koba1426:20190627213831j:image

どんなお花がさくかな??

 

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

完成したプログラムがうごいているところと、

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

 

youtu.be

 

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

https://develop.viscuit.com/env/view.html?control=edit%3A15400841%3A001%2F2019-0627-0712%2F1-1%2F012.json%3A1-1%3A

viscuit
viscuit
開発元:Digital Pocket Limited Liability Company

 

まとめ  テクニック①「ぶつかったら…変わる」

今日は、「ぶつかると…」のプログラミング基本技をしょうかいしました!

「あるものと、あるものがぶつかったら変わる」

この組み合わせだけども、むげんに色んなことができますね!

 

『今ある価値と価値を組み合わせて、新しい価値を創る』

そういったことをコンピュータで実現する体験にもなりますよね。

ぜひ、色んな「ぶつかったら…変わる」のアイデアを発明してみましょう!

 

⬇︎もっと基本はこちらから!

www.irolaboblog.com