作図手順をスライドで表示(lac.js)

作図される過程をスライドで確認できるものを作りました。このスライドは、手で一枚一枚指定しているわけではなくて、最終的な図のJavaScriptを用意するだけで、あとはプログラムが自動的に依存関係を調べて作っています。たとえば動画のJavaScriptコードは次のようになります。

slide("stage", function() {
var a = createPoint(230, 50, "A");
var b = createPoint(80, 300, "B");
var c = createPoint(350, 350, "C");

var m_ab = middlePoint(a, b, "D");
var m_bc = middlePoint(b, c, "E");
var m_ca = middlePoint(c, a, "F");

var l1 = createLine(m_ab, c);
var l2 = createLine(m_bc, a);
createLine(m_ca, b);
var g = cap(l1, l2)[0];
g.name = "G";
createLineSegment(a, b);
createLineSegment(b, c);
createLineSegment(c, a);
});

スライド

デモ動画

作図ツールcal.js(其ノ拾)