ビスケットのあれこれ

ビジュアル言語ビスケット(Viscuit)に関するあれこれを書いてゆきます.

ビスケットの角度のマッチング

2013-11-14 18:49:05 | 1
ビスケットでは,絵の角度によってもマッチするメガネを制御することができます.この方法を使うと,面白いアニメーションが作れます.

まず基本的な考え方を説明します.動画


このメガネは,人が大きく回転しながら移動して,その跡に矢印を置いて行くものです.設定で「滑らかなうごき」のチェックを外しています.


次に,矢印が上を向いたときは1に変わる.矢印が下を向いたときは2に変わる.というメガネを作ります.

これを走らせると,


のようになりますが,大体上を向いているときに1,下を向いているときに2になりますが,1と2が切り替わるところは丁度真横になっています.ここが少しわかりにくいところです.

もう一つメガネをつくって,矢印が左を向いているときには3に変わるというのにしますと,

のようになります.1と3が切り替わるのは左斜め上,3と2が切り替わるのは左斜め下ですね.

角度が2つのときは,それぞれが丁度180度ずつ担当しましたけど,角度が3つになると,それぞれのメガネが担当する領域は対等にはなりません.この場合は3の角度が少し狭いですね.

さらに,狭くすることもできて,

これは,上を向いているときは1,少し左を向いたら3,少し右を向いたら2としています.こうすると,1になる角度をすごく狭くできます.わかり易さのために,3と2で違う絵を使っていますが,両方とも同じ絵を使うと,大部分は2だけど,ほんの少しだけ1になる,ということもできます.

角度の判定を上手く使うと,非常に面白いアニメーションができます.


カエルがジャンプするアニメーションです.これは動画を見ていただくとわかりますが,簡単に作っているようで,結構難しいです.伸びているカエルが大きく回転するメガネをつくって,カエルが下を向いたときしゃがみます.しゃがんだカエルはジャンプします.ここで真ん中のメガネ,カエルが下を向いたときにしゃがむ,というものメガネの左側で伸びているカエルの角度,右側で伸びたカエルがしゃがむときの角度の二つを調整しないと,うまくジャンプしません.


落ち葉がひらひらと落ちるアニメーションです.葉っぱを表と裏の絵を描きます.表の葉っぱは半時計回りで大きく回転.裏の葉っぱは時計回りで大きく回転します.これらは葉っぱが横向きで作ります.葉っぱが縦になったときに,表から裏,裏から表にひっくりかえります.縦の置き方で,茎を下にするか上にするかを間違うとダメです.これも動画を見ていただくのがよいでしょう.

カエルも落ち葉も,手順通り,それぞれのステップでちゃんと動いているのを確認しながら作らないと,なかなか思ったような動きにはならないと思います.この角度のマッチングは,僕自身はあまり納得できていない,直感的ではない変な仕様なんですが,使いこなせるようになるとかなり表現力があがります.

ビスケットで算数の勉強

2013-11-14 10:59:41 | 1
ビスケットを算数の勉強に使ってみましょう.

最初に5つの絵を用意します.

10円,50円,100円のお金と,りんごとみかんです.

次に,両替のメガネを作ります.

見づらいですが,左側が,10円が5枚で50円になる,右側が50円2枚で100円になる,というメガネです.

次に,りんごとみかんの値段を決めます.

上のメガネは,りんごが130円になる.下のメガネはみかんは40円になる,というものです.

では,計算させてみましょう.ステージにりんごを3個みかんを2個置いてみます.

実行させると,

のようになります.重なっていて見にくいので,すこしずらしてみますが,このとき,ビスケットで実行モードというのがあって,のアイコンをクリックすると,

というダイアログが出るので,ここで「置いた位置をおぼえる」というチェックを外します.このチェックはゲームとか絵本といった作品を作るときに便利な機能で,ステージに直接置いた部品の位置を覚えておいて,ビスケットのプログラムの実行はかならずその置いた位置から何度もスタートする,というものです.今回は,毎回最初から戻されるのではなく,ステージの位置を覚えないで,書き換えた結果に対して,また次の書き換えを行うということになります.そのようにしておくと,上の絵のような計算された結果に対しても触ることができて,絵を並べ替えると

のように,470円という結果になります(りんご3個で390円,みかん2個で80円ですから).このモードの場合一時停止を使ってメガネを編集すると便利です.

これらの様子はこの動画でもみれます(声が小さくてすみません).

同じように,今度は引き算をさせたいのですが,これがなかなか難しい.いちおうこの動画でトライしてますが,けっこうばたばたしてます.

先ほどの,りんごとみかんの買い物のメガネを壊して,逆向きのメガネにします.

上のメガネは「りんごと130円があれば消える」,下のメガネは「みかんと40円があれば消える」というものです.

ところがこれでは100円が2枚あっても,りんごは買えません.買えるようにするには,100円が1枚と10円が3枚必要なので,ここにある100円を,50円と10円5枚に両替しなければなりません.ビスケットの両替のメガネは小さい金額を大きくする,という方法だけ用意してありますが,自動的に都合の良いように逆向きには動いてくれません.

もしここで,逆向きの両替のメガネを追加したら,両替の向きが双方向であるので,10円5枚と50円1枚を交互に繰り返すアニメーションになってしまいます.いつ,どっちむきに両替すべきかというのは実は非常に難しいのです.

ではどうしたらよいかというと,たとえば,次のようなメガネを追加します.

100円が2枚あったとき,りんごを買うと,70円のおつりになる.50円でみかんを買うと,10円のおつりがでる.
というものです.実は,これでも完璧ではなくて,100円でみかんを買ったとき,150円(100円玉と50円玉)でりんごを買ったとき,というのも追加しなければなりません.

お金の種類が100円までだから,これでもよいですが,500円とか1000円という高額なお金を使うと,一気に複雑になります.りんごやみかんの他に新しい商品を買うことにすると,それぞれに高額紙幣に対応しなければなりません.りんごやみかんの値段を変更した場合は,関係するメガネを全部直すひつようがあります.

もっとコンピュータらしいやりかたもあります.
 お金を全部10円に両替する.
 次に,りんごと130円のメガネで,130円の表現を100円をつかわずに,全部10円だけで(10円が13個)表現する.
 計算が終わってから,お金を大きな金額のコインに両替する.
という3つの手順に分ける方法です.この方法だと,どんな金額がきてもうまく計算できると思います.

アルゴリズムを考えるというのは,このようにコンピュータでも計算できるような手順に分解するということです.人間の場合は,両替の方向を都合良く切り替えてなんとかなってますが,それをコンピュータにわかるようにするには難しい.

人間にとって易しいことでも,コンピュータには難しい.
もうひとつ.実は,これを作ってて,引き算というのは意外と難しいのだから,子供にはもっと丁寧に教えて上げようという気持ちにもなりました.