【JavaScript】円の方程式からグラフを描いてみる/アロー関数の利用

前回，二次関数のグラフを描いてみました。今回は円のグラフを描いてみましょう。

円を関数のグラフとして描く

Javascript ではそもそも円を描く命令があるのですが，今回は数学で習う円の方程式 $x^2+y^2=16$ としてグラフを描いてみます。つまり，$x$ に次々と値を代入して $y$ の値を出し，それをグラフ上の点としてそれぞれの点どうしを直線でつなぐことで円にしていこうというわけです。

もし，$x$ の値が 0 ならば，$y=\pm4$ となります。このように $y$ の値が2つ出てくることを考慮する必要があります。

<!DOCTYPE html><html><body><script>

document.write('<svg width=400 height=400><line x1=0 y1=200 x2=400 y2=200 stroke="black"/><line x1=200 y1=0 x2=200 y2=400 stroke="black"/>');

let x = -5; //x座標

//y=f(x)として計算結果を返す

let f = e => {
  return Math.sqrt(16-e*e);
};

for(let i=0; i < 100; i++) { //処理を100回繰り返し

  //始点と終点の座標をもとに直線を引く
  document.write('<g transform="translate(200,200)scale(40,-40)"><line x1='+x+' y1='+f(x)+' x2='+(x+0.1)+' y2='+f(x+0.1)+' stroke="blue" stroke-width="0.05" /></g>'); //yが正の側

  document.write('<g transform="translate(200,200)scale(40,-40)"><line x1='+x+' y1='+(-f(x))+' x2='+(x+0.1)+' y2='+(-f(x+0.1))+' stroke="blue" stroke-width="0.05" /></g>'); //yが正の側

  x += 0.1;　// xの値に 0.1 を加える
};

document.write('</svg>');

</script></body></html>

関数を定義する

前回の二次関数のときと比べると直線を引く部分はほぼ同じですが，それ以外の部分は大きく変わりました。今回用いるのはアロー関数です。

アローとは矢印のことだから，=> の部分です。関数とは，それにある値を与えると計算結果を返してくれるものです。数学では，たとえば $f(x)=x^2+1$ のように表現し，$y=f(2)$ とすると $y$ に $5$ が代入されます。このときの $f$ が関数の名前ということです。上の構文も関数の名前を f として関数 f(e) を定義しています。e を引数(ひきすう)といいます。数学と書き方が違いますが，プログラミングではこう書くのだと思って覚えましょう。次の行の return は結果を返す部分です。ここでは $y$ の値を求めたいので

$x^2+y^2=16$

$y^2=16-x^2$

$y=\pm\sqrt{16-x^2}$

とします。つまり，$f(x)=\sqrt{16-x^2}$ と定義します。$y$ に同時に二つの値を代入することはできないので，平方根のマイナスの部分はとりあえず考えないことにします。これで，円周上の点の $x$ 座標が 1 なら $y$ 座標は $f(1)$ と表すことができます。

  document.write('<g transform="translate(200,200)scale(40,-40)"><line x1='+x+' y1='+f(x)+' x2='+(x+0.1)+' y2='+f(x+0.1)+' stroke="blue" stroke-width="0.05" /></g>'); //yが正の側

これは直線の始点の座標を(x，f(x))，終点の座標を(x+0.1，f(x+0.1)) としているということです。y が負の側については始点(x，-f(x))，終点(x+0.1，-f(x+0.1))とすれば円の下半分を描くことができます。

これで円が描けました。左右の端に若干歪みがありますが，x の変位をもっと細かくすれば解決できます。