図形言語 描画スクリプト – SICP（計算機プログラムの構造と解釈）その59
図形描画 スクリプト（with Canvas and JavaScript）
ようやく SICP（計算機プログラムの構造と解釈） の図形言語に到達したが、図形を描く方法が無い…
いろいろ調べてまわったところ flash で図形言語の描画ツールを作っている人（[flash][scheme][SICP] Flashで図形言語の描画ツールを作りました(SICP２章の話） – プログラミングとかそんなの）がいて、そのツールで表示させようとしたが、自分の環境では線が1本表示されるだけでなぜか上手くいかない。
そこで、そのツールの座標データを見てみると1行が1本の線のデータになったcsv形式のようなので、線を引くだけなら Canvas でできると思い（図形を描く – MDC） JavaScript と Canvas を使って描画ツールを作った。
図形言語 描画スクリプト（with Canvas and JavaScript）
データの形式等は flash で作られた描画ツールと同じなので draw-line や 実際に描画する際に渡すフレーム（canvas-frame）は同じ形で使う。
draw-line
(define (draw-line v1 v2) (display (xcor-vect v1)) (display ",") (display (ycor-vect v1)) (display ",") (display (xcor-vect v2)) (display ",") (display (ycor-vect v2)) (newline))
canvas-frame
(define canvas-frame (make-frame (make-vect 0.0 0.0) (make-vect 400.0 0.0) (make-vect 0.0 400.0)))
使い方
使い方は、
(painter frame)
という形、例えば wave を描画するなら
(wave canvas-frame)
とする。
そして、出力された結果の
140.0,340.0,160.0,400.0 260.0,340.0,240.0,400.0 140.0,340.0,160.0,260.0 260.0,340.0,240.0,260.0 240.0,260.0,300.0,260.0 160.0,260.0,120.0,260.0 300.0,260.0,400.0,140.0 240.0,180.0,400.0,60.0 240.0,180.0,300.0,0.0 200.0,120.0,240.0,0.0 120.0,260.0,60.0,240.0 120.0,240.0,60.0,160.0 60.0,240.0,0.0,340.0 60.0,160.0,0.0,260.0 120.0,240.0,140.0,200.0 140.0,200.0,100.0,0.0 200.0,120.0,160.0,0.0
を textarea にコピペして "データ描画" ボタンをクリックすると図形が描画される。
図形言語 描画スクリプト（with Canvas and JavaScript）
動作環境は、
Firefox 3.0.5
Firefox 2.0.0.20
Safari 3.2.1
Google Chrome 1.0.154.36
Opera 9.63
で動作を確認済み。
コピペの手間はかかるけど、環境構築の手間はかからない。
図形が表示された瞬間は本当に嬉しい（関数型言語の勉強にSICPを読もう – (17) 2章 – データによる抽象の構築 – 2.2.4 図形言語 モナー – ひげぽん OSとか作っちゃうかMona-）のでおすすめです。
ピアソンエデュケーション
売り上げランキング: 6542