Elmの図形描画機能

まずは公式サイトの例をご覧ください。

HTML5のCanvasは、JavaScriptによる手続き型の実装を前提にしていたので、コマ毎にclearRectで消去したり、save/restoreで状態を管理したりする必要がありました。プログラマーはともかく、「学校で習った図形を書いてみよう」と言う場合にはやや非直感的です。

一方Elmでは更新処理自体はElmがやってくれます。また、図形はFormという「図形そのもの」を表す型として、図形の移動や拡大縮小はmove scaleといった関数として、自然に表現できます。

なお、注意点とがあり、collage w h forms でw×hのキャンバスを作ったとき、原点はキャンバスの中心で、Xが大きくなるほど右、Yが大きくなるほど上の座標です。つまり、数学と同じ座標なのです。

フラクタルを書いてみる

図形が描ける、ならば初めにフラクタルを描くものと相場は決まっています。再帰呼出し＆縮小＋移動で、シェルピンスキーのギャスケットを描画してみました！

n = 0では単なる三角形を、n > 0では自分自身の縮小コピー×3を描画しています。

なお、Elmでは小さすぎる図形（1ピクセル未満？）は描画してくれないらしく、上の例で再帰が深すぎると何も表示されなくなりました。

フラクタルを書いていると、十年前私がまだ紅顔の少年だった頃を思い出します。

私がプログラマーになったのは図書館から↓の本を借りたのがきっかけでした。

当時は悪名高いMicrosoft Visual Basicがボロクソに言われつつも全盛の時代でしたが、十進BASICはVBとは全く別の"Full Basic"という規格に沿った教育用BASIC環境でした。

教育用だけあって

と、初心者用の機能が充実しているだけではなく、

数値は10進小数がデフォルト（2進数モードもある）
10進1000桁モード（数値型が小数点以下1000桁まで格納可能になる）
有理数モード
複素数モード
強力な図形描画機能
- function文とは別に、図形を定義するpicture文がある
- scale, rotate, shift, 任意のアフィン変換, それらの合成変換
グラフ描画用関数
図形関連の豊富なExample（含シェルピンスキーのギャスケット）