Viscuitで自然を描いてみよう

ここでは Viscuitを用いて，自然を表すアニメーションを作ってみます．

https://gyazo.com/8bdafc934330064bee9d273c75bbbc8c

はっぱを描こう

https://gyazo.com/41b3af71de575c9a514c6647c99ba6efを押します

https://gyazo.com/a906b09dffbe660302de679cdc39dd0cで色や太さを選択して

https://gyazo.com/1a118ea1d08803f3e238005435e77121に書き込みます．終わったら左下の丸を押します．

https://gyazo.com/8bdafc934330064bee9d273c75bbbc8c

葉っぱを舞い散らそう

https://gyazo.com/7b6aad5dd4b74f2b7d0a0631a96372f7

メガネを画面真ん中にあるメガネ置き場にひきずり出して置きます．

https://gyazo.com/0587959fcccdeab824bb340c52050322

次に葉っぱをひきづり出してメガネの左側に入れます.

https://gyazo.com/d00a8ae00b10b36ffd2388676e64f3d3

さらに，もう一枚葉っぱをひきづり出して，メガネの右側に入れます．そのとき，右側には左側に入れた葉っぱが薄く表示されているので，それよりも少し下にずれるように置きます．

https://gyazo.com/ca715e91dbb7b14f40a5f490d2c9b09d

葉っぱを左上側のステージにおきます．すると置いた葉っぱが下に落ちていきます．これは，Viscuitの「メガネの左側にある絵がステージにあったら，そのメガネの右側の絵に変化させる」というプログラミングルールに従って，「葉っぱがステージにあったら，ちょっと下にずれた葉っぱに変わる」こと繰り返し実行されるためです．

最後に，たくさんの葉っぱを置いてみて，アニメーションを楽しみましょう．

https://gyazo.com/8bdafc934330064bee9d273c75bbbc8c

葉っぱの下から出てくる虫

次に葉っぱの下にいるような虫を描いてみましょう．

https://gyazo.com/4ddd5aa12cb5bf67d9a400a3e9ebb4f1

さっきのメガネの右側から葉っぱを抜き出します．代わりに今描いた虫をひきづり出して置きます．

https://gyazo.com/3f821379d23053ca4dc35f55c90ed590

次に，指マークを引っ張り出して，メガネの左側におきます．

https://gyazo.com/d5456137614db27d606904376903366c

ステージに葉っぱをたくさん敷き詰めてみてください．さっきと違って，なにも変化がありませんね．

https://gyazo.com/7fc46b5ec43721b5ad656ec464d2647c

では，四角のボタンを押してみてください．ステージが全画面表示になったと思います．そこに置かれている葉っぱをクリックしてみてください．

https://gyazo.com/2e8a010a6c22edbdbec786304be259ab

クリックした葉っぱが虫に変わりましたよね．これは先ほどメガネの左側（葉っぱ）に置いた指マークの効果です．指マークを入れると，「左側にある絵がクリックされたら右側の絵に変わる」という動きになります．

では最後に，葉っぱをクリックすると虫が出てきて，その虫が動くようにしてみましょう．

左上にあるバツを押して，元の画面に戻します．

https://gyazo.com/56b0c3d8b4fa85836fd8a63ef5224043

そして，もう一つメガネをメガネ置き場にひきづり出してきます．そのメガネで虫を動かすルールを作れば完成です．頑張ってみましょう．

https://gyazo.com/8bdafc934330064bee9d273c75bbbc8c

その他の工夫

https://gyazo.com/8a58339e5a309a79de3eecad41e190db

もう一つメガネをひきづり出してきて，左右両方に葉っぱを入れます．

https://gyazo.com/4178e36bdc11ed214716d7ce8349f7a5

回転ボタンを押してから，メガネの右側をクリックします．

https://gyazo.com/1b8df44eb0157f1a9892ac19fdf709d1

下に出てくる点線のところをなぞると葉っぱが回転できます．すると左側に置いてあった葉っぱが回転を始めたと思います．

https://gyazo.com/2f80baf50a489fa54dd2ec36dcbf4859

https://gyazo.com/9742236c53a4872e8b556209c83bbd43

さらに，「葉っぱをクリックしたら虫に変わる」ルールのメガネの右側に，音符ボタンを引っ張り出して入れます．すると，葉っぱをクリックした時に音が出るようになります．

#プログラミング教育研修教材