Processing1.0の関数を眺めていると

以下の記事について

以下の記事はアイデアとしてメモするものです。

独自のプログラミング言語で絵を描くProcessing

先日、Cに似たような記法で絵を描けるProcessing1.0がリリースされた際、勉強のためにと、APIを眺めていました。
すると、fill()だの、rect()だのSVGの要素と属性をAPI化したかのような名前に出くわしたのです。
たとえば、黒い四角を描くのだと、

rect(30, 20, 55, 55);
fill("black");

といった感じです。非常に直感的にさくさくと書くことができるという印象を持ちました。

ProcessingのAPI一覧

http://processing.org/reference/index.html

もしかしてDOMの作成に応用できないか？

そこで、ひらめいたのがDOMの作成に応用できないかということです。要素と属性をAPI化して、平坦に描けばいいのではないかと考えました。たとえば、

var svgns = "http://www.w3.org/2000/svg"
var s = document.createElementNS(svgns, "g");
  s.setAttributeNS(null, "id", "hoge");
var rect = createElementNS(svgns, "rect");
s.appendChild(rect);
  rect.setAttributeNS(null, "x", "20");
  rect.setAttributeNS(null,"fill", "black");
var text = document.createElementNS(svgns, "text");
text.appendChild(document.createTextNode("hoge"));
  text.setAttributeNS(null, "x", "20");
  text.setAttributeNS(null, "y", "30");
s.appendChild(text);

を平坦に描くと、

var s = new DPM();
s.element("g");
  s.attr.id = "hoge";
  s.element("rect");
    s.attr.x = "20";
    s.attr.fill = "black";
  s.close();
  s.element("text");
     s.attr.x = "20";
     s.attr.y = "30";
     s.text("hoge");
  s.close();
s.close();

かなり、すっきりしました。
そんなアイデアが頭に浮かび上がりましたので、ここに書き残しておきます。うまくいけば、JavaScriptのライブラリを公開するかもしれません。DOMと一緒に使って混乱が起きる可能性が大きくなりそうなので、しばらくはSIEプロジェクトにおいて水面下で開発します。