イントロダクション
前回は、グラフの土台→X軸とY軸、補助線の描画を行いました。
こんなグラフの土台を作りました。
いよいよ関数を描画
ここで問題があります。
＜問題＞
- 原点の位置(0, 0)が画面上の左上にある
- しかし描画したいのは画面の中心が(0, 0)
ここの問題を解決するのに以下の方法でやりました。
中心の座標を出せる様にXとYの値を変換するメソッドを作成しました。
下の様なメソッドです。
/**
* X, Yの値をグラフ上の値から描画する座標に変換する。
* @param value グラフ上の値(0,0)は画面の中心
* @return 描画するCanvas上の値(0,0)は画面の左端
*/
private double convertCenter(int value, boolean isX) {
int graphValue = 0;
if (isX) {
graphValue = value + (CANVAS_SIZE / 2);
} else {
graphValue = (CANVAS_SIZE / 2) - value;
}
return graphValue;
}
そして、関数を描画するメソッド
/**
* 関数を描画する。
* @param ctx Canvasから取得したクラス
* @param root レイアウトクラス(シーン追加する)
*/
private void drawFunction(GraphicsContext ctx, VBox root) {
/* 座標系を画面の端っこ(0, 0)を画面の中心にする */
ctx.setFill(Color.RED);
// 傾き
int a = 1;
for (int x = -(CANVAS_SIZE / 2); x <= (CANVAS_SIZE / 2); x++) {
int y = y_ax(a, x);
ctx.fillOval(convertCenter(x, true), convertCenter(y, false), 2, 2);
}
}
/**
* y=axの計算を行う。
* @param a 傾き
* @param x Xの値
* @return yの値
*/
private int y_ax(int a, int x) {
return a * x;
}
上のコードではfor文の中にある「x」が-300〜300まで移動するときのグラフを描画しています。※CANVAS_SIZE / 2 = 300
描画結果(Git)
赤い線が関数を描画下部分です。
次は、機械学習の教科書に戻ります。
＜＜＜ 前回
でわでわ。。。
