nabeliwo blog

nabeliwo blog は nabeliwo の日々の出来事だったり生活の中で感じたことだったりを雑にお届けします。

『グラフィックスプログラミング入門』を読んだ

CATEGORY:読書

TAGS:#JavaScript

これを読んだ。
［ゲーム＆モダン JavaScript文法で2倍楽しい］グラフィックスプログラミング入門

個人的にとても好きな WebGL 総本山というメディアを運営している @h_doxas さんが書籍を出したということで興味を持って目次を読んでみたらとても面白そうだったので買ってみた。

感想

最初にグラフィックスプログラミングとは何かという話から入り、 JavaScript の基礎やグラフィックスプログラミングに必要な数学の基礎を学んだ後、実際にシューティングゲームを作ってみて実践的に学ぶことができる。そして最後にピクセルレベルで操作する API で遊んでみてフィルターの基礎を学ぶ、といった内容。

全て基本的なところから説明してくれるので、 JavaScript の初心者や数学全くわからんという人でも多分しっかり理解した上で進められると思う。

実際に作るシューティングゲームのクオリティがすごくて、こんな感じの成果物ができる。

僕は普段仕事で JavaScript を書いているので JS の基礎のところは斜め読みしたが、数学の部分は全く自信がなかったのでしっかり読みつつ手を動かしつつ進めた。結果的に三角関数を使ったベクトルの操作など、グラフィックスプログラミングにおいて必須の要素をなんとなくではなく納得感を持って理解できた。
たくさんの図を使って説明してくれるのでとても分かりやすかった。

ちょっと気になったところとして、 ES2015 で class 構文が導入されて久しい今の時代において JS のプロトタイプの概念を出すのは話をややこしくしてしてしまうんじゃないかな〜と感じた。
もう一つ、シューティングゲームの章は写経しながら読み進めていたのだが、制作の最後の方は新機能を追加したあとそれに伴う変更への言及は特になくサンプルファイルを見つつよしなに、という感じなのに察し力を試された感がある。とは言えこれは全部写経してっていう想定ではなかったかもしれないのでしょうがないかも。

と言いつつも、基礎からしっかり理解できて、作れるもののクオリティも高くて学んだことを使ってできそうなことへのワクワク感もあってとても満足度が高かった。
グラフィックスプログラミングを初めてやってみる、という方にとてもおすすめです。

読書メモ

個人的に覚えておきたいなと思ったことの雑メモ。

  • ラジアンとは円周の長さを基準とした角度の表現
  • ラジアン(弧度法) <-> 度(度数法)
    • to radian
      • degree * Math.PI / 180
    • to degree
      • radian / Math.PI * 180
  • サイン・コサインはある角度に対する縦横の比
    • サインは y, コサインは x
  • 今いる座標と移動する角度と距離がわかっていれば移動先の座標がわかる
    • 移動先の x = 今のx座標 + (Math.cos(radian) * r)
    • 移動先の y = 今のy座標 + (Math.sin(radian) * r)
  • スカラーは実数と呼び、何かしらの量を表す
  • ベクトルは量に向きの概念が加わったもの
  • ベクトルの大きさを1に揃えることを単位化と言う
  • 単位化の式
    • let V = [5, -3] // ベクトル
    • let L = Math.sqrt(V[0] _ V[0] + V[1] _ V[1]) // ベクトルの大きさ
    • V[0] /= L
    • V[1] /= L
    • console.log(V) // ベクトルの単位化
  • 大きさが1になったベクトルのことを単位ベクトルと呼ぶ
  • 単位ベクトルにすると複数のベクトルを比較できる
  • 任意のベクトルを定義できるとき、それを単位化してから要素をアークサイン(逆正弦)やアークコサイン(逆余弦)に与えるとラジアンを求められる
  • 2つのベクトルの内積
    • v0[0] _ v1[0] + v0[1] _ v1[1]
  • 任意のベクトル同士の内積から角度を求める
    • let V = [5, 1]
    • let W = [-2, 3]
    • V = normalize(V) // それぞれのベクトルを単位化
    • W = normalize(W)
    • let dotValue = dot(V, W) // 単位化したベクトル同士で内積を求める
    • let rad = Math.acos(dotValue) // 内積の結果は cosθ なのでアークコサインでラジアンが得られる
  • 内積はベクトルAとベクトルBの成す角θに対するコサイン、外積はベクトルAとベクトルBの成す角θに対するサイン
  • 回転行列
    • [cosθ, -sinθ]
    • [sinθ, cosθ]

終わり

Unity の勉強をしていて、もうちょい基本的なところを理解したいな〜という気持ちになっていたところだったので、基礎を学べる教材としてとても良かった。おしまい！