2020年3月17日火曜日

頂点が原点にない放物線の接線

 前回「JavaScript: 2 次曲線の接線の方程式」で、基本的な放物線の接線を描きました。
 今回は、放物線の頂点が、x 軸と y 軸の方向になにがしか移動(平行移動)していても、同様に接線を描線するという、発展形に挑戦してみたのです。

  放物線の平行移動
 ◎  参考書には、一般に関数[ y = f (x) ]のグラフを x 方向にプラス p y 方向にプラス q だけ平行移動したグラフの式は、
yq = f (xp)  ⇒  y = f (xp) + q
となることが書かれています。
 ●  関数の演算式に傾き m の記号を用いて、さらに x, y 軸の平行移動を a, b と置き換えたら、
● y = f (x) = mx
● yb = m (xa)
  ⇒  y = m (xa) + b
の形になるわけです。
◈  2 次関数[ y = f (x) = m x2 ]のグラフの平行移動だと
● yb = m (xa)2
  ⇒  y = m (xa)2b
という具合になります。
  y 切片 [y-intercept]
 切片というのは、直線や曲線が座標軸と交わるとき、x 軸あるいは y 軸との交点を表します。また、その交点の座標の値の意味にも使われるのでした。
直線の方程式を表す際の y 切片の記号には、今後は c を用いて
y = m xc
と記述することといたしましょう。
 この方程式なら、座標 (a, b) を通る傾き m の直線の、切片 c の計算式も混乱せずに書けるのですね。
◎ 座標 (a, b) を通る傾き m の直線の方程式は、次のような計算式となります。
y = m (xa) + b = m xm ab
●  y 軸との交点の座標を (0, c) として、
y = m xc
の方程式の形で、切片を記述するためには、
c = - m ab = bm a
という、簡潔な計算式を覚えておくだけでよいわけです。

◈ なにはともあれ、
y = f (x) = a x2
 のグラフを平行移動させた、次の方程式が描く放物線に、接線を引いてみましょう。
y = f (xp) + q = a (xp)2q

  ●  a  =     ●  p  =     ●  q  = 
◈  接線との共有点座標 :   x =      , y = 

 座標 (x, y) を通る傾き m の直線
 ▣ 接線の 傾き : m = 
 ▣ 接線の 切片 :  c = 

2020年3月14日土曜日

JavaScript: 2 次曲線の接線の方程式

 曲線を描く関数を微分することで、接線の方程式を求めることができます。
 (接線は直線なので、その方程式は、1 次関数となります。)

◎ 方程式に導関数が含まれていれば微分方程式になるのですね。

● 微分して得られる微分係数は関数として考えられるので、導関数と称されるのです。
 導関数[ ◈  ディーワイ、ディーエックス  ◈ ]
▣     dy  
 
  dx  
◈ この下の見本の放物線[ 2 次関数: y = x2 ]の、任意の地点 P の接線の方程式は、放物線の方程式を微分することで求めることができます。
◈ この接線の傾き 1 次関数: y = 2x ]が、微分方程式 y = x2 ]の導関数になります。
▸ 2 次関数を微分して求めた接線の傾きは、2 次関数の導関数になるわけです。

 微分の計算の復習
● 考え方としては、まず任意の 2 つの地点間の傾き(平均変化率)を求めました。
 2 地点の座標と傾き m
  ● P ( p , p2 )
  ● Q ( q , q2 )
▣ m =      q2p2  
 
qp
とすれば、差分 Δx = h における傾き m は、 q の値を、( ph) と置き換えて、
 [ q2 = ( ph)2 = p2 + 2phh2 ]
と、計算されるので、
▣ m =     ( p2 + 2phh2 ) - p2     =     2phh2  
   
( ph) - p h
したがって、
▣ m =     2phh2     =     h × (2ph )     =  2ph  
   
h h
となり、ここで p x として、m x の関数 y と書けば、次の式が導かれます。
  ▣ y = f (x) = 2xh
◯  さらにここで、h が限りなく 0 に近づくとすると、数学上の書式として、
  ▸ y = 2x
であるかのように表現されることになります。
◎ この関数(瞬間変化率)は、もとの関数[ 2 次関数: y = x2 ]の導関数で、微分係数なのでした。

 ✥ 微分係数の演算式と計算結果
    ● y = f (x) = x2 の 場合
 ▣ y´ = f ´(x) =     dy  
 
  dx  
 ▣ f ´(x) =   lim
 Δx → 0 
  f (xΔx ) - f (x)     =  2x
 
Δx

 ✥ 1 次関数の方程式と切片の計算
▣ y = axb
▣ b = y ax
  ※ 切片 b の計算に必要なのは、
    傾きと、1 点の ( x , y ) 座標です。

● P ( x , y ) 座標の微分計算
◈ もとの 2 次関数
▣ y = f (x) = x2
◈ 導関数(接線の傾き)
▣ y´ = f ´(x) = 2x
◈ 2 次関数の曲線の接線の傾きと切片の計算
〔 ※ 微分方程式と座標点 P ( x , y ) における接線の傾きと切片 〕
▣ f (x) = y = x2
▣ f ´(x) = 2x
▣ b ( = y ax )
    = y - 2x × x = x2 - 2x2
    = - x2 = - f (x)
◈ 点 P ( x , y ) を通る接線の方程式
〔 ※ 接線の各座標を点 P´ ( px , py ) とする〕
◈ py = f ´(x) × px f (x)

◆ 2 次関数の曲線に対する接線の方程式の基本形 ◆

 放物線の x 座標:  , y 座標:
     f ´(x)   = 2x = 
 接線の切片 b と接線の x 座標に対する y 座標
     ▣ b = - x2 = - f (x)   =  
◆ 接線の方程式
  ◈   y   = ×    + b   =  

―― 例により、コピペしてそのまま使える、JavaScript の見本をテキスト化して掲載した最新版のページを、以下のサイトで公開しています。

JavaScript: 円の接線と面積
http://theendoftakechan.web.fc2.com/eII/hitsuge/arcus/limit.html

2020年3月12日木曜日

円の接線の方程式

 数学上認められている、無限に循環を繰り返す《循環小数》の計算があります。

「循環小数の作り方」by takechan


 1 ÷ 1 = 1
 1 ÷ 2 = 0.5
 1 ÷ 3 = 0.333333333333333 ……
 1 ÷ 4 = 0.25
 1 ÷ 5 = 0.2
 1 ÷ 6 = 0.166666666666666 ……
 1 ÷ 7 = 0.142857142857142 ……
 1 ÷ 8 = 0.125
 1 ÷ 9 = 0.111111111111111 ……

◎ 〈1 ÷ 3〉〈1 ÷ 6〉〈1 ÷ 7〉〈1 ÷ 9〉が、循環小数となっています。
 無限に繰り返される数の上に〈・〉をつけて記述される場合もあります。繰り返しの数が複数にわたる場合には、最初と最後の数字の上にだけ〈・〉をつけます。

 上につけられる〈・〉が見つからなかったので、今回は〈̊〉で代用して記述してみることにします。

「循環小数の書き方の模索」by takechan


  0.3̊ = 0.333333333333333 ……
  0.16̊ = 0.166666666666666 ……
  0.1̊42857̊ = 0.142857142857142 ……
  0.1̊ = 0.111111111111111 ……

 さてここで、数学マジックに惑わされないように気をつけつつ、〈1 ÷ 3〉に注目してみましょう。
 これを分数の形で 3 倍すると、もちろん 1 になります。が、小数の形で 3 倍すると、

 [(3 分の 1)× 3 = 1 ]
  0.3̊ × 3 = 0.9̊ = 0.999999999999 ……

となることは、明白なのです、困ったことに。

◎ そういうわけで、

  0.9̊ = 1

であることが数学的に証明されてしまうのだ。説明しよう。

「循環小数に関する証明の一例」


 計算を簡単にするために、まず
  0.9̊ = a
 と記号化して、それを 10 倍してから、1 倍を引く。
  a × 10 = 10a
  10a - a = 9a
 これを、実際の数字でやってみる。
  0.9̊ × 10 = 9.9̊
  9.9̊ - 0.9̊ = 9
 したがって、[ 9a = 9 ]となるので、
   a = 1
 ∴ 0.9̊ = 1

 無限大〈 ∞ 〉の怪物に立ち向かうためには、この魔法を納得する必要があるのでしょうか?
 このまま、騙されたと思いつつも、極限の世界へ突入することになります。


微分からの円の接線の方程式


◈ 極限 (limit) の世界


 極限というのは、いわば〈 ∞ 〉の一歩手前、〈 0 〉の一歩手前、を考える作業です。
 今回は、微分の入門編を目的としていますので、〈 0 〉の一歩手前を考えることにします。



 限りなく 0 に近づく値という場合、たいていは、プラスの数がイメージされているようです。
 この極限について、座標の原点を中心とする円 O の、2 点間を結ぶ直線で考えてみます。
▣ 円周上の 2 点をそれぞれ、点 P (px, py) 、点 Q (qx, qy) とします。
円と交差する直線の傾きを計算することになります。
 ふたつの点は、円周上の任意の場所にありますが、ふたつとも同じ位置の際には、2 点間の距離が限りなく 0 に近づいた状態であると、仮にみなしておきます。
 そういう極限状態の際に、直線 PQ は円 O の接線になるのでした。

  ▣  P 座標の角度 °    ▣  Q 座標の角度 °
P ( px py )
P 座標 ( )
Q ( qx qy )
Q 座標 ( )
 ▶ 2 点間の平均変化率(直線の傾き)
      (qy - py)  ∕  (qx - px) = 
◯ 円の接線三角関数の微分
●  PQ の座標の角度 = θ(度) として
  [ sin x の微分は、(sin x と記述される ]
● (sin θ )´ = cos θ
● (cos θ )´ = - sin θ
P, Q の座標の値を (x, y) とするとき
▣ 接線の切片: y - ( - x ÷ y × x )
▣   = yx2 ÷ y
 ◎ 円の方程式
⛞  x2 + y2 = r2
 ◎ 円の接線の方程式
 ▶  x2 + y2 = r2 より、
半径 r の円周上の座標を ( r*cosθ r*sinθ ) とし、さらに
px = cosR = r*cosθ
py = sinR = r*sinθ
と記号化して、円周上の x 座標、y 座標を記述するとき、
接線の x , y 座標の方程式は、
▣  y = f (x) = -    px    xpy +     px2 
  py   py
     = -    px    ( xpx) + py
  py  
▣  f (x) = -    cosR    x + sinR +     cosR2 
  sinR   sinR
     = -    cosR    ( x - cosR) + sinR
  sinR  
● ここで記号化した px , py , cosR, sinR は、それぞれ文字ごとには分割できない記号として用いています。
● また通常、混乱を避けるために px , py は、px , py のように、添え字で記述されるようです。

さて、極限の値を考えるには、まずグラフ座標の 2 点間の傾きを求めます。
 これが、2 つの値の間の平均変化率になります。
 最初に登場する記号は h で、これは 0 よりも大きい、とても小さな数を示しています。
 この h x の値の差 (difference) を表しているため、Δx とも書かれます。Δ (delta) はギリシャ文字で、このとき Δx は分割できない 1 つの記号として表現されており「デルタエックス」と読みます。
◈ 平均変化率は、
  Δy  
  Δx  
で表現され、さらに、[ y = f (x) ]を微分した関数は[ y´ = f ´(x) ]と書かれ、
  dy  
  dx  
という具合に、用いられる記号も、変わります。

◈ 微分で求められる関数は「微分係数」といって、見た目も分数で、分数のように扱われることもあるようなのですけれど、実は分数ではないそうです。基本的にひとかたまりの記号として扱われて「ディーワイ・ディーエックス」、「ディーワイ・バイ・ディーエックス」もしくは「ディーエックス分のディーワイ」と読むことになっているようです。

2020年3月10日火曜日

〈円の面積〉は《円周の積分》であるということ

重力加速度のグラフ


 高校の数学で学ぶ、微分・積分では、なにやら積分のほうが難しく感じられるのですけれど、
▣ 移動距離 = 速度 × 時間
というのは、それらの速度を y 軸に、時間を x 軸にして、速度変化を示す時間の 1 次関数のグラフを書いて、面積を計算すればよかったのでした。
 距離(長さ)という 1 次元が、面積という 2 次元で、表現されているわけです。
このように、等速直線運動等速度運動)で離れていく距離だけでなく、等加速度運動によって離れていく距離も計算できるその手法は、
▣ 距離は速度の時間積分である
と、表現されるのです。
▣ y = f (x) =[時間] (s) × [速度] (m/s) ÷ 2  =  [距離] (m)
▣ y = f (x) =   (s) × (m/s) ÷ 2  =  (m)
◈ 上の操作可能な図は、初速を 0 (m/s) とした、
重力加速度による速度変化のグラフです。
一応、地上付近では一定の加速度であるとみなされていて、
(空気抵抗さえなければ、)
一定の割合で加速し続けていくことになっています。
◎ 重力加速度 = 9.8 メートル毎秒毎秒 ( g = 9.8 m  ∕ s2 )
◈ このグラフで、時間 (x) を底辺にとれば、
速度 (y) を高さにした、直角三角形の面積を計算することで、
移動距離 (l) の推移がわかります。
◈ このように使い回す方程式などの計算式を
関数函数 (function) といって、yx の関数である場合、
y = f (x)
と、書かれます。
●  最初の[ y = f (x) ]は、[速度=加速度×時間]です。
●  ここでは、次の[ y = f (x) ]であるところの[ l = f (y) ]が積分の計算と同じ、という次第です。
( ※ 幸いなことに[ y = f (x) ]は 1 次関数なので、直線のグラフで表されました。)
●  そういった事情で[ l = f (y) ]は[面積=底辺×高さ÷2]という、三角形の面積の公式で代用できるのです。
●  高校の物理では、距離を l 、加速度を a 、時間を x として、
l =    1   ax2  
 2 
という公式で学ぶことになっているようです。
ここで距離 l y 軸にしたら、曲線のグラフになり、
さらに、その曲線のグラフを微分すると、
接線の傾きとして速度(瞬間速度)が算出されます。
 単位を含んだ掛け算とか割り算の話は、以前にブログで書いていたので、これも使い回しておきましょう。

「指数の引き算は割り算として考える」

(2017年3月16日木曜日)

単位の話 またたび
思い起こすと、速度の単位は〝メートル毎秒〟などであらわされますが、
加速度になるとこれが〝メートル毎秒毎秒〟などと、わけのわからぬものになります。

これは、たとえば、〝 5 メートル毎秒毎秒〟の加速度という場合、
「 1 秒につき〝 5 メートル毎秒〟の速度が追加もしくは削減される」
ことを表現しています。
(ブレーキも、計算上は、加速度なのです。マイナスをつけて考えます。)

〝 5 メートル毎秒〟というのは、1 秒ごとに 5 メートル移動する能力ですから、
〝毎秒その能力が変化していく〟という状態なわけです。
だから、〝 5 メートル毎秒毎秒〟ということになるのですが……。
それがすなわち、加速している、という状態の表現になるわけですな。
――さっぱり、前に進めない、解説なのですけれども。

円周と面積のグラフ

 さて、《円の面積》は、は円周の積分になります。
半径 =      
●  これを[ y = f (x) ]で表せば、
▣ 円の面積 = f (円周)
となるわけですが、円の公式は、
◈ 円周:2πr
◈ 面積:πr2
であるので、上の物理公式
l =    1   ax2  
 2 
にならって、面積を l の記号で表すと、
l = πr2 =    1   (2π) r2  
 2 
となって、r が時間と同じ役割を果たし、
2π が加速度の位置におさまっています。
これをグラフにしたのが、2 番目の操作可能な図です。
ところで、距離に関しては、
▣ 距離は速度の時間積分である
と表現されていて、速度は[加速度×時間]でしたから、
〔※ 蛇足ながらも円周率は円周と直径の長さの比率です〕
(そして円周は[円周率×半径の 2 倍]なので)
▣ 円の面積は円周の半径積分で計算できる
と、いうことができそうですな。でもって逆に、
〈面積を微分すると、円周を求めることができる〉のです。

「グラフを 切り替える」ボタンで、試してみてください。

2020年3月7日土曜日

JavaScript : 傾く放物線の描きかた

この前、曲線の平行移動は比較的簡単に操作できましたけれど、
曲線の回転移動となると、ちょっと難しそうです。

それを簡単にしてしまう方法が、ペン軸そのものの回転です。

 操作方法は本当に簡単で、たとえば、
◈ yx2 + 1
という 2 次関数の方程式の曲線を傾けて描きたいなら、回転移動の中心点にペンの基準点を平行移動させてから、ペン軸を回転して、あとは通常の手順で、細切れのラインを連続して描けばよいのです。
 描線後は、まずペン軸の回転をもとに戻してから、最後にペンの平行移動をもとに戻します。
// rad = radian, g = grid pixel
var cvs = document.getElementById('sample_canvas');
var pen = cvs.getContext('2d');
var rad = Math.PI/10;
var g = 50;
  // Canvas の中心にペン軸を移動させる
  pen.translate(cvs.width/2, cvs.height/2);
  // ペン軸を回転させる
  pen.rotate(rad);
  // 放物線を描線する
  pen.beginPath();
  pen.moveTo(-2*g, -5*g);
  for (var i=-1.9; i<=2.1; i+=0.1) {
    pen.lineTo(i*g, -(i*i+1)*g);
  }
  pen.stroke();
  // ペン軸の回転を戻す
  pen.rotate(-rad);
  // Canvas の左上にペン軸の基準点を戻す
  pen.translate(-cvs.width/2, -cvs.height/2);
 暫定的な接線も、この方法で同時にまた同様に、描くことができます。
 しかしながらこの手順では、曲線上の座標の数値がわからなくなるという問題が残ってしまいますので、ペン軸の回転を使わず、計算式による手順を構築して、曲線の回転移動を実現してみたいと思ったのです。
// dx = 回転後の x 座標, dy = 回転後の y 座標
var theta = 角度 °;
var x = 基本の x 座標;
var y = -(x*x + 1);
var r = Math.sqrt(x*x + y*y);
var deg = Math.atan2(y, x) * 180/Math.PI;
   deg += theta;
var dx = r * Math.cos(deg * Math.PI/180);
var dy = r * Math.sin(deg * Math.PI/180);
  document.getElementById('y_parabola').innerHTML = -Math.round(y * 100)/100;
  document.getElementById('para_x').innerHTML = Math.round(dx * Math.pow(10, 5))/Math.pow(10, 5);
  document.getElementById('para_y').innerHTML = -Math.round(dy * Math.pow(10, 5))/Math.pow(10, 5);
  pen.translate(cvs.width/2, cvs.height/2);
  // 放物線を描線する
  pen.strokeStyle = 'orangered';
  pen.lineWidth = 1;
  pen.beginPath();
  x = -2.4;
  y = -(x*x + 1);
  r = Math.sqrt(x*x + y*y);
  deg = Math.atan2(y, x) * 180/Math.PI;
  deg += theta;
  dx = r * Math.cos(deg * Math.PI/180);
  dy = r * Math.sin(deg * Math.PI/180);
  pen.moveTo(dx*g, dy*g);
  for (i=-2.3; i<2.5; i+=0.1) {
    x = i;
    y = -(x*x + 1);
    r = Math.sqrt(x*x + y*y);
    deg = Math.atan2(y, x) * 180/Math.PI;
    deg += theta;
    dx = r * Math.cos(deg * Math.PI/180);
    dy = r * Math.sin(deg * Math.PI/180);
    pen.lineTo(dx*g, dy*g);
  }
  pen.stroke();
  pen.translate(-cvs.width/2, -cvs.height/2);
test Canvas 回転する放物線
回転角度を変更: 角度 = °
基本の x 座標 :
基本の y 座標 : yx2 + 1
▣ 回転する x 座標 :
▣ 回転する y 座標 :

2020年3月5日木曜日

JavaScript 円の接線の計算

 まず、直角に交差するふたつの直線の傾きについて。
 それから JavaScript での、エラーを含んだ、サイン・コサインの計算結果の表示。
 最後に円の接線の方程式と、JavaScript を使った円の接線の計算。
▶ それぞれ傾き m1m2 のふたつの直線が、垂直に交わるときには、次の条件が成り立ちます。
● m1 × m2 = - 1
 直交する直線の、傾き同士を掛け合わせると、答えはマイナス 1 になるのです。
● m2 = - 1 ÷ m1
  m1y ÷ x
▣ m2 = - x ÷ y
JavaScript : サイン・コサイン・円の接線の計算
 ◈ 前回見たグラフで確認できたように、サイン曲線とコサイン曲線はちょうど 90 度分ずれています。
▣ cosθ = sin (90° + θ )
 ◈ また、座標位置を求める三角関数の特徴として、次のことがありました。
〔※ ぞれぞれ x 軸、y 軸の座標を示す次の式は、r = 1 とすれば、r は省略可能。〕
● r × cosθ = r × sin (90° - θ )
● r × sinθ = r × cos (90° - θ )
 ◈ 以上のことから、次の式が導かれます。
▣ cosθ = sin (90° + θ ) = sin (90° - θ )

 ◈ このことは、《サインカーブ・コサインカーブ》のグラフでも、90 度と 270 度の位置を中心にして、曲線のラインが対称形(線対称)になっていることからも見てとれます。

 ✥ JavaScript によるサイン・コサインの計算
(「 ▸ cos の前の ボックス」で数字を選択)
°   ▸  cos 1 ° =  
°   ▸  sin 91 ° =  
°   ▸  sin 89 ° =  

⛞ とりあえず円の中心点と円周上の点 P を結ぶ半径を引いてから、点 P を起点として(その両サイドの方向に)、半径に直角な線を引いていくと、接線となっているわけです。

 ✥ JavaScript による円の接線の計算
⛞ それはそれとして、点 O ( x1 , y1 ) を中心とする円の、円周上の点 P ( x2 , y2 ) を通る、直線接線の方程式を求める準備はすでに、これまでの学びで整っている状態であります。
 ◎ [ x0 = x2 x1 ] とし、同様に [ y0 = y2 y1 ] として、簡潔な方程式で計算式を表現します。
 ◎ また、直線 OP の傾きを [ m1 = tan θ ] 、接線の傾きを [ m2 ] とします(※ m1 m2 = - 1 )。
m1 = ( y0 ∕   x0 ) = tan θ
b1 = y1 - ( m1 * x1 )
▣ y = m1 * x + b1
m2 = - ( x0 ∕  y0 )
b2 = y2 - ( m2 * x2 )
▣ y = m2 * x + b2
 ( x1 =   ,  y1 = )
 ( x2 =   ,  y2 = )
◈ y = m1 * + b1 ≒  
◈ y = m2 * + b2 ≒  
▣ x0 = x2 - x1  = 
▣ y0 = y2 - y1  = 
▣ θ = Math.atan2(y0, x0) ≒  °
▣ tan θ = Math.tan θ ≒ 
▣ m1 =  y0 / x0  ≒ 
▣ m2 = - x0 / y0 ≒ 
▣ b1 =  y1 - ( m1 * x1 ) ≒ 
▣ b2 =  y2 - ( m2 * x2 ) ≒ 

2020年3月2日月曜日

サイン曲線・コサイン曲線の傾きと接線

 円の接線については、中学で習います。


 円 O の円周上の点 P を通る、半径 OP に垂直な直線 m を引きます。そのとき、円 O の円周と直線 m は、1 つの点 P だけを共有します。
 反対に、円 O と直線 m が、円周上の 1 つの点 P だけを共有するとき、半径 OP は直線 m と垂直になります。
 これが、円の接線になります。
 円の接線は、三角関数を使って計算できます。
 下のグラフを操作してみれば確認できるようにグラフの形は同じで、サインの値は、コサインの値と 90 度ずれているだけです。
 つまり、サイン曲線の値は、コサインの角度に 90 度を足したときの値になっています。

 その他の曲線の接線は、少しややこしくなります。


 とある曲線と直線が、ある 1 点だけを共有する場合、その直線はその曲線の接線になります
 このとき「ある 1 点だけを共有する」というのは、「曲線の 2 点間を結んだ直線のその 2 点間の距離が 0 になった状態」をさしています。
 ですから、簡単にいって、その曲線の 2 点間を結んだ直線は、接線とは呼ばれません。

 しかしながら、たとえば円を描く際に 1 度刻みの角度で、まっすぐな線をつなげて描いたなら、それはほぼというか、まったくもって、円に見えることでしょう。
 そういうわけで、もし仮に曲線を表示する場合に、1 度刻みで引いた線分をつなげてその曲線を描いていて、そこでそのそれぞれ、各々の線分の両端を無制限に延長してみたなら、一見して、それが曲線の接線とイメージされることもありましょう。

 それは接線のように見えるので、暫定的に、接線とみなしてもよいように思われます。
 実際のところ、いずれにせよ数学上の計算には誤差はつきもので、三角関数だっていわば暫定的な数値なのですし。
 とはいっても、やはり誤差はできるだけ少なくしていく方向で考えるべきでしょう。
(暫定的ではない曲線の接線は、微分を使って計算するようです。)

 今回は、その座標位置における前後 0.1 度ずつの値を結ぶ線分を仮定して、3000 倍に延長してみます。
 ※ たとえば、180 度の位置なら、179.9 度と 180.1 度の値を結ぶ線分の延長になります。
※※ 今回は、暫定的に
それをその曲線の接線とみなしておくわけです。
  ◈ サインカーブ・コサインカーブと暫定接線 ◈
 sin ° = 0  cos ° = -1



―― コピペしてそのまま使える、JavaScript の見本をテキスト化して掲載したページを、前回と同じサイトで公開しています。

「三角関数のグラフと曲線の傾き」
《サインカーブ・コサインカーブ・タンジェントの漸近線》
http://theendoftakechan.web.fc2.com/eII/hitsuge/arcus/parabola.html#gradient

JavaScript : 双曲線と放物線
http://theendoftakechan.web.fc2.com/eII/hitsuge/arcus/parabola.html