ビスケットに筆算を教えてみました．
まずは，ステージにこんな感じに数が並んでいて．
それぞれの桁の足し算を教えます．足し算の結果の一桁目と桁上がりをそれぞれ作ります．
ここでは，必要なメガネだけ作ってますが，本当は０から９までの全ての数の足し算を教える為，メガネが１００個必要になります．
桁上がりの部分も作らなければなりませんが，１桁の足し算と桁上がりとを２つのステップに分けて，桁上がりの計算は赤い線で表しています．人間はここは３つの数の足し算を１回でやってしまってますが，２つの数の足し算だけで作るには，このようにステップに分けなければなりません．
桁上がりがあったときは，答えに１を足すというように作ります．これは，桁上がりがないときと，あるときでそれぞれ１０個ずつのメガネが必要です．
ちなみに，桁上がりの計算を一度にやるには，「桁上がりがないときの３たす４は７」「桁上がりがあるときの３たす４は８」という形で，全部で２００個のメガネが必要になります．
２ステップに分けた場合は，メガネが１２０個．１ステップで済むようにするにはメガネが２００個必要です．前者は逐次実行的な処理が入ることでメガネを減らしているのに対して，後者はすべて宣言的に記述するため１ステップで終了できるけれどもメガネの数はものすごく多くなります．
ここで，ビスケットの機能拡張について考えてみたいと思います．１２０個と２００個といったメガネは，単純な規則に従って作られています．
１桁の数AとBに対して
(A+B) / 10 = X 余り Y
という関係の一桁の数XとYが計算できて．それぞれの数に対応する絵をそれぞれの場所に並べたメガネを作れば良いのです．
メガネの内部構造はこうなっています．これは３＋４は７というのを表しています．
{“type”:”rule”,”x”:273,”y”:441,
“head”:[{“x”:155.8,”rotation”:0,”name”:”P3″,”y”:92.8,”type”:”vispict”},{“x”:155.8,”rotation”:0,”name”:”P4″,”y”:134.8,”type”:”vispict”},{“x”:113.8,”rotation”:0,”name”:”P10″,”y”:50.8,”type”:”vispict”},{“x”:155.8,”rotation”:0,”name”:”P11″,”y”:176.8,”type”:”vispict”},{“x”:155.8,”rotation”:0,”name”:”P10″,”y”:218.8,”type”:”vispict”}],
“body”:[{“x”:155.8,”rotation”:0,”name”:”P4″,”y”:134.8,”type”:”vispict”},{“x”:155.8,”rotation”:0,”name”:”P3″,”y”:92.8,”type”:”vispict”},{“x”:155.8,”rotation”:0,”name”:”P7″,”y”:218.8,”type”:”vispict”},{“x”:113.8,”rotation”:0,”name”:”P0″,”y”:50.8,”type”:”vispict”},{“x”:155.8,”rotation”:0,”name”:”P12″,”y”:176.8,”type”:”vispict”}]
}
単純に，メガネの左側（head）にはどの座標に何番の絵が入っていて，メガネの右側（body）にはどの座標に何番の絵が入っているか，ということが書かれているだけです．ということは，この絵の番号(P3 というのは３の数，P4は４です）を規則にしたがってこのデータを置き換えれば１００個のメガネはすぐに作れます．
ということで，自動生成させたのがこちらです．
自動だと，答えが９になるときの桁あがり（桁上がりの桁あがり）までは作れなかったので，そこは手作業でつくりました．
今思うと，桁上がりの１は計算の１と同じ絵を使わなくてもよかったですね，見てて紛らわしいです．
この自動生成は，今回は保存したファイルをjavascriptで読み込んで，自動生成させてファイルに埋め込んで置き換えた，ということをやったのですが，この一連の処理をビスケットのマクロ機能として実現することもできそうです．メガネの自動生成はこれに限らず色々と考えられるので，練ってみます．