JavaScript 数値演算 新しいページはコチラ

提供: yonewiki
移動: 案内, 検索
(→‎対数・指数函数 log/exp)
 
1行: 1行:
 
[[JAVA Script#リファレンス]]に戻る。
 
[[JAVA Script#リファレンス]]に戻る。
−
 
+
<yjavascript>
−
 
+
onload = function() {
−
[[ymath テスト]]
+
  draw1();
−
 
+
  draw2();
−
[[yjavascript テスト]]
+
  draw3();
 +
};
 +
</yjavascript>
  
  
109行: 111行:
 
サンプル
 
サンプル
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
130行: 132行:
 
</BODY>
 
</BODY>
 
</HTML>　
 
</HTML>　
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
  
158行: 160行:
  
 
<yjavascript>
 
<yjavascript>
−
onload = function() {
 
−
  draw1();
 
−
  draw2();
 
−
};
 
 
/* 円を描く */
 
/* 円を描く */
 
function draw1() {
 
function draw1() {
388行: 386行:
  
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
411行: 409行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
 
[[Media:JavaScript Math TriFunc.html|サンプル実行結果]]
 
[[Media:JavaScript Math TriFunc.html|サンプル実行結果]]
  
438行: 436行:
  
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
473行: 471行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Math MaxMin.html|サンプル実行結果]]
 
[[Media:JavaScript Math MaxMin.html|サンプル実行結果]]
507行: 505行:
 
サンプル
 
サンプル
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
523行: 521行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Math Absolution.html|サンプル実行結果]]
 
[[Media:JavaScript Math Absolution.html|サンプル実行結果]]
534行: 532行:
  
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
652行: 650行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Math FloorCeilRound.html|サンプル実行結果]]
 
[[Media:JavaScript Math FloorCeilRound.html|サンプル実行結果]]
688行: 686行:
  
  
−
<syntaxhighlight lang="javascript" line start="1">
+
<syntaxhighlight2 lang="javascript" line start="1">
 
<HTML>
 
<HTML>
 
<HEAD>
 
<HEAD>
719行: 717行:
 
</BODY>
 
</BODY>
 
</HTML>
 
</HTML>
−
</syntaxhighlight>
+
</syntaxhighlight2>
  
 
[[Media:JavaScript Math SqrtPow.html|サンプル実行結果]]
 
[[Media:JavaScript Math SqrtPow.html|サンプル実行結果]]
736行: 734行:
  
  
−
わかったようなわからないような説明ですが、ネイピア数の導出に関する話を省いたり、もっと難しい話は避けてきましたので、もっともっと数学は奥が深いです。基礎の基礎だけ説明させてもらいました。自分が放送大学で勉強したような内容。数列や場合の数、ベクトル、解析幾何、微分、積分、微分方程式、素因数分解、素因数の一意性。もっと踏み込めば、級数展開、行列演算、線形代数、数学の歴史、さらにはゲーテルの不完全性定理、ガロア理論…、なんでもは知らないけど、知ってることだけ。せめて微分方程式あたりに到達することで見えてくる数学の面白さのSTART地点くらいまでは導きたいと考えていますが、ソレについては別の記事で説明したいと思います。
+
わかったようなわからないような説明ですが、ネイピア数の指数部を独立変数xとした関数を微分しても傾きがネイピア数のx乗という元の値になるという美しい値を持つネイピア数の導出に関する話を省いたり、もっと難しい話は避けてきましたので、もっともっと数学は奥が深いです。基礎の基礎だけ説明させてもらいました。自分が放送大学で勉強したような内容。数列や場合の数、ベクトル、解析幾何、微分、積分、微分方程式、素因数分解、素因数の一意性。もっと踏み込めば、級数展開、行列演算、線形代数、数学の歴史、さらにはゲーテルの不完全性定理、ガロア理論…、フェルマーの最終定理…ラングランズ・プログラム…なんでもは知らないけど、知ってることだけ。せめて微分方程式あたりに到達することで見えてくる数学の面白さのSTART地点くらいまでは導きたいと考えていますが、ソレについては別の記事で説明したいと思います。独自の解釈で間違っていたりする部分もあるかもしれないので、正確にわかりやすく説明できるかが心配ですが、自分の話をまじめに聞いてもらえれば、ちょっとくらいは実際の現場に役に立つ数学知識に変化すると自負しています。
 +
<yjavascript>
 +
/* デカルト座標 */
 +
function draw3() {
 +
  var canvas = document.getElementById('c3');
 +
  if ((! canvas) || (! canvas.getContext) ) { return false; }
 +
 
 +
  var ctx = canvas.getContext('2d');
 +
 
 +
 
 +
  ctx.strokeStyle = 'rgb(0, 0, 0)';
 +
  ctx.beginPath();
 +
  ctx.moveTo(200, 0);
 +
  ctx.lineTo(200, 400);
 +
  ctx.stroke();
 +
 
 +
  ctx.beginPath();
 +
  ctx.moveTo(0, 200);
 +
  ctx.lineTo(400, 200);
 +
  ctx.stroke();
 +
 
 +
  for(var i = 20;i < 400;i += 20){
 +
    ctx.beginPath();
 +
    ctx.moveTo(i, 195);
 +
    ctx.lineTo(i, 205);
 +
    ctx.stroke();
 +
 
 +
    ctx.beginPath();
 +
    ctx.moveTo(195, i);
 +
    ctx.lineTo(205, i);
 +
    ctx.stroke();
 +
  }
 +
 
 +
  ctx.strokeStyle = 'rgb(255, 0, 0)';
 +
  for(var i = -10;i < 10;i += 0.01){
 +
    ctx.beginPath();
 +
    ctx.moveTo(200 + (i * 20), 200 - (Math.exp(i-0.1) * 20));
 +
    ctx.lineTo(200 + (i * 20), 200 - (Math.exp(i) * 20));
 +
    ctx.stroke();
 +
  }
 +
  ctx.strokeStyle = 'rgb(0, 0, 255)';
 +
  for(var i = -10;i < 10;i += 0.01){
 +
    ctx.beginPath();
 +
    ctx.moveTo(200 + (i * 20), 200 - (Math.log(i-0.1) * 20));
 +
    ctx.lineTo(200 + (i * 20), 200 - (Math.log(i) * 20));
 +
    ctx.stroke();
 +
  }
 +
  ctx.strokeStyle = 'rgb(0, 0, 0)';
 +
 
 +
/*
 +
  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="c3" width="1098" height="400"></ycanvas>
 +
:<span style="color:blue">'''―――''' $y = \ln x = \log_e x$</span>
 +
:<span style="color:red">'''―――''' $y = \exp(x) = e^{x}$</span>
 +
 
 +
 
 +
デカルト座標グラフで関数を図示すると上記のようになります。この2つの関数はx=の式にしたりy=の式に変形するとxとyを入れ替えただけの形をしています。こういう関係性を逆関数といいます。2つの関数にそれぞれa、bと命名するとaはbの逆関数でbはaの逆関数ということです。デカルト座標ではy=xのグラフの線（原点を通る45度斜めの線）を境に線対称になるような図になります。関数を$f(x)$の形式で説明すると、とたんになんだかややこしく感じると思いますので、あえてこの表現は今、使いません。対数の値は指数値ですからｘが巨大な数値になっても対して大きな数値にはならないことが特徴です。一方でexp関数は自然対数を底とした指数の値なのでxが増加すると巨大な数値になります。増加する割合は変化しませんので極端に大きくなるというか、段々と増えるスピードが速くなるというようなイメージまでは持たなくてもいいと思います。
 +
 
 +
 
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript exp log</TITLE>
 +
<!--[if lt IE 9]><script type="text/javascript" src="ExplorerCanvas-master/excanvas.js"></script><![endif]-->
 +
<script type="text/x-mathjax-config">
 +
MathJax.Hub.Config({
 +
  tex2jax: {
 +
    inlineMath: [['$','$'], ['\\(','\\)']],
 +
    processEscapes: true
 +
  },
 +
  CommonHTML: { matchFontHeight: false },
 +
  displayAlign: "left",
 +
  displayIndent: "2em"
 +
});
 +
</script>
 +
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
 +
</script>
 +
 
 +
</HEAD>
 +
<BODY>
 +
JavaScript exp log<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
document.write('Expornential $e^{1} = \\exp(1) =', Math.exp(1),'$<BR />\n');
 +
document.write('自然対数 $\\log_\\mathrm{e} \\mathrm{e} = ', Math.log(Math.E),'$<BR />\n');
 +
-->
 +
</SCRIPT>
 +
 
 +
</BODY>
 +
</HTML>
 +
</syntaxhighlight2>
 +
 
 +
[[Media:JavaScript Math ExpLog.html|サンプル実行結果]]
  
 
=== 乱数 random ===
 
=== 乱数 random ===
−
　
+
乱数には生成方式がどうとか？確率分布がどうとか、そういった細かい議論が起こりますが、なんしか、このrandom関数を呼び出すと0～1の間の適当な値がほぼ無作為に生成されると考えていいと思います。ゲームや音楽、仕組みの中で何が起こるかわからなくするという要素を生み出すための数値生成と言えます。何が起こるかわか内から人生は面白い。運命が決まっているとしても、運命とはどうなっているのかわからないから面白い。生まれた瞬間からすべての未来が正確に予測される人生があったとしたら、それを知ったうえで生きる人生というのは面白いのでしょうか？わからないから面白い。
 +
 
 +
 
 +
自分の人生はどこへ向かっているのか？どこから来て、どこへ行くのか？
 +
 
 +
 
 +
生きるとは学ぶこと。
 +
 
 +
 
 +
学ぶことは未来を変えること。
 +
 
 +
 
 +
未来を変えるとは、正確な答えは無い。
 +
 
 +
 
 +
だけど未来の方向をある程度の範囲に収めることはできる。
 +
 
 +
 
 +
自分はそのように解釈しています。ランダムとはどこへ向かうか限りなく制御できないものです。だからこそ面白さは作れる。もっとちがったことで意思決定をしている人間のランダムとはちがった面白さです。あのひと何を考えているかわからないのときの面白さは知能というものがつかさどっています。そしてソレを計算機で実現しようとする人工知能も面白い。ただし、とちらのわからないも制御できないからこそストレスが生まれることもありえます。不満。戦争。殺し合い。恨み。呪い。制御できないからこそ無数に感情が分岐される。それが平等なのか不平等なのか？わからない。多くの人間が最終的に快感を覚える程度のランダムに関する制御を行うのがプログラムする人の腕の見せ所だと思うのです。人間が不満ばかりをかかえるランダムはあまりいらない。
 +
 
 +
 
 +
そのさじ加減が難しいから、ゲームも売れるもの、売れないもの、いろいろと変化します。それくらいランダムは人間の社会生活を変える要素になっているのだと思います。争いが生じてゲームがきっかけで社会的な不幸が発生するのだとしたら、それは情報技術を売る側の怠慢なのではないでしょうか？わからないからこそ結末をある程度予測するということに挑戦し続ける必要はある。
 +
 
 +
 
 +
長くなりましたが、そういう重要なことを決める関数です。
 +
 
 +
 
 +
使い方は
 +
 
 +
 
 +
*Math.random$($$)$
 +
 
 +
 
 +
とすることで、0～1の小数値が返却されます。どういった数値になるかは呼び出すまではわからないことになっています。
 +
 
 +
 
 +
 
 +
乱数で、ある確率に収束する、乱数を生成する場合。自分は10までのn進数法をよく使います。計算は長くなります。
 +
 
 +
 
 +
たとえば2進数のビットをすべて乱数で求める仕組みにする場合0～0.5まではビット値0それ以外はビット値1として必要な桁数分だけ繰り返して、2進数値を10進数に変換するなりして、その値によって動作を決定するというような作り方です。10進数でも同じです。値の範囲の取り方をn等分しますので、ここの偏りをつくれば出やすい数値とかが出てしまいます。n等分を均等にするとより分布が安定するかもしれないという予想においては、10進法と2進法による数値決定が一番やりやすいです。スロットなんかでは2進数のビット数くらいの確率で乱数を発生させて動作を決めているので、n進法乱数発生というのを使って、動きを真似してみたりすることを考えたことはあります。
 +
 
 +
 
 +
乱数に関する数学的考察はいろいろとありますので、これ以上の複雑な話は別の記事にでも記述したいと思います。分布にはいろいろなものがありますので、一口に乱数といってもいろいろな性質をもつものがあることも頭の片隅においておくとよいと思います。なんなら、乱数 分布で検索してより詳細なことについて確認すると良いでしょう。
 +
 
 +
 
 +
<syntaxhighlight2 lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript random</TITLE>
 +
<!--[if lt IE 9]><script type="text/javascript" src="ExplorerCanvas-master/excanvas.js"></script><![endif]-->
 +
<script type="text/x-mathjax-config">
 +
MathJax.Hub.Config({
 +
  tex2jax: {
 +
    inlineMath: [['$','$'], ['\\(','\\)']],
 +
    processEscapes: true
 +
  },
 +
  CommonHTML: { matchFontHeight: false },
 +
  displayAlign: "left",
 +
  displayIndent: "2em"
 +
});
 +
</script>
 +
<script async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
 +
</script>
 +
 
 +
</HEAD>
 +
<BODY>
 +
JavaScript random<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
for(var i=0;i < 1000;i++){
 +
  document.write('乱数値 random ', i, '=', Math.random(),'<BR />\n');
 +
}
 +
-->
 +
</SCRIPT>
 +
 
 +
</BODY>
 +
</HTML>
 +
</syntaxhighlight2>
 +
 
 +
[[Media:JavaScript Math Random.html|サンプル実行結果]]
 +
 
  
 
　
 
　

2021年2月19日 (金) 00:00時点における最新版

「https://www.yo-net.jp/yonewiki/index.php?title=JavaScript_%E6%95%B0%E5%80%A4%E6%BC%94%E7%AE%97&oldid=10446」から取得

個人用ツール
名前空間

変種
操作
案内
ツールボックス