ゲーム数学 第1回

講師:大森田不可止



授業概要・ゲーム数学とは




矢印キーの左右 でスライドを操作します。

スライドの操作

キー操作
lスライドを右方向に進む
h前のスライドに移動
j下のスライドに移動
k上のスライドに移動
space n次のスライドへ垂直→水平の順に移動
Home最初のスライドへ
End最後のスライドへ
Esc o概要表示
f全画面表示。Escで戻す。

講師: 大森田不可止 自己紹介

  • 作ってきたゲームは、こちらを参照: 大森田不可止全仕事+

  • 大学では、物理学科、ニュートリノ研究の施設で卒業研究。7年掛かって卒業したので、様々なバイトをやりつつ、友人の経営学部の経営分析プログラム制作の手伝いをしてたお陰で、簡単な経営分析は出来る。簿記も公認会計士の先生に2級程度の実力はあると認めてもらった。サークルでは茶道部(裏千家)。音楽ははももクロとBABYMETALを聞いてます。

  • 今までに使用したコンピュータ言語: FORTRAN, BASIC, Pascal, アセンブラ(8080, Z80, 6502, 65816, 68000, 80386, ARM など), C/C++, Java, Lisp, JavaScript, Perl, Python, PHP など。

  • 小中高で、アマチュア無線やってて、ラジオ製作やTVの修理などをやってたので、若干ハードウェアも出来ます。
  • 最近十年くらいは、請負仕事が中心で、IT系、組み込み系の仕事が多いです。ゲームプログラムはハードな仕事なので、年齢的に徹夜が必要ない仕事だけ引き受けてます。今のゲーム会社は、残業は少ない傾向ですが、納期が近くなるとプログラマは酷使されるので。

  • 一番の親友が20年ほど前から、中国の深圳(Shēnzhèn) のコンピュータ関連機器製作工場で働いていて、Skype 経由で技術的なアドバイスをしてたりしてます。彼が来日すると、立石の格安居酒屋で呑むのが楽しみなんですが、最近大流行で店に入るのに苦労してます。 「おすすめの昭和居酒屋」立石駅ならこの7店! [食べログまとめ]

  • 彼が仕事を発注してた会社のひとつが シャープを M&A した 鴻海(Hónghǎi、Foxconn)。数年前に自殺者が異常に多いので一瞬話題になった。ところが従業員数130万人と判明。中国の年間の自殺者は10万人あたり日本の半分の8人程度。つまり普通に100人くらいは自殺するので報道は収束した。この会社は本社が台湾で、世界の電子機器の40%を生産してる。

授業の受け方

  • 授業の内容は少し難しいと思います。バランスを取る意味で、期末試験や小テストは簡単にしてあります。期末試験は実際の仕事環境を考慮して、カンニング以外は 検索やソフトを使っての解答、ノートの参照もOKです 。チャットや知恵袋で相談するなどは禁止です。

  • 成績の評価は、基本的には期末試験ですが、出席率が高ければ加点します。また、小テストや提出物の評価も加点します。減点はありません。

  • スライドを眺めてるだけで理解した気に成りがちです。 ノートと筆記具、フラッシュメモリやポータブルHDDなどを持参して、実際に書いて理解する、自分なりのドキュメントを残すことを推奨します。授業の時間だけで勉強が完結できるようにしましょう。

授業の受け方

  • 他の人の勉強の邪魔になるので 私語は禁止です。静かにしてれば、他の作業をしても大目に見ます。試験の結果や出席率が高いなどの帳尻を合わせてくれれば評価します。解りにくい時はいつでも質問してください。

  • 微分積分などの難しい計算も出てきますが、専用のアプリがあるので、それを利用することを覚えましょう。これらは学校のPCに用意されてない場合も多いので、携帯ストレージに入れて利用する方法も説明します。特にエディタなどは、様々なプラグインを入れて、自分専用にカスタマイズする必要があるので持ち歩けると便利です。

  • 出席日数が3分の2に満たない場合は、早めに教務に相談してください。私は基本的に不合格点は出しませんが、出席日数は教務の管轄なので。

ドキュメントの書き方

  • 今はプログラマがドキュメントを残すのが必須になっています。私は HTML で書いていますが、今の流行りは Markdown 記法という Wiki などの記述に近い、手軽なドキュメントです。様々なエディタ、特に Atom エディタなどは、HTML の高速入力ができる Emmet(Zen-Coding) や、Markdown をプレビューしながら編集できる機能などが、プラグインで提供されています。
  • ただし、これらの記法だと 図表が必要になった場合に不便です。手書きのを図をカメラで撮って挿入したり、様々な図表作成ツールがあるので、慣れておくと良いと思います。
  • ちなみに授業で使ってる図表で使ってるツールは、GIMPInkscapeGeoGebra などの描画ツール、Function Plotthree.jsGraphicsJS などの描画 JavaScript ライブラリなどを使用してます。
  • それらに習熟してない場合は、手書きのノートが最強だと知ってください。 プログラマーはなぜ手書きするのか

勉強のコツ

  • 勉強する時、意識するのは記憶のメカニズムです。ランダムな単語を沢山聞いた時、人間の記憶は人に依るんですが、5~9個までしか覚えられないと言われてます。平均7なので、キャラクタが立つには7人まで。「7人の侍」は人の心に残るわけです。これを「短期記憶」と言います。時間が経つと忘れます。ミニFlash【短期記憶力チェッカー】

  • 短期記憶を長期記憶に定着させる手法があります。まず、寝ること。寝てる間に脳は記憶をガベージコレクションの様に記憶した脳の場所を移動させます。短期記憶から長期記憶に移動する時に「夢」を見ます。

  • もう1つ効果的なのは、時間を置いて、もう一度理解することです。1日後と1週間後が効果的だと思います。これは個人的な経験だけなので、人によって違う可能性はあります。

  • 効率よく勉強する方法を考えるのも、プログラマの性向です。

前期のシラバスの説明

  • 前期は、物理で必要になる数学を学びます。終わりの方で物理の授業に入ります。

  • 数学は、ゲームで多用される 三角関数、ベクトル、行列等を勉強します。数学は受講するクラスに依って能力差があるので、内容は多少前後したりする可能性があります。

  • 今日は、前提として知っていて欲しい数学の説明と、JavaScriptの説明を行います。

  • 「物理」は最初は難しいと思います。新しい考え方なので。でも、同じような事を繰り返しますので、最初分からなくても、徐々に理解を深めて下さい。

  • 最終的には3D空間で物理法則に従った物体の運動を使ったゲームを作れるようになることを目指します。

PCの利用法に習熟する

  • 計算することが多い授業です。次週に 様々なアプリをフラッシュメモリかポータブルHDDにインストールする方法を行います。それらのアプリを使って、計算はパソコンに任せましょう。

  • 微分積分を計算する内容もあります。理科系の大学生なら4年間、微分積分を道具として使います。そんな人達に対抗は出来ないので、考え方を学んで、計算はアプリで行うという方法を取ります。社会に出たときの実用性を重視します。

  • 微分積分は、ゲームで計算する場合は、\(\frac{1}{60}\) 秒進んだ状態を得られれば良いので、計算は簡単になります。

参考書籍

以下を参考にして授業を行います。内容によって、他の参考資料も紹介していきます。以後もスライドを使って説明するので、購入の必要はありません。

「ゲーム開発のための数学・物理学入門 改訂版」 SBクリエイティブ




数学の復習

論理と集合

  • 「AならばBである」の意味は、集合で言えば「AはBに含まれる」である。数学では「含意 (implication)」と呼ばれ、記号で書くと、 \[論理:\ A \Rightarrow B \qquad 集合:\ A \subseteq B \]

  • 「AならばBであり、BならばAである」という場合は、AとBは同じ意味となり、「同値 (equivalence)」と呼ばれる。 \[論理:\ A \Leftrightarrow B \qquad 集合:\ A = B\]

  • 抽象的で分かりにくい場合は具体例を考える。「猫は哺乳類である」と考えると分かりやすいと思う。ネットなどの議論で、含意で言ってることを同値と受け取り、「でも、犬も哺乳類じゃないか」と批判してるような場合がある。論理を知ってれば、こういう間違いはしなくなる。
  • 「AならばB」に対して、「BならばA」は 「逆」と呼ばれる。AとBが同値の場合以外は、「AならばB」が真(true)の場合、逆は偽(false)になる。

  • 「AならばB」に対して、「AでないならばBでない」は 「裏」と呼ばれる。AとBが同値の場合以外は、「AならばB」が真(true)の場合、裏は偽(false)になる。

  • 「AならばB」に対して、「BでないならAでない」は、逆の裏で「対偶」と呼ばれる。「AならばB」が真(true)の場合、対偶も真(true)になる。これを使った証明が背理法である。

  • \[ \require{AMScd} \begin{CD} A \Rightarrow B @>{逆}>> B \Rightarrow A \\ @V{裏}VV @VV{裏}V \\ \lnot A \Rightarrow \lnot B @>>{逆}> \lnot B \Rightarrow \lnot A \\ \end{CD}\]

ド・モルガンの法則

  • 論理和 \( \lor \)、論理積 \( \land \)、否定 \( \neg \) の論理記号を使って記述すると、このように表現できる。 \[ \neg (A \lor B) = \neg A \land \neg B \] \[ \neg (A \land B) = \neg A \lor \neg B \]

  • 集合で表現すると、以下のようになる。 \[ \overline{ A \cup B } = \overline{ A } \cap \overline{ B }\] \[ \overline{ A \cap B } = \overline{ A } \cup \overline{ B }\] \[\]
  • 具体例で言うと、「ネコかイヌを好きな人」の否定は「ネコもイヌも嫌いな人」になる

数学とは

  • ある少数の前提(公理)から、厳密な論理によって導き出される体系が数学です。
  • 最初の数学は2,200年ほど前の古代ギリシャの数学者、ユークリッドの「原論」による幾何学です。1900年代初頭にヒルベルトにより厳密化されました。作図の問題の基礎を明確にした幾何学の公理は以下の5つ。
    1. 任意の一点から他の一点に対して直線を引くこと
    2. 有限の直線を連続的にまっすぐ延長すること
    3. 任意の中心と半径で円を描くこと
    4. すべての直角は互いに等しいこと
    5. 直線が2直線と交わるとき、同じ側の内角の和が2直角より小さい場合、その2直線が限りなく延長されたとき、内角の和が2直角より小さい側で交わる。
  • ヒルベルトにより、これらの公理は「無矛盾」であることが証明されています。さらに、5番目の公理を採用しない「非ユークリッド幾何学」も、成立しています。
  • つまり、数学はその構造を維持してれば、実用的かどうかに関係なく「数学」です。その強力な威力で理科系のバックボーンになってます。物理は森羅万象を扱いますが、数学の言葉で説明する以外の方法はありません。現実的でない数学はたくさん存在しますが、物理が進歩してきたのは、対応できる数学があったからです。

  • 物理は実験や観測によって、理論が検証されます。数学は論理の正しさだけが求められるという違いがあります。物理は現実的な最前線で、それを支えてくれるのが数学です。ただ、物理の難しい問題が、数学界で難問に認定される場合もあります。

  • ニュートンが微分積分を考案して、数学界がそれを厳密化したように、協調しながら発展しています。アインシュタインが一般相対性理論で「テンソル」という数学概念を作ったみたいに。

数の分類

  • 自然数:1, 2, 3, 4, 5, 6, ...
  • 整数: ..., -2, -1, 0, 1, 2, 3, ...
  • 有理数: 分数で表せる数 = 有限小数と循環小数
  • 無理数: \( \sqrt{2}, \sqrt{3}, \pi, e\) など
  • \(\sqrt{2}\) が無理数である証明(背理法)→ \(\sqrt{2}\) が有理数であると仮定して矛盾を導く。
  • 複素数は知識としては知っていて欲しいが扱う範囲外です。
  • 自然数、整数、有理数は順序付けが可能な無限個存在します。(\(\aleph_0\) アレフゼロ) 無理数も含めた実数は順序付けできません。(\(\aleph_1\) アレフワン)

自乗と平方根

  • 数を2回掛け合わせることを自乗とよぶ。例えば \(4 \times 4 = 4^2 = 16\)
  • ある数を2回掛けあわせたら N になった時、そのある数を N の平方根と呼ぶ。(自乗の逆関数)
  • 平方根はマイナスの場合もある。例えば、4の平方根は \(\pm2\)
  • Nの平方根のプラスのものを \(\sqrt{N}\) と書き「ルートN」と言う。
    • \(\sqrt{1} = 1\)
    • \(\sqrt{2} = 1.41421356...\) 「一夜一夜に人見頃」ひとよひとよにひとみごろ
    • \(\sqrt{3} = 1.720508...\) 「人並みに奢れや」ひとなみにおごれや
    • \(\sqrt{4} = 2\)
    • \(\sqrt{5} = 2.2360679...\) 「富士山麓鸚鵡鳴く」ふじさんろくおーむなく

べき乗

  • 2を3回掛ける場合、\(2 \times 2 \times 2 = 2^3 = 8\)
  • この時の \(2^3\) の右上の3の事を指数と呼ぶ。
  • 指数が1増えると2倍、1減ると 1/2 になることから、\(2^2=4, 2^1=2, 2^0=1, 2^{-1} = \frac{1}{2}, 2^{-2}=\frac{1}{4}, 2^{-3} = \frac{1}{8},... \)
    と自然にマイナスの指数に拡張できます。
  • \( a^m \times a^n = a^{(m+n)}\), \( (a^m)^n = a^{(m \times n)}\) の関係が成り立つ。
  • 2番めの式から、\( (a^{\frac{1}{m}})^m = a^1 = a \) となることから、\(a^{\frac{1}{m}}\) は、\(m\) 乗して \(a\) となることから、\(a\) の \(m\) 乗根と定義できる。
    \( a^{\frac{1}{m}} = \sqrt[m]{a} \)

べき乗のグラフ

  • ネピア数: \(e = 2.71828 18284 59045...\)

  • \(y=10^x\) での10をべき乗の底と呼ぶ。
  • \(x=1\) でのグラフの値は、それぞれの底の値になっている。
  • \(x\)が大きくなると、\(y\) の値が急激に上昇する。「指数関数的に増加する」というのが慣用句になるほどである。

べき乗 (注意)

表現のゆれ
\(a^2\)2乗平方自乗
\(a^3\)3乗立方
\(a^4\)4乗

  • 歴史的経緯により、複数の表現が使われるので注意。
  • 1平方メートル = 1辺1mの正方形の面積 = 1m2
  • 1立方メートル = 1辺1mの立方体の体積 = 1m3

十二平均律の周波数

  • 現在の音楽の音程は、「ラ」の音(\(A_4\)) を、440Hz としている(A440)。1オクターブ上がると周波数が倍になる関係がある。1オクターブの間に12音存在するので十二平均律と呼ばれている。従って、1音で変化する周波数の割合 \(p\) は、 \[ p^{12} = 2 \quad \Rightarrow \quad p=2^{\frac{1}{12}} = 1.059463\]
    となる。中音のラの1音上のシ(\(B_4\)) は、\(440 * 1.059463 = 466Hz\) となる。

対数(べき乗の逆関数)

  • \( y = a^x \) の時、\(x\) の値を \(a\) と \(y\) から求める時、\( x = \log_a y\) と書き、「\(a\) を底とする \(y\) の対数」と言う。

対数の公式

  • 普通は \(e\) を底とする自然対数を使う。10を底とする常用対数と自然対数が混在する場合は、自然対数を \(\ln\) 、常用対数を \(\log\) と使い分けるので注意。

  • 定義により、\(a^{\log_a x} = x\)

  • \(\log_a(xy) = \log_a x + \log_a y \)

  • \(\log_a x^p = p \log_a x\)

  • \(\log_a x = \frac{\log_b x}{\log_b a}\)
  • ムーアの法則(1965年): 集積回路上のトランジスタ数は「18か月(=1.5年)ごとに倍になる」という法則で、集積度からコンピュータの能力に拡大解釈されて、現在でも通用する法則である。数式で書くと、 \[ p = 2^{year/1.5} \quad \Leftrightarrow \quad year = 1.5 \log_2 p\] 従って、性能が100倍になるには、\(1.5 \log_2 100 = 9.96\) つまり10年で100倍の性能になる。 ちなみに、電卓で\(\log_2\) を計算するには、\(\log_a b = \log b / \log a\) の関係を使います。

  • マグニチュード: 地震が発するエネルギーの大きさを \(E\) (単位:ジュール)、マグニチュードを \(M\) とすると、次の関係がある。 \[ \log_{10} E = 4.8 + 1.5 M \]
    従って、マグニチュードは2異なると千倍の差がある。東日本大震災は、マグニチュード9.0 なので、そのエネルギーは、\( E = 10^{4.8+1.5*9} = 2.00 * 10^{18} J\) 。これは、広島型原爆(\(6.28*10^{13} J\))の、3万倍のエネルギーである。現在最大の水爆は広島型の3千倍、ロシアのツァーリ・ボンバである。これなら10個分。

式の変形

  • \(x-a = y\) 両辺に \(a\) を加算する \(x-a+a = y+a \ \Rightarrow \ x=y+a\) 符号を変えて、等式の反対側に移動するので移項という。

  • R を抵抗(単位Ω)、Eを電圧(単位V)、Iを電流(単位A)とすると、オームの法則 \( I = \frac{E}{R} \) の元の式から、両辺に \(R\) を掛けて、等式の左右を入れ替えると \(E = IR\) となり、電圧降下を求める式になるし、更に両辺を\(I\) で割って左右を入れ替えると \(R=\frac{E}{I}\) となり、電圧と電流から抵抗値を求める式になる。

  • 両辺を 変数で割る場合、変数が0にならないかは注意が必要。これはプログラムでも同じ。極稀に0になってしまう場合は、デバッグしにくいバグになる。

式の展開

  • 基本:\((ax+b)(cx+d) = ax(cx+d)+b(cx+d) \)
    \(= acx^2 + adx + bcx + bd = acx^2+(ad+bc)x +bd\)

  • \((x+a)(x-a) = x^2 -ax + ax -a^2 = x^2 - a^2\)

  • \( (x \pm a)^2 = x^2 \pm 2ax + a^2 \)

  • \( (x \pm a)^3 = x^3 \pm 3ax^2 + 3a^2x \pm a^3 \)

式の展開の利用

  • \( (x \pm a)^2 = x^2 \pm 2ax + a^2 \)

  • \(99^2 \) の計算を考えてみる。普通に筆算で計算すれば良いのだけど、もっと簡単に出来ないか?こう考えるのは、数学でもプログラムでも大事なことです。\(99 = 100 - 1\) だなと気がつけば、上の式を利用できることに思い至ります。
    \(99^2 = (100-1)^2 = 100^2 -2 \times 1 \times 100 + 1^2\)
    \( = 10000 - 200 +1 = 9801 \)

  • \(999^2\) も簡単に計算できますね?

  • 囲碁の盤は \(19^2\) の交点に石を打てます。計算できますね?
  • 同様に \(105^2\) の計算などもできます。



JavaScript

ウェブの仕組み

Webサーバ

  • サーバソフト … Apche, IIS, Node.js, ...
  • データベース … MySQL, PostgreSQL, ...
  • サーバ言語 … PHP, Java, Ruby, Python, Perl, ...


ブラウザ

IE, Edge, FireFox, Chrome, Safari, ...

  • HTML … コンテンツの骨組みと内容
  • CSS … 見た目を決める
  • JavaScript … 動作を制御するプログラム言語

JavaScript

オンラインの開発環境

同じIPから多数のアクセスがあると、DDOS攻撃と誤認されて遮断される場合があるため、授業では使えないが、手軽に試せるのでどれかに馴染んておくことをおすすめします。それぞれに違いがあります。ユーザー登録が必要だったり。

JavaScript の基本は HTML のサポート

  • ウェブ上でユーザー登録をするようなとき、入力が間違ったら即座に警告を出してくれれば便利です。このような入力チェックをバリデーション(validation) と呼びます。
  • HTML5 になって、フォームの機能が強化されて、ある程度の入力の利便性は向上しました。それでも、フォームの入力画面で脱落するユーザが多いので、各社利便性の向上のために、入力チェックには力を入れています。

  • このような、HTMLで不足している機能をサポートする目的で使われることが、一番多いかもしれません。
  • 例: 毎日新聞のユーザ登録画面
  • 例: 旅館・ホテル、国内・海外旅行予約はJTB

  • ニュースサイトなどを見てると、最近調べたものの関連商品の広告が出て、ドッキリすることがあります。あれも広告会社が提供する、そのPC、スマホ向けの広告を JavaScript でページに埋め込んでいます。サーバー側では、ウェブページがアクセスされると、そのIPアドレスや機種の種類、ブラウザの種類、クッキーなど様々なデータを収集できるので、そのPCやスマホを特定することができます。

DOM (Document Object Model)

  • ブラウザは HTML を読み込むと、その構造をツリー形式で評価します。このツリー形式のデータを DOM と呼びます。ブラウザ上で、ある文字の上で右クリックして、メニューの一番下「検証」を選ぶと、Elemnts に DOM が表示されます。
  • 導入 - DOM | MDN
  • JavaScript で、ドキュメントを操作するには、この DOM に対して処理を行います。

DOM のアクセス

  • 以下の命令で、要素を取得できます。
    • タグ名配列: document.getElementsByTagName("anyTag")
    • class配列: document.getElementsByClassName("anyclass")
    • IDエレメント: document.getElementById("anyId")
  • innerText, innerHTML に文字列を入れると反映されます。→JavaScript テスト


jQuery: DOMアクセスサポート

  • DOM アクセスは、結構面倒な作業なので、それを簡単にしてくれる jQuery というライブラリがデファクトスタンダードで良く使われます。
  • メジャーなライブラリは、サーバにアップロードしなくても、CDN (Contents Delivery Network) というウェブ上のサービスを使って導入できます。ただし、サービスが終了する危険があるので、永続的なウェブページを使う場合は、自前でアップロードしましょう。main.js を読み込む直前に入れます。



  • jquery を使うと前のページのプログラムは以下のようになります。→JavaScript テスト



JavaScript ライブラリ

MathJax

数式表示には欠かせないライブラリ。

  • 本家: MathJax
  • MathJax 概要
  • \[ x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}\] \[ \frac{1}{\pi} = \frac{2\sqrt{2}}{99^2} \sum_{k=0}^\infty \frac{(4k)!(1103*26390k)}{k!^4 396^{4k}}\]

SyntaxHighlighter

ソースコードを見やすく表示する。



reveal.js

このスライド自体が reveal.js で作られてる。



その他のスライドライブラリ

Gifffer

アニメーションGIF のアニメーションスイッチ。

LightBox2

写真をサムネイルで表示して、クリックしたら大きく見せたい場合。



教材として作成したサンプル

様々なJavaScriptライブラリ

次回の授業