JavaScript 数値演算のソースを表示新しいページはコチラ

[[JAVA Script#リファレンス]]に戻る。


[[ymath テスト]]

[[yjavascript テスト]]


Mathオブジェクトには、通常の科学技術計算を行うための関数が準備されていて、便利なものになっています。むろん、[[Maxima]]や[[R]]のようなコンピュータ支援による数式システムや確率統計演算システムには遠くおよばないものです。まだまだ解明されていない数学の世界に挑戦していくこともできるのですが、まずはコンピュータと数学の間にある問題を理解せねばならないでしょう。コンピュータの特徴は有限の小さなメモリを使う変数という性質特有の桁あふれや、精度限界、2進数による表現のためにおこる2進数特有の循環小数の発生について理解しておく必要があり、さらには我々人間が理解しやすい10進数への変換時における文字列表現的数値の表示限界の問題や数値の切り落としのような様々な特徴を理解する必要があります。とはいったもののコンピュータの演算精度と演算速度は人間を楽しませるためには十分な速さと正確さを持っています。うまく使いこなすことで、人間には到底不可能な制御や時間的経過と次に起こることの予測などをしての補正計算に使うことが出来ますし、延々に人間のコントロールするマウスの座標や動きを予測したり、ブラウザ上で動かされたマウスの軌道計算や走行距離、速度をはかることもできます。こういったマウス座標の動きから、通常はありえないペンタブレットを使った場合の座標飛びを検出したり、画面座標計算を駆使することで、ゲームを作ったり、様々な情報提供を行い行動観察やそれを使った様々な指標の提供など、数学が陰ながら社会を支えている技術を提供できます。


※現在、管理人は、この章の説明をするにあたり、やはり、wikiの記事内で美しい数式の記述ができる技術の導入が必要ではないかと思いまして、MathJaxという技術をwikiに導入できないか検証中です。つまり、自作Extension作成中ということです。意外と日本人でMediaWikiのExtension解説サイトをやっている人っていないんですね。あまり得意とは言えない英語ばっかり読んでいて、あたまがおかしくなりそうです。この調子だと年が明けそうです。ウソウソ。そんなに努力家じゃないです。逃亡してます。4か月も放置してればきっとね。


== 定数 ==
=== <ymath>円周率 $ \pi $ Math.PI</ymath> ===
<ymath>直径1の円の円周の長さが $ \pi $ です。面積は半径$ r $ に対して$ \pi r^2 $となることがわかっています。およそ3.14くらいだとされています。具体的には</ymath>


<ymath>$ \pi  = 3.141592653589793 $ </ymath>


となります。現代ではコンピューターによっておよそ10兆桁まで計算されています。およそで丸め込んでいいような桁数ではありませんが、およそです。どうなってんだ円の長さって？思うんすけど、謎の比率なんですね。直径から円周の長さを求めようとした人間が愚かだったのかもしれないが、終わりなき戦いが続いている。何のためにそこまで計算するのか？そこに延々と続く数字があるから…人間は追いかけ続ける。と、しかいいようがない。個人のPCでもプログラム次第ではギネス記録を達成できる可能性はあるらしい。1年くらい無停止で動き続けるPCが必要です。どうやって申請するのかが不明ですが、10進数で100兆桁分くらいの二進数$($8000兆桁くらいか？$)$が刻み込まれたハードディスクを提出すればいいのかな？紙に出力するとかろうじて数字が読み取れる大きさの数字フォントにしたとしても地球を330周くらいする距離になるそうです。
　
　

　

=== <ymath>ネイピア数 $\mathrm{e}$  Math.E </ymath> ===
<ymath>自然対数の底として $\mathrm{e}$ が定められていて、この値は2.71くらいです。具体的には、</ymath>


<ymath>$\mathrm{e} = 2.718281828459045 $ </ymath>


<ymath>です。対数とは、大きな数同士の積の計算を和の計算に還元するものです。指数同士の積を対数表を用いて和の計算として扱うことができます。正直なところ底はなんでもよかったんですが、オイラーさんによって、とても美しい無理数としてのネイピア数の発見に至った$($具体的には対数の基礎をネイピアさんが考えて、弟子のアウトレッドさんが最初の対数表を作成し実用化、その後、ベルヌーイさんがネイピア数にたどり着きライプニッツさんがこのネイピア数に記号を付与したりして、オイラーさんが具体的に活用し、$ \mathrm{e} $という文字を割り当て命名したとなっています。そして、このネイピア数を底に自然対数を使い始めたのはメルカトルさんらしいです。本当かどうかは自分で調べてください。$)$のです。今では対数の底といえば、この数を使うというのが一般的になってきています。 $\mathrm{e}^x $  を $ x $ で微分$($ある数の底の指数値を微分して傾きを計算しても、その数の指数値になるような数$)$しても $ \mathrm{e}^x $ となる数です。この値は対数の仕組みを使って積の計算を和の計算に還元する手法を一番最初に提案したネイピアさんをたたえるべくネイピア数と命名されています。</ymath>
　
　

=== <ymath>自然対数 $\log_{\mathrm{e}} 2 $,$ \ln{2} $ Math.LN2/$\log_{\mathrm{e}} 10 $, $\ln{10} $ LN10 </ymath>===
<ymath>$\log_{\mathrm{e}} 2 = 0.6931471805599453 $ </ymath>


です。つまり、これは対数を指数表現に意味を訳すると


<ymath>$\mathrm{e}^{0.6931471805599453} = 2 $ ということです。だから何？とか考える必要はありません。$\mathrm{e}$ を底とする世界の表現値で2を意味する値が$\log_{\mathrm{e}} 2$であり、0.6931を和として利用することで大きな数の積の問題を解決できるということを考えればそれでよいのです。大きな数字の積の計算を和の計算に還元しようとするのが目的であると思えば、対数のややこしい数値的な意味をイチイチ計算しなおす必要はないのです。対数を使うときってのは、計算結果はだいたいが求まれば十分なのです。だいたい。そのだいたいの計算でもとめた値で十分、役にたつし、コンピュータやらに対数表らしきものを使って計算させておけば、人間に役に立つ形式の解が得られるのです。</ymath>


<ymath>$\log_{\mathrm{e}} 10 = 2.302585092994046 $ </ymath>


で、念のため、訳しちゃうと


<ymath>$\mathrm{e}^{2.302585092994046} = 10 $ となります。考え方は先に述べたとおりです。</ymath>
　

　

=== <ymath>常用対数 $\log_2 \mathrm{e} $ Math.LOG2E/$\log_{10} \mathrm{e} $ LOG10E</ymath> ===
<ymath>先の自然対数の底が $ \mathrm{e} $だったのに対して、常用対数は、それ以外の値を底とする対数です。先の項目でも底はなんだってよかったと書いたのですが、そういうことなのです。ただし底が1だと指数法則的にも、全く役に立たないことになってしまいます。1を何乗したって、1ですから大きな数字を表したりするのには向いていないことは自明です。0もそうです。</ymath>


底が10の常用対数は初等教育なんかで、対数を理解するためによく使われているかもしれません。やっぱなんだかんだいって無理数のネイピア数では対数の具体的な計算には向いていないっていう。でも、常用対数できっちりとした答えを求めることばかりを教えるから、対数のありがたさや本当の役割を見失って、対数を理解できないまま終わってしまうような気がしています。でも、常用対数の具体的な活用方法もあるっちゃあるわけで、それを知るっていうのも大事なのかなって思います。ちなみに


<ymath>$\log_2 \mathrm{e} = 1.4426950408889633 $</ymath>


また、対数を指数表記表現に訳すると


<ymath>$ 2^{1.4426950408889633} = \mathrm{e} $</ymath>となります。


更に

<ymath>$\log_{10} \mathrm{e} = 0.4342944819032518 $</ymath>


またまた、対数を指数表記表現に訳すると


<ymath>$ 10^{0.4342944819032518} = \mathrm{e} $ となります。常用対数でネイピア数を表現するという、これらの定数ってどれくらい需要があるんかな？やっぱオレにはわかんねぇ。</ymath>
　

　

=== <ymath>平方根$ \sqrt{2} $ Math.SQRT2/$ \frac{\sqrt{2}}{2} $SQRT1_2</ymath> ===
<ymath>$ \sqrt{2} $ は２乗したら２になる数です。つまり、$ \sqrt{2} \times \sqrt{2} = 2 $ です。</ymath>

したがって、

<ymath>$ \sqrt{2} = 1.4142135623730951 $</ymath>

というような値になります。1.414を2回かけると1.999396になります。完全に2にはならないけど、桁数を増やしながら、２乗していくと近づいてる実感が得られると思います。ものすごい桁数をコンピュータは定数として覚えています。オレには覚えらんないね。


その半分の値

<ymath>$ \frac{\sqrt{2}}{2} = 0.7071067811865476 $</ymath>

も定数として使えるようになっています。何に使うんかな？そんなに頻繁に使うんだっけか？やっぱ、死ぬほど苦労してでも東大いっとけばよかったなぁ。事の重大性がわからない。死ぬほど苦労しても行けてなかっただろうけどね。就職氷河期に就職できただけでもよかったと思うことにしよう。
　

　

サンプル

<syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript Math 定数</TITLE>
</HEAD>
<BODY>
JavaScript Math 定数<br />
<SCRIPT Language="JavaScript">
<!--
document.write("Math.PI = ", Math.PI, "<BR />");
document.write("Math.E = ", Math.E, "<BR />");
document.write("Math.LN2 = ", Math.LN2, "<BR />");
document.write("Math.LN10 = ", Math.LN10, "<BR />");
document.write("Math.LOG2E = ", Math.LOG2E, "<BR />");
document.write("Math.LOG10E = ", Math.LOG10E, "<BR />");
document.write("Math.SQRT2 = ", Math.SQRT2, "<BR />");
document.write("Math.SQRT1_2 = ", Math.SQRT1_2, "<BR />");
-->
</SCRIPT>
</BODY>
</HTML>　
</syntaxhighlight>



[[Media:JavaScript Math Constant2.html|MathJaxとCanvasによるグラフ描画サンプル]]

こういうのを、MediaWikiの中に埋め込みたいらしい。難しいかな。
みんなで編集するわけじゃないから、ガシガシのExtensionになる予定。

　
　

　
　
　
　

追記160314

やればできるってことですね。MathJaxが記事中で使えるようになりました。よかった。Texと微妙に違う表記に若干戸惑いますが、そのうち慣れるでしょう。グラフも書きたいからcanvasも頑張ろう。ymathエクステンションを作るのに３日間もかかった。能力や開発効率の低さ。まだまだだなオレ。もう歳だし。無理なんだろうな。超絶やべく頭悪いのは心残りだ。もっと訓練しねぇとなぁ。若いみんなはオレみたいになんなよ。オレなんか軽く超えていってくれたまえ。プログラムの能力を身に着けて近い将来に年間10億かせいでやるぐらいの強い気持ちで強烈に挑んでほしい。


追記160315

canvasもできるようになったぜ！オレってなかなかExtension開発のセンスあんのかな。フフフ♪


<yjavascript>
onload = function() {
  draw1();
  draw2();
};
/* 円を描く */
function draw1() {
  var canvas = document.getElementById('c1');
  if ((! canvas) ||(! canvas.getContext)) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(70, 70, 60, 0, Math.PI*2, false);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(0, 70);
  ctx.lineTo(610, 70);
  ctx.stroke();
  
  ctx.beginPath();
  ctx.moveTo(70, 0);
  ctx.lineTo(70, 140);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(130, 0);
  ctx.lineTo(130, 140);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(130, 70 - 60 * Math.sin(0));
  for (var i = 1; i <= 480; i += 1) {
    ctx.lineTo(i + 130, 70 - 60 * Math.sin( Math.PI * i / 60));
  }
  ctx.stroke();
  
  ctx.beginPath();
  ctx.moveTo(130, 70 - 60 * Math.cos(0));
  for (var i = 1; i <= 480; i += 1) {
    ctx.lineTo(i + 130, 70 - 60 * Math.cos( Math.PI * i / 60));
  }
  ctx.stroke();
}
</yjavascript>
<ycanvas id="c1" width="1098" height="140"></ycanvas>


ちなみに、記事中にJAVA SCRIPTを埋め込むのは非常に危険な行為でして、ちゃんと動作確認をしてから張り付けないと、やえもすると、その記事のページが表示できなくなってCMSを使っての編集ができなくなることもあります。また、不特定多数で記事の編集をしている場合、JAVAスクリプトに悪意あるコードを埋め込むことによって、Webサイト全体が簡単に書き換えられる可能性もあります。危険なことです。このwikiがハッキングされたら、全部消えることもありえます。覚悟は必要です。バックアップはとってありますので、ある時点に戻るという感じの被害になるのと、もうJAVAスクリプトの埋め込みはやめるという決断とかをするのかもしれません。yjavascriptタグは非常に危険なエクステンションですね。ymathタグは数式を表示するだけなので、たいしたことないっすかね。


てか、記事を読んでJAVA SCRIPTを勉強している人にとってはどうでもいいことですね。

== 関数 ==
=== 三角関数 sin/cos/tan/asin/acos/atan/atan2 ===
数学関数の中でも、授業中にならった事の他に、意外な楽しさがあるのが三角関数だと思います。半径1の円を横に置きましたが、sin波およびcos波は出発するタイミングこそ違いますが、同じような波を描くように変動します。

以下のグラフ$($デカルト座標表示$)$は、

*<ymath>$ y = \sin{x} $</ymath>
*<ymath>$ y = \cos{x} $</ymath>

のグラフです。
<yjavascript>
function draw2() {
  var canvas = document.getElementById('c2');
  if ((! canvas) || (! canvas.getContext) ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(70, 70, 60, 0, Math.PI*2, false);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(0, 70);
  ctx.lineTo(610, 70);
  ctx.stroke();
  
  ctx.beginPath();
  ctx.moveTo(70, 0);
  ctx.lineTo(70, 140);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(130, 0);
  ctx.lineTo(130, 140);
  ctx.stroke();

  ctx.beginPath();
  ctx.strokeText("sin x", 130 + 65, 70 - 60 * Math.sin(0) - 30);

  ctx.moveTo(130, 70 - 60 * Math.sin(0));
  for (var i = 1; i <= 480; i += 1) {
    ctx.lineTo(i + 130, 70 - 60 * Math.sin( Math.PI * i / 60));
  }
  ctx.stroke();
  
  ctx.beginPath();
  ctx.moveTo(55 + 130, 70 - 60 * Math.sin(Math.PI * 55 / 60));
  ctx.lineTo(130 + 63, 70 - 60 * Math.sin(0) - 32);
  ctx.stroke();


  ctx.beginPath();
  ctx.strokeStyle = 'rgb(192, 80, 77)';

  ctx.moveTo(130, 70 - 60 * Math.cos(0));
  ctx.strokeText("cos x", 130 + 50, 70 - 60 * Math.cos(0) + 10);

  for (var i = 1; i <= 480; i += 1) {
    ctx.lineTo(i + 130, 70 - 60 * Math.cos( Math.PI * i / 60));
  }
  ctx.stroke();

  ctx.beginPath();
  ctx.strokeStyle = 'rgb(192, 80, 77)';
  ctx.moveTo(20 + 130, 70 - 60 * Math.cos(Math.PI * 20 / 60));
  ctx.lineTo(130 + 48, 70 - 60 * Math.cos(0) + 8 );
  ctx.stroke();

}
</yjavascript>

<ycanvas id="c2" width="1098" height="140"></ycanvas>
単調増加関数を示す1次式や、放物線を描く程度の2次式とは違った面白さがあります。xの3乗を含むような3次式もしくはそれ以降の次数になると同じような振動部分がグラフ上で確認できますが、複雑過ぎるという部分があります。sin関数やcos関数は、これだけで振動をする関数としてふるまうところが面白い。


何が？


いや、それがその～、シンセサイザーって波を重ねることで音が出てたりして、その基本波形の一つが、この波なのです。実際は電気信号の振幅ですのでy軸は電圧になりますが、この電圧の振動をスピーカーでコイルを使ってスピーカーコーン部分の振動に変換して音を出すことができるわけです。そういう意味で三角関数は音楽とも関係があるし、角度を距離から計測したり、角度から距離を算出することができるという性質をもっていますし、波形操作のためのいろいろな公式を覚える楽しさと複雑さがとなり合わせになっています。倍角の公式や3倍角あるいは2分の1倍角の公式。加法定理による手計算によるsin α の値の算出へ挑んでいける楽しさ。既に計算済の三角関数表が存在していてコンピュータによっていくらでも計算できる面白さ。そういうことです。そしてフーリエ変換へと飛翔していくのです。そういうことです。


ところで、波になるとかわけわからんこといってるけど、sinって何？cosって何？tanって？ふむふむ。その説明はなかなかWeb上で説明するのは難しい。また図をかかなければならないですね。上手のグラフで半径1の円を描いたつもりでしたが、その円周の適当な位置と円の中心を線で結ぶと、右側のx軸を0度として円周の適当な位置の角度αが決まります。これのsin αってのが、その円周の適当な位置からx軸と平行な線をひいたときにy軸と交わった位置のyの値がsin αの値になります。そして、同じような円周の適当な位置からy軸と平行な線をひいたときのx軸と交わった位置のxの値がcos αになります。当然。cos 0 は、1という値になります。また cos α および sin α は -1～1の間の値にしかなりません。


tan αはx = 1のy軸に平行な線と円周の適当な位置と中心線をとおる直線が交わる位置のyの値となります。tan 90度(直角)のときは、延々にx=1のy軸に平行な線と交わることはないので、値は∞となります。


上記説明を図で示しsin、cos、tanの仕組みを理解できれば三角関数の基礎を理解できたことになりますが、図の描き方によって理解度がかわりますので、ここが腕の見せ所になるわけです。言うやすし、見せるは難しというところです。これが理解できれば、学校の試験とか授業でも、良い成績というかよい理解が得られて、いくらかは三角関数の理解が深まっていたのにと思う人も多いのだと思います。
　

そのことを明示した図はまた今度っすかね。絵をかくのって大変なので…


ちなみに、プログラムではsin xのxに任意の値を与えるだけで、その値を返してくれる便利な関数ですが、xに与える値は角度ではありません。角度を円周の長さで表した円弧の値。ラジアンと呼ばれる単位で与えます。円周の長さは半径1の場合、直径と円周率の積が円周になりますから360度の場合は


<ymath>
\[
  360[度] = 2 \times \pi
\]
</ymath>


です。そうすると、1度あたりのラジアン値ってのは、円周を360分割した長さですから360で割って


<ymath>
\[
  1[度] = \frac{2 \pi}{360} = \frac{\pi}{180}
\]
</ymath>


になります。本来、掛け算の記号は省略することになっていますので、上記では表記をきちんと省略しました。んで、約分もね。約分は2分の360ってのは1分の180だから、割り切れる部分を残さないっていう記述をできるだけ簡素化する決まりのことです。

=== 最小値・最大値 max/min ===
=== 絶対値 abs ===
=== 切り捨て・切り上げ・四捨五入 floor/ceil/round ===
=== 平方根・べき乗（累乗根） sqrt/pow ===

=== 対数・指数函数 log/exp ===
=== 乱数 random ===
　

　

　

[[JAVA Script#リファレンス]]に戻る。