共通テスト2024（数学）：星型の図形 part 2

前回のあらすじ

共通テスト2014の数学の幾何学の問題（数A、数I)で、今年は星型の図形を分析する問題が出た。問題を解く前に、シミュレーターをsvg+javascriptで作ってみようと思い、プログラミングを始めた。まずは、点A,C,P,Qをy軸に並ばせ、次の一手として点Dをどうやって置くか考えることになった。今回は点Dを置くところまでやる予定。

点Dの位置は一意には決まらず、二つの自由度が存在する。このブログでは、それを次のように選ぶことにした。

1. 点Aからの距離（S）
2. y軸からの角度（θ）

これはつまり、点Aを起点とした極座標で点Dを表現せよ、という意味である。このアイデアに基づき、プログラミングを進めてみよう。

極座標を用いた点Dの表現

原点を点Qとするデカルト座標を（前回と同様に）引き続き用いる。y軸が決まっているので、x軸も自動的に決まる。

この座標系における点Dの位置ベクトルを$\boldsymbol{r}_D$と表すことにし、点A周りの極座標を使うと次のようになる。 \begin{equation} \boldsymbol{r}_D =\boldsymbol{r}_A + S\boldsymbol{e}_r(\theta). \end{equation} ただし、動径方向の基底ベクトル$\boldsymbol{e}_r(\theta)$は \begin{equation} \boldsymbol{e}_r(\theta)=\cos\theta\boldsymbol{e}_x+\sin\theta\boldsymbol{e}_y \end{equation} であり、点Aの位置ベクトルは（前回記事の座標系の設定によると） \begin{equation} \boldsymbol{r}_A=5\boldsymbol{e}_y \end{equation} である。

直線ADを伸ばしたり縮ませる

まずは自由度(1)である$S$を使った点Dの移動を実現してみよう。最初の位置としてx軸上に置いてみる。その初期値は理論座標で(2,0)としてみる。その上で、点Aと点Dを直線で結んでみる。その次に、点Dを動かすためのスライダーを置き、最後にスライダーの値を表示する窓をつけよう。

ここから先ががjavascriptの仕事である。まずはスライダーと窓をオブジェクトとして認識させる。

slb1 = document.getElementById('slb1');
win1 = document.getElementById('win1');

つぎに、スライダーが動かされた時に対応する関数をextend()として定義する。スライダーの値はslb1.valueで引用できるので、これを窓に書き込むことにする。

function extend(){
　win1.innerHTML =slb1.value;
}

これでスライダーの値が表示されるようになった（下ののsvg図形で試してみることができる）。

次に、点Dを動かしてみたい。最初はSの値を使って伸ばしたり縮めたりするだけ（自由度１だけ）の機能を盛り込む。点Dの座標(xd,yd)を宣言し、極座標の表現で定義する。角度は今固定されていて、$\theta_0=\tan^{-1}(2/5) * 180 / \pi \simeq 22^\circ$と計算できる。したがって、 \begin{equation} xd = xa + S \cos (\theta_0 + 3\pi/2),
\end{equation} \begin{equation} yd = ya + S \sin (\theta_0 + 3\pi/2) \end{equation} と表すことができる。$S$がslb1.valueである。これをSVG座標に変換したものをSVGに書き込むようにプログラムする(setAttributeを使う）。

これで自由度１を利用した点Dの移動が可能となった（下の図とプログラム）。

   var Xsvg = 200, Ysvg = 300, Ssvg = 50;
   var S, theta;
   var slb1 = document.getElementById('slb1');
   var win1 = document.getElementById('win1');
   var pd = document.getElementById('pD');
   var lad = document.getElementById('lAD');
   var xd, yd;
   function extend(){
　 S = Number(slb1.value);
     theta = Math.atan(2.0/5.0);
     win1.innerHTML = S;
     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);
   }

S2:---

次回は、自由度２を利用して、点Dが回転できるように改良したいと思う。