前回のあらすじ
hatena blogに、javascript, html/css, そしてsvgを組み込む練習をしてきた。その試みも、今回がいよいよ最終回である。これで、問題文が提示した幾何学的状況のシミュレーターのようなものが完成となる。
まずはsvgで問題文に設定された円と放物線を表示
まずは、これまでに彫られた成果を列挙していこう。まずは、svgである。
この図では、$a=0.75$に設定してある。問題の答えは$a>5/4$であったから、$a=5/4$の時に、円と放物線は接することになり、$a$がそれよりも大きな値をとると交点が０になるはずである。ということで、$a=5/4$の場合を描画してみよう。
SVGの中で円の中心座標を決めているのはcxとcyである。今はy軸に沿って円を動かすので、cyだけに着目すればよい。理論値（問題文における値）は$a=0.75$だが、svg座標ではcy=112.5に対応している。理論座標値とSVG座標の間の変換式は（以前求めてあるように） \begin{equation} \text{cy} = \text{YSVG}/2 - S*a \end{equation} である。今回のプロジェクトでは、YSVG=300, S=50に設定してあるので、$a=5/4$はcy=87.5である。書き換えると次のようになって、予想通り放物線と円が接している状況が再現できた。
スライダーとパラメータ表示窓の作成
次は、パラメータ$a$を動かすためのスライダーと、その値を表示する窓を作成しよう。
次に、円のidをcircle2としたので、まずはjavascriptに、このsvg要素を認識させる。また、関数名をdisp()からmvCircに変える。そして、スライダーの値を$a$とみなし、svg座標に変換してからsvgのcy要素に書き込む。
var YSVG=300, Scale=50; var sb = document.getElementById('slb1'); var c2 = document.getElementById('circle2'); function mvCirc(){ val_a.innerHTML = sb.value; c2.setAttribute('cy',YSVG/2.0-Scale*Number(sb.value)); }
完成である。問題を解く前に、このシミュレーターで大体の値（正解の値）がわかる。
