前回のあらすじ
共通テスト2014の数学の幾何学の問題(数A、数I)で、今年は星型の図形を分析する問題が出た。問題を解く前に、シミュレーターをsvg+javascriptで作ってみようと思い、プログラミングを始めた。問題の一般性を失わせずに、点A,C,P,Qをy軸に置く配置を決めたあと、自由度が2つ残る点Dをどう置くか検討し、そのうちのひとつ「点Aからの距離」の自由度を表現するプログラミングまで完成した。
今回は残りの自由度である回転を盛り込む。
回転の自由度
前回のプログラムで回転角はthetaとしてすでに導入している。ただ、角度を22度やに固定した。今回はこの縛りを外すだけなので、基本的には前回と同じ内容のプログラミングとなる。したがって、特記事項はないのでそのまま完成版をここに書いてしまおう。
要点だけまとめると、スライダーと表示窓をコピーして似たような場所に配置する。このスライダーは回転角を制御するうものにする。したがって、このスライダーの動作としてrotate()という関数を埋め込むことにする。回転角はy軸からの角度であり、点Dの位置を第2象限と第4象限に制限する(つまりy軸を超えて負の領域に行かないように制限)と、$0^\circ<\theta<90^\circ$となる。
これで一応は目的の動作が実現できたが、コードにダブりが多いので整理することにする。回転と拡大の部分で共通する計算内容をmainjob()という形の関数にして抜き出すことにする。以下のコードのような感じにする。
function mainjob(){ S = Number(slb1.value); theta = Number(slb2.value) * PI / 180.; xd = Xsvg + Ssvg*S*Math.sin(theta); yd = Ysvg - Ssvg*(5.0 - S*Math.cos(theta)); pd.setAttribute('cx',xd); pd.setAttribute('cy',yd); lad.setAttribute('x2',xd); lad.setAttribute('y2',yd); td.setAttribute('x',xd+20);td.setAttribute('y',yd+20); } function rotate(){ mainjob(); win2.innerHTML = slb2.value; }
S3:---
θ:---