ASCIIsvg を使う

 作成日：2014-01-05
最終更新日：

SVG の手打ちに疲れる

SVG を手打ちするのはさすがに疲れる。 簡単な式表現を字句解析して SVG にする手段はないだろうか、 と考えていたところ、ASCIIsvg という JavaScript を下記のサイトで見つけた。

ASCIIsvg.js: Simplified Scalable Vector Graphics via JavaScript(www1.chapman.edu)

ASCIIsvg Editor(www1.chapman.edu) というページもある。

図形表示だけでなく、グラフ表示にも使える。

事例：グラフ編

直線

のこぎり関数

Pointer coordinates: (x,y)

緑は `n = 3` まで、青は `n=7` まで加えた級数の和である。

`b_1(x) = 2 sum_(n=1)^oo (-1)^(n-1)/n sin nx`

放物線1

Pointer coordinates: (x,y)

`p=-sqrt(2)` and `q=sqrt(2)`

放物線2

Pointer coordinates: (x,y)

`p=-sqrt(2)` and `q=sqrt(2)`

三次曲線

Pointer coordinates: (x,y)

`p=-sqrt(2)` and `q=sqrt(2)`

多項式関数

Pointer coordinates: (x,y)

平方根など

Pointer coordinates: (x,y)

有理数関数

Pointer coordinates: (x,y)

三角関数

Pointer coordinates: (x,y)

逆三角関数

Pointer coordinates: (x,y)

指数関数

Pointer coordinates: (x,y)

対数関数

双曲線関数

Pointer coordinates: (x,y) `sinh(x)=(e^x-e^(-x))/2`
`cosh(x)=(e^x+e^(-x))/2`
`tanh(x)=(e^x-e^(-x))/(e^x+e^(-x))=(sinh(x))/(cosh(x))`
`"sech"(x)=2/(e^x+e^(-x))=1/(cosh(x))`
`"csch"(x)=2/(e^x-e^(-x))=1/(sinh(x))`
`"coth"(x)=(e^x+e^(-x))/(e^x-e^(-x))=(cosh(x))/(sinh(x))=1/tanh(x)`

らせん

混合

符号関数、ceil と floor

事例：図形編

離散グラフ

４点 ８点

円周角と中心角

circle コマンドを使う。

内接する楕円

楕円の ellipse コマンドを使う。左は塗りつぶしなし、右は塗りつぶしありの図形である。

弧

arc コマンドを使う。

コマンド一覧

http://www.asciimathml.com/dredging/default.asp?id=57&mnu=57 の翻訳である。ただし、2016-09-24 現在、 上記ページはリンク切れである。https://web.archive.org/web/20110415120805/http://www.asciimathml.com/dredging/default.asp?id=57&mnu=57 を参照するとよい。これに http://www1.chapman.edu/~jipsen/svg/asciisvgcommands.html の記載と合わせてまとめてみた。

ASCIIsvg.js は HTML ページや PmWiki で使えるグラフィクスで、 最小限の例を掲げる。 (もっと豊富な例はここを見よ。 http://math.chapman.edu/~jipsen/svg/testdynamicpics.html).

オプション引数は {...} で表す。 点は座標で指定する。例：p=(1,2) (または p=[1,2] もし JavaScript の記法が好みであれば). 同じ行にコマンドを複数かくときはセミコロンが必須。 ただし行の末尾は不要。

基本的なコマンド

コマンド 説明 実例
<src="d.svg" script='...ASCIIsvg commands...'> これはピクチャをWEBページに挿入する構文である。 ASCIIsvg コマンドはスクリプト属性をシングルクォーテーションで囲む。 以前は、
<embed width="300" height="200" src="d.svg" script='...ASCIIsvg commands...'> で指定していたが、これは同じページの異なる描画画面のサイズがすべてこの指定になってしまうのでお勧めしない。
width=300; height=200 ピクセル単位のグラフのサイズを示す。
xmin=a; xmax=b; xscl=dx x 軸の範囲と目盛間隔を表す。xscl が指定されれば格子も描かれる。なお、axes() コマンドまたは noaxes() コマンドをこの後に置く必要がある。 例：xmin=-5.5; xmax=5.5 xscl=1.0
ymin=c; ymax=d; yscl=dy y 軸の範囲と目盛間隔を表す。 ymin を省けば x軸が垂直軸の中央に来る。 ymax を省けば x軸とy軸のスケールが同じとなる。なお、axes() コマンドまたは noaxes() コマンドをこの後に置く必要がある。
axes({dx,dy,labels,gdx,gdy}) 軸を設定、表示する。このコマンドはもはや必要ではない。 axes()形式で自動的に設定される。
axes() 軸を表示する。
noaxes() 軸を表示しない。
line([x,y],[u,v])
line(p,q {,id,endpts}) 		p から q までの線分を引く。 id 値はこの svg エレメントに対する識別子(id)として加えられた任意の文字列である。 もしコマンドに同じ id が繰り返し使われていたら、要素は（新たなエレメントに付け加わるのではなく）更新される。 これが有効なのは対話的グラフ作成のみである。 endpts (最終点）については最終点変数を見よ。
path([p1,p2,...,pn] {,id,c,endpts}) 点 p1, p2, ... を線分で結ぶ
plot(f(x) {,x_min,x_max,points,id,endpts}) "x" の関数を x_min と x_max の間で与えられた点の数で結ぶ。 規定の数は 200 である。
plot([f(t),g(t)],t_min,t_max {,points,id,endpts}) パラメータ t のペアとなる関数をプロットする。"t" が必要。
rect(p,q {,id,rx,ry})
rect([x,y],[u,v]) 		対角線の頂点がp,q であり角が半径 rx,ry で丸められている長方形を描く。
左下座標が[x, y]で右上座標が[u, v]の長方形を描く。
ellipse(center,rx,ry {,id}) 中心がcenter, x-軸半径が rx 、y-軸半径が ry の楕円を描く
circle([x,y],r)
circle(center,radius {,id}) 		中心が center [x,y] で半径が r の円を描く
point(center {, typ, label, pos, id}) 点を描く。
dot(center {, typ, label, pos, id}) point コマンドの別名。
text(p,st {,pos,id,fontsty}) write string st at point p 文字列 "label" を座標 [x,y] に表示する。 オプションで、文字列をそれぞれ上、下、左、右、左上、右上, 左下、右下に配置できる。 このコマンドは点[x,y]の座標を返すので、必要があれば変数として利用できる。
curve([p1, p2, ..., pn])
curve(plist,id,endpts)		path(plist,id,"T",endpts) に等しい。 このコマンドは指定された点を通る曲線を描く。点の対を二次ベジエ曲線で結ぶ。 傾きは最初の２点で示され、それが対称性を保つように伝播する。
loop(p,d {,id}) 点 P に方向 d に向かって小さなループを描く（とくに有向きグラフネットワークなどで重宝する）
arc(start,end,radius {,id}) 与えられた半径 ardius を持つ弧を始点から終点まで曲線の弧で描く
slopefield(fun{,dx,dy}) 傾き場を表示する

その他付加的な設定や命令

showcode() グラフの上のテキストの上に ASCIIsvg のコードを表示する
showbutton() show/hide ボタンをグラフの上に示す。ASCIIsvg のコードを編集してグラフを更新することができる。
nobutton() 現在のデフォルト。このすたれたコマンドは後方互換性のために残している。

変数

変数は個々に変えられる。既定値とともに示す。

border = 0 in pixel, reduces the graph so that an area of this width is visible around the graph. This setting must appear before the axes() command.
strokewidth = "1" ピクセル単位の線の幅
stroke = "blue"線の色
strokeopacity = 1 透明のとき 0, 不透明のとき 1
strokedasharray = null たとえば "10 10" は 10ピクセルの長さの破線を表す
fill = "none" 塗りつぶす色
fillopacity = 1 透明のとき 0, 不透明のとき 1
fontstyle = "normal" テキストの形 normal|italic|inherit
fontfamily = "times" フォント種類 times|ariel|helvetica|...
fontsize = "16" サイズ (スケールは自動的に変えられる)
fontweight = "normal" normal|bold|bolder|lighter|100|...|900
fontstroke = "none" フォントのアウトラインの色
fontfill = "none" フォントの色
marker = "none" 線分や折れ線、曲線の点のマーク。 次の値が可能。 "none" | "dot" | "arrow" | "+" | "-" | "|".
endpoints = "" 3文字からなる文字列で線分や折れ線、曲線の終点の形を決める この形式は "c-d" という形をとる。ここで c は <|o|* 、 d は >|o|* e.g. "<->" は両端が矢印であることを表す。 *-o は始点が塗りつぶした（閉じた）点、終点が塗りつぶしていない（開いた）点を表す。

描画用大域変数と既定値

showcoordinates = true decide if mouse coordinates should show in bottom right corner
markerstrokewidth = "1" line width for markers
markerstroke = "black" line color for markers
markerfill = "yellow" fill color for markers
markersize = 4 radius in pixels for marker dots
arrowfill = stroke arrows are filled with the same color as lines
dotradius = 4 radius in pixels for dots and points
ticklength = 4 length of the ticks marked on the axes
axesstroke = "black" color of the axes
gridstroke = "grey" color of the grid lines
backgroundstyle = "fill-opacity:0; fill:white" style of the background rectangle
singlelettersitalic = true decides if single letter labels should show in italics (usually true for math variables)

すたれたコマンド、めったに使わないコマンド

initPicture(xmin,xmax{,ymin{,ymax}}) このコマンドは推奨されない。 現在はこのコマンドの代わりに、xmin = a; xmax = b; ymin = c; ymax = d; axes()　（または noaxes() ) の形で使う。 以前の記述である。
通常このコマンドを最初に使う。引数は座標系を設定するためのもので、後ろ２つは省略可能である。 もし ymin を省略したならば、x 軸はピクチャの中央に位置する。もし ymax を省略したならば、 x 軸と y 軸のスケールは同じとなる（この設定を推奨する）。
switchTo(id) 後続のコマンドのターゲットとして n 番目のピクチャを選ぶ。 例：switchTo(3) or switchTo("picture3")
arrowhead(p,q) 点 p から点 q に向かう矢印付き線分を描く
ASdot(center,radius,stroke,fill) pixel 単位の半径で円を描く（マーカーに使われる）
grid(dx,dy) 後方互換性のためのみに残されている。axes(dx,dy,null,dx,dy) と同じ。

実装されていないコマンド

polarplot(...) 実装されていない。
approximateintegral(...) 実装されていない。
image(imgurl,p,w,h,id) 実装されていない。名前空間属性に問題があると思われる。代わりに layers を試す予定。
vector(p,q {,id})実装されていない。line(p,q,id,"","->") と同じ。
sector(center,start,end {,id}) 実装されていない。与えられた3点に対して扇形(sector)を描く
triangle(p,q,r {,id}) 実装されていない。path([p,q,r,p],id) に同じ。

利用例

自分のページで使ってみた。

バグ

多くの絵を一つの WEB ページで描くと、下記のエラーが表示される。

ReferenceError: updateCoords10 is not defined.

原因を調べるために、ASCIIsvg.js を調べてみると、 1017行めから1046行めにかけて次の行がある。 

function updateCoords0() {updateCoords(0)}
function updateCoords1() {updateCoords(1)}
（中略）
function updateCoords9() {updateCoords(9)}
ASfn = [function() {updatePicture(0)},
  function() {updatePicture(1)},
（中略）
  function() {updatePicture(9)}];
ASupdateCoords = [function() {updateCoords(0)},
  function() {updateCoords(1)},
（中略）
  function() {updateCoords(9)}];

要は、絵は 10 枚が最大であるということである。 11 枚以上描きたければ愚直に拡張すればよいが、 もっとうまい方法があるはずだ。

リンク集

まりんきょ学問所 ＞ コンピュータの部屋 ＞ マーク付け言語手習い ＞ ASCIIsvg

MARUYAMA Satosi