ビスケットのあれこれ

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

ビスケットのコンパイラ

2014-05-08 14:09:29 | 1
いま,ビスケットのコンパイラを作ってます.きっかけは,先日やった,「ビスケットの作り方」という上級者の子ども向け講座.これは,何をやったかというと,ビスケットのプログラムと同じ動きをするプログラムを自力でJavascriptで書いてみるという内容で.

一番最初は部品を1つだけ動かすプログラム

var x = 100;
var y = 200;

function loop() {
 clear();
 draw(pict, x, y);
 x += 10;
}

こんな感じで書くとpictという絵が表示されて,右に少しずつ動いて行きます.

これだと,画面の右端に行っても反対側から戻って来ないので,

function loop() {
 clear();
 draw(pict, x, y);
 x += 10;
 if (x > 512) {
  x = 0;
 }
}

こうなります.部品を二つ動かしたくなるともっと難しくなって,


var x = 100;
var y = 100;

var x1 = 100;
var y1 = 200;

function loop() {
 clear();
 draw(pict, x, y);
 draw(pict, x1, y1);
 x += 10;
 x1 += 10;

 if (x > 512) {
  x = 0;
 }
 if (x1 > 512) {
  x1 = 0;
 }
}

となります.「どうして配列を教えないんだ」と思われるかもしれませんが.そう簡単には教えません.有り難みがわかるまではどんなに便利なものでも教えるべきではないですからね.

ビスケットの実行が格段に難しくなるのは,部品が自由に回転できるようにするからですが,回転しない制約が入っているとこのようにすごく簡単なプログラムになるのです.

この後,絵の種類を増やしたり,尺取り虫のようなアニメーションにしたり,尺取り虫がボールを蹴るようにしたり,どんどん難しくなります.

そこで,いま作っているコンパイラは,Javascriptのコードをはきますが,そのコードを自分で眺めてみてなんとなくJavascriptがわかることを目的としたコードをはきます.

本当は部品が左に動いて画面の端に行ったら,右側から出てくる
 if (x < 0) {
  x = 512;
 }
というのが必要です.もちろん縦方向も.しかし,メガネが真横で右に動くように作ってたら,こういう条件は使われないですよね.不必要なコードはできるだけ生成しないというポリシーです.

同じ種類の部品が4つ以上でてきたときに初めて,配列を使ったコードが出てきます.尺取り虫のように絵の種類が変わるアニメーションになって,絵の種類を管理する配列を使います.ここまで来てもまだオブジェクト指向は出てきません.

ビスケットの汎用なパターンマッチングは,かなり複雑なメガネを書かないとでてきませんから,いま作られているほとんどのビスケットのプログラムは,そんなパターンマッチ無しで,ちょっとした if 文でできてしまうんですよね.

絵の回転を許すと,一気に難しくなります.ライブラリを呼び出して簡単に見えるようにしてもいいですが,内側はsin, cosを使っているので,そういうベタなぐちゃぐちゃの式を見せるのも面白いかもしれませんね.

実は,コンパイラを作るもう一つの目的は,iPadで作品がみれるようになるってことですけどね.