スタートページJavascriptCANVAS

仮想XY軸の設定:xycoordinate.jsの利用


仮想XY軸CANVASの必要性と概要

CANVASを用いて右図のようなグラフを作成したいことが多くあります。このとき、CANVASをそのまま使うのでは、次のような不都合があります。

これを解決するために、CANVASライブラリ「xycoordinate.js」を自作しました。
 CANVASの左下隅を(xmin, ymin)、右上隅を(xmax, ymax)と定義して、XY座標系を設定します。その座標系での任意の点P(x, y)を用いて、グラフや多様な図形を描くことができます。

右図のグラフを作成するソースリストは次の通りです。
SCRIPT部
<script src="../xycoordinate.js"></script>
<script>
function init() {
var x,y, x0,y0, dx;
  // 座標系設定
  cw = 400; ch = 400;            ・・・A
  xmin = -2; xmax=4; ymin=-2; ymax= 4;
  setCanvas("canvas1", "black");      ・・・B
  drawLine(xmin,0, xmax,0, "aqua", 1);   ・・・C
  drawLine(0,ymin, 0,ymax, "aqua", 1);
  drawText("0", 0, -0.2, "center","white","14px 'MS ゴシック'");
  drawText("1", 1, -0.2);
  drawText("2", 2, -0.2);
  drawText("1", 0, 1, "right");
  //グラフ表示               ・・・D
  dx = (xmax-xmin)/100;
  x0 = xmin;
  y0 = x0*(x0-1)*(x0-2);
  for (x=xmin+dx; x<=xmax; x=x+dx) {
    y = x*(x-1)*(x-2);
    drawLine(x0,y0, x,y, "white", 4);   ・・・E
    x0 = x;
    y0 = y;
  }
}
</script>
BODY部
 :
<canvas id="canvas1" width="400" height="400"></canvas>


xycoordinate.jsの関数群


この下に「canvas id="canvas2" width="400" height="400"」のCANVASがあります。

xycoordinate.jsの図形描画関数を図形に合わせて列挙します(表示)。



数式グラフ描画のヒント

数式の入力(陽関数 y=f(x))

数式の指定
y=f(x)=
独立変数xの計算範囲とグラフの表示範囲
xmin= xmax= ymin= ymax=
(入力項目をいろいろ変えて[実行]してください)

数式のグラフでは、数式 y=f(x) をフォームから与えられると便利です。また、グラフの範囲を広くしたり狭くすることも必要です。
ソースリスト
SCRIPT部
function rei3() {
  var f, x,y, x0,y0, dx;
  // 入力データの読込
  f = document.form3.f.value;         ・・・A
  xmin = eval(document.form3.xmin.value);   ・・・B
  xmax = eval(document.form3.xmax.value);
  ymin = eval(document.form3.ymin.value);
  ymax = eval(document.form3.ymax.value);
  // xy座標系の設定
  cw = 400; ch = 400;
  setCanvas("canvas3", "black");
  drawLine(xmin,0, xmax,0, "aqua", 1);
  drawLine(0,ymin, 0,ymax, "aqua", 1);
  // 初期値設定
  dx = (xmax-xmin)/100;
  x = xmin;
  x0 = x;
  y0 = eval(f);                ・・・C
  // ループ
  for (x=xmin+dx; x<=xmax; x=x+dx) {
    y = eval(f);               ・・・C
    drawLine(x0,y0, x,y, "white", 4);
    x0 = x;
    y0 = y;
  }
}
BODY部
  <form name="form3">
  数式の指定<br>
  y=f(x)=<input type="text" size="30" name="f" value="x*(x-1)*(x-2)"></input>><br>
  独立変数xの計算範囲とグラフの表示範囲<br>
  xmin=<input type="text" size="3" name="xmin" value="-2"></input>
  xmax=<input type="text" size="3" name="xmax" value="4"></input>
  ymin=<input type="text" size="3" name="ymin" value="-2"></input>
  ymax=<input type="text" size="3" name="ymax" value="4"></input>
  <input type="button" value="実行" onclick="rei3()"></input>
  </form>


陰関数(f(x,y)=0)

数式の指定
f(x,y)==0
グラフの表示範囲
xmin= xmax= ymin= ymax=

SCRIPT部
function rei4() {
  var f, x,y, dx, eps, fxy;
  // 入力データの読込
  f = document.form4.f.value;
  xmin = eval(document.form4.xmin.value);
  xmax = eval(document.form4.xmax.value);
  ymin = eval(document.form4.ymin.value);
  ymax = eval(document.form4.ymax.value);
  // xy座標系の設定
  cw = 400; ch = 400;
  setCanvas("canvas4", "black");
  drawLine(xmin,0, xmax,0, "aqua", 1);
  drawLine(0,ymin, 0,ymax, "aqua", 1);
  //グラフ表示
  dx = (xmax-xmin)/cw; dy = (ymax-ymin)/ch;           ・・・A
  eps = 0.01;
  for (x=xmin; x<=xmax; x=x+dx){                 ・・・B
    for (y=ymin; y<=ymax; y=y+dy) {              ・・・B
      fxy = eval(f);                     ・・・C
      if (Math.abs(fxy) < eps) drawPoint(x,y, "white", 4);  ・・・D
    }
  }

}
BODY部
  数式の入力(陽関数 y=f(x))とほぼ同様なので省略

陰関数の場合は、xの値からyを求めることはできません。それで、グラフ表示(赤字の箇所)が大きく変わります。このロジックは次のようになります。

非常に無駄な計算が多く非効率ですが、簡単で汎用的に使える利点があります。