共通テスト2024（数学）：星型の図形 part 4 - 複天一流：どんな手を使ってでも問題解決を図るブログ

前回のあらすじ
点T,Sの設置は実は簡単

前回のあらすじ

共通テスト2014の数学の幾何学の問題（数A、数I)で、今年は星型の図形を分析する問題が出た。問題を解く前に、シミュレーターをsvg+javascriptで作ってみようと思い、プログラミングを始めた。問題の一般性を失わせずに、点A,C,P,Qをy軸に置く配置を決めたあと、自由度が２つ残る点Dをどう置くか検討し、「点Aからの距離」および「y軸からの角度」の２つの自由度を表現するプログラミングまで完成した。

今回は問(1)を解くために必要な点T,S,Rの設置を目指す。

点T,Sの設置は実は簡単

点T,Sは、線分AD上にあるので、極座標表現を使っている我々にとっては、実に簡単な問題である。それぞれADの長さの1/5, 2/5の場所にあるので、Sの代わりにS/5と2S/5を代入すればよいのである。

まずは、svgにおいてT,Sの初期値で点を打ってしまうことにする。Dの初期値は$(S,\theta)=(\sqrt{29},22^\circ)$なので、SVG座標に換算すると、 \begin{equation} x_T = Xsvg + Sc * (S\sin\theta) \simeq 220.17 \end{equation} \begin{equation} y_T = Ysvg - Sc * (y_A - S\cos\theta) \simeq 99.93 \end{equation} したがって、(xt,yt)=(220,100)とする。同様に(xs,ys)も計算すると(xs,ys)=(240,150)となる。この結果を使ってsvg図形の点T,Sを描く。

 <circle cx='220' cy='100' r='5' stroke='black' stroke-width='3' fill='black' id='pT'/>
 <circle cx='240' cy='150' r='5' stroke='black' stroke-width='3' fill='black' id='pS'/>

次にこれらのsvg要素をjavascriptで認識させる。

   var pt = document.getElementById('pT');
   var ps = document.getElementById('pS');

これでjavascriptで制御できるようになった。

回転と拡大で同じような処理が続くので、座標変換とその結果をsvgに反映させる部分だけをmainjobの仕事にする。このとき、mainjob引数を持たせ、mainjob(scale,pO)とする。scaleのところには、比率を入れる。点Tの場合は1/5,点Sの場合は2/5、点Dの場合は5/5=1である。pOはそれぞれの点に対応するオブジェクト名を入れる。例えば点Dの場合にはpdである。

   function mainjob(scale,pO){
      S = Number(slb1.value) * scale;
      theta = Number(slb2.value) *  PI / 180.;
      xd = Xsvg + Ssvg*S*Math.sin(theta);
      yd = Ysvg  - Ssvg*(5.0 - S*Math.cos(theta));
      pO.setAttribute('cx',xd); pO.setAttribute('cy',yd);
   }

T,S,Dと三つの点をmainjob()関数で実装するが、extend()とrotate()で繰り返しが発生するので、まとめてsetAD()という関数にしてしまう。

   function setAD(){
     mainjob(1./5,pt);
     xt = xd; yt = yd;
     mainjob(2./5,ps);
     xs = xd; ys = yd;
     mainjob(1.0,pd);
     lad.setAttribute('x2',xd); lad.setAttribute('y2',yd);
   }

以上で、線分AD上の点すべてを回転し、拡大するための準備が完成した。

ここまできたら、線分CSとQDも描いてしまおう。

以上の改良点を含んだものをコードに書き出してみると、次のようになる（ラベルの部分も付け足した）。