図形言語 描画スクリプト – SICP(計算機プログラムの構造と解釈)その59

図形描画 スクリプト(with Canvas and JavaScript)

ようやく SICP(計算機プログラムの構造と解釈) の図形言語に到達したが、図形を描く方法が無い…
いろいろ調べてまわったところ flash で図形言語の描画ツールを作っている人([flash][scheme][SICP] Flashで図形言語の描画ツールを作りました(SICP2章の話) – プログラミングとかそんなの)がいて、そのツールで表示させようとしたが、自分の環境では線が1本表示されるだけでなぜか上手くいかない。
そこで、そのツールの座標データを見てみると1行が1本の線のデータになったcsv形式のようなので、線を引くだけなら Canvas でできると思い(図形を描く – MDC) JavaScript と Canvas を使って描画ツールを作った。

図形言語 描画スクリプト(with Canvas and JavaScript)

SICP 図形描画スクリプト

データの形式等は 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
コメント

この記事へのコメントはまだありません。

Top