UnitaryJSでグラフを書く

UnitaryJSは数学のようにグラフを書くことができます。

Graphクラスからインスタンス生成

まず、Graphインスタンスを作ります。Graphコンストラクタには1変数関数、まあ要するに数学で言うf(x)ともう一つ、スケールを渡します。スケールは1pxがグラフ上の何目盛に当たるのかという数値です。グラフ上の1目盛が10pxなら1/10で0.1を指定してください。

バージョン0.0.3から仕様変更しました。グラフ上の1メモリにいくつピクセルがあるか、がスケールとなります。10pxで1メモリならスケールは10となります。こうすると以下のようなメリットがあります。

new Unitary.Point(1 * scale,1 * scale); // グラフ上の(1, 1)の点です
new Unitary.Graph(f, scale * 10); // 10倍拡大します

こんなバージョン0.0.3という早い段階で破壊的変更をしてしまったこと、お詫びします。

Graphのコードだとこんな感じ

// var graph = new Unitary.Graph(function (x) {return x * x;}, 0.1); // 0.0.2まで
var graph = new Unitary.Graph(function (x) {return x * x;}, 10); // 0.0.3から

x軸とy軸を足す

これをCanvasに追加するとグラフは書けます。しかし、このままだとx軸もy軸もありません。

UnitaryJSでは標準でx軸y軸となるオブジェクトを用意してあります。 Unitary.XAxisとUnitary.YAxisです。この二つもCanvasに追加してあげてください。

グラフの原点位置を指定する

ただ、これでもまだ不十分です。何がかって、グラフの原点がキャンバスの左下ちょうどなんです! ナンセンスですよね。これはCanvasの原点を変更することで対応できます。Canvasの原点はoriginプロパティです。originプロパティにPointのインスタンスの値を渡してください。

この時のoriginは左下が原点、x軸右向きが正、y軸上向きが正で指定してください。

originの値を変えてもグラフに変更加えたりする必要はありません。

var graphCanvas = new Canvas('graph'); // HTML側でcanvas要素は用意してください
graphCanvas.add(Unitary.XAxis);
graphCanvas.add(Unitary.YAxis);
graphCanvas.add(graph); // 上の例のgraphです
graphCanvas.origin = new Unitary.Point(20, 20);

このくらいすればまあ見る気が湧いてくるぐらいには整ったグラフが書けます。原点にUnitary.Textを使ってOと書いたり必要そうな目盛をUnitary.Textで加えるとよりそれっぽくなります。