目次

第1章　［入門］グラフィックスプログラミング　……長く役立つ基礎の基礎

1.1　グラフィックスとグラフィックスプログラミングの基本　……CG、2D、3D、画素

• コンピューターグラフィックス　……コンピューターによって描き出されたグラフィックス
• 2Dと3D　……グラフィックスの生成手順やデータ管理方法が違うだけ
• グラフィックスを構成するもの　……出力先は「画素」の集まり
• グラフィックスプログラミングの課題や目的　……画素をどう塗りつぶすか

1.2　グラフィックスプログラミングの分類　……活躍の舞台は広い

• 情報を伝えるためのグラフィックス
• 情報を正しく理解するためのグラフィックス
• エンターテイメントとしてのグラフィックス
• アートとしてのグラフィックス

1.3　グラフィックスプログラミングと技術　……原則、プログラミング言語、API

• グラフィックスプログラミングの原則
• グラフィックスプログラミングと、プログラミング言語＆ツール　……手軽にグラフィックスを生成する選択肢
  • Processingでできること
  • ゲームエンジンから学び始める
  • ツールと基礎/原理の学習
• グラフィックスAPI　……DirectX、OpenGL、OpenGL ES
  • ［まとめ］DirectXとOpenGLの特徴
• グラフィックスAPIを利用するアプリケーション
• Column　Metal、Vulkan　……AppleとKhronos Groupのその他のグラフィックスAPI
• Webとグラフィックス　……JavaScriptと動的なグラフィックス生成機能
• JavaScriptとWebブラウザによる効率的な学習の実現
• JavaScriptのメリットを活かす　……本書の構成と解説の流れ

1.4　本章のまとめ

第2章　［グラフィックスプログラミングで役立つ］JavaScript/ES2015入門　……開発環境から文法基礎まで

2.1　本書における開発言語と開発環境　……JavaScript、Chrome、Windows＆macOS

• サンプルの実行環境　……Google Chrome
• 開発環境とテキストエディタ
• Webとアプリケーション
  • クライアントサイドとサーバーサイド
• JavaScriptとECMAScript
• Column　ECMAScript規格とWebブラウザの実装の関係
• JavaScriptの進化と、グラフィックスプログラミング

2.2　サンプルと実行環境について　……ファイル構成、ブラウザ＆開発ツール

• サンプルの構成と実行方法
• Chromeの開発者ツールの基本　……JavaScriptのデバッグ準備
• 開発者ツールのパネル＆JavaScriptのデバッグ
  • Elementパネル　……HTMLドキュメントの構造を確認
  • Sourcesパネル　……JavaScriptプログラムの実行制御をデバッグに活用
  • Consoleパネル　……JavaScriptのインラインコードの実行結果を確認できる
• コメントとJSDoc　……サンプルに含まれるコメントの読み方

2.3　［グラフィックスプログラミングのための］JavaScript/ES2015の基本　……基本操作、変数、関数、オブジェクト、演算子

• アラートやコンソールの活用
• 変数　……変数名、キーワード、基本的な規約
• 変数宣言キーワードとスコープ
  • ローカルスコープ、グローバルスコープ
  • var　……スコープは関数内部限定
  • let　……スコープは関数内部とブロック内部
  • const　……スコープは関数内部とブロック内部。再代入が行えない
• JavaScriptのデータ型
• 変数の動的型付け　……JavaScriptでは変数自身は型を持たない
• Column　変数宣言キーワードの取捨選択
  • 動的型付けの言語で気をつけたいこと
• Column　null、undefined、Symbol
• 関数　……名前付きの関数の定義と呼び出し、関数の戻り値
• 関数式　……文と式
  • 関数式による関数の定義と呼び出し
  • 無名関数
  • アロー関数
• Column　関数の引数と既定値
  • 関数式と関数の引数
• Column　非同期処理とコールバック関数
• Column　JavaScriptと「自動セミコロン挿入」機能
• オブジェクト型　……JavaScriptではプリミティブなデータ以外、すべてがオブジェクト型
• 配列　……データをまとめて格納できる。（グラフィックス）プログラミングで頻出のオブジェクト
  • 配列の要素へのアクセス　……インデックスを指定
• オブジェクト　……多種多様なオブジェクトで成り立つJavaScript
  • オブジェクトの構造
  • オブジェクトの要素へのアクセス
• Column　プロパティとメソッド
• Column　ビルトインオブジェクトとプロトタイプチェーン
• 制御構文　……条件や繰り返し。ロジックを記述する
  • if文　……ある条件に一致した場合＆しなかった場合、処理へ進む
  • for文　……カウンター変数を用いて繰り返し処理を行う
• Column　JavaScriptの真偽値判定
  • while文　……柔軟な継続条件で繰り返し処理を行う
• Column　無限ループ
  • switch文　……特定の条件に応じた分岐処理
• 演算子　……算術、代入、比較、論理、条件
  • 算術演算子　……四則演算、剰余
  • インクリメント演算子、デクリメント演算子　……接頭辞と接尾辞に注意
  • 代入演算子　……変数に値を代入
  • 比較演算子　……原則として厳密比較を使用
  • 論理演算子　……&&（AND）、||（OR）
  • 条件演算子　……条件に合わせて異なる値を用いたい場合

2.4　本章のまとめ

• Column　条件演算子とif文

第3章　［基礎］グラフィックスプログラミングと数学　……三角関数、線型代数、乱数＆補間

3.1　角度と三角関数　……ラジアン、sin（サイン）、cos（コサイン）

• ラジアン　……弧度
  • 角度の表現　……度数法と弧度法
  • プログラミングと角度　……ラジアンで考える
• Column　ラジアンの捉え方
• グラフィックスプログラミングのためのsin、cos　……ラジアン、半径1の円とともに
• Column　グラフィックスプログラミングで大活躍（!?）の三角関数

3.2　ベクトルと行列　……点から始める線型代数

• ベクトルとスカラー　……量と向き
• 原点とベクトルの始点と終点　……点を結ぶ
• ベクトルの向き　……単位化、単位ベクトル、（再び）半径1の円
• Column　座標とベクトル　……配列[x, y]は座標なのか、ベクトルなのか
• ベクトルと演算　……加算、減算
• Column　単位化、正規化、規格化、標準化　……単位化と同様の意味で使われる言葉？
• ベクトルのスカラー倍
• ベクトルの内積、外積
  • 内積　……内積はベクトルAとベクトルBの成す角θに対するコサイン
• Column　ベクトルのスカラー倍で速度が変わる
  • 外積　……外積はベクトルAとベクトルBの成す角θに対するサイン
• Column　ベクトルの内積と外積の使いどころ
• 行列　……ベクトルの変形や変換
  • 回転行列　……ベクトルを回転させる

3.3　乱数/擬似乱数と補間＆イージング　……グラフィックスプログラミングに役立つ数学関連知識

• 乱数と擬似乱数　……ランダムな状態と擬似乱数の品質
  • JavaScriptと乱数（擬似乱数）　……Chrome/V8のXorshift
• 補間とイージング　……滑らかさや緩やかさの変化の表現

3.4　本章のまとめ

• Column　あらゆる場面で活躍する補間関数
• Column　擬似乱数とシード値

第4章　Canvas2Dから学べる基本　……Canvas2Dコンテキストと描画命令

4.1　Canvas2Dの基礎知識　……コンテキストオブジェクト、Document Object Model

• HTML5とCanvas、Canvas API　……ほとんどのブラウザはCanvasに対応
• コンテキストオブジェクト　……描画処理のための機能と設定を持つオブジェクト
• Canvas2Dコンテキストの取得　……CanvasRenderingContext2D
• HTML要素としてのCanvas　……Canvas要素にはCSSによる余分な装飾は極力行わない
• Column　コンテキストの種類
• Column　RetinaディスプレイとCanvas要素の大きさ　……CSSサイズ、物理サイズ
• Document Object Model　……Canvas要素をはじめ、HTML要素をJavaScriptから参照する

4.2　Canvas2Dの基本プリミティブ　……矩形、線、多角形、円、円弧、ベジェ曲線...

• 矩形の描画　……fillRect
• 塗りつぶしと線のスタイル　……fillStyle、strokeStyle
• ［予習］Canvas2Dサンプルの構成と動作確認
  • サンプルの実行　……HTMLファイルをダブルクリック
  • スクリプトファイルの読み込み　……<script>タグ
• Column　CSSのrgb関数とrgba関数
  • 即時関数を使って全体を囲う
  • 読み完了タイミングの検出　……addEventListenerとloadイベント
  • 初期化処理　……loadイベント後❶
  • 描画処理　……loadイベント後❷
• Column　addEventListenerの第3引数の意味
• Column　即時関数と無名関数
  • ［まとめ］本書サンプルの基本構成のポイント
• 処理の役割に応じた関数化　……シンプルな役割
• 線分（ライン）の描画　……Canvas2Dコンテキストではパスを利用
  • サブパス　……パスを区切る仕組み
  • パス＆サブパスを使ったラインの描画
  • ［まとめ］Canvas2Dコンテキストでパスを用いた描画の流れ
• パスを利用した多角形の描画　……一筆書きで座標を連続でつなぐ
• ランダムに変化する多角形の描画
• 円の描画　……円や円弧の描画もパスを利用
• 円弧の描画　……乱数によってランダムに変化する円弧の例
• Column　arcメソッドの第6引数
• ベジェ曲線　……2次ベジェ曲線、3次ベジェ曲線、複雑な曲線を描画する
• Column　パスを閉じずに描く　……closePath、stroke
• 画像を利用した描画　……読み込みの待機にaddEventListener（再び）

4.3　Canvas2Dコンテキストの描画効果＆演出機能　……テキスト、ドロップシャドウ、グラデーション、パターン、アルファブレンディング、コンポジットオペレーション

• テキストの描画　……グラフィックスとしてテキストを描く
• ドロップシャドウの描画　……一様に設定内容が反映される点には注意
• Column　文字列のfillとstroke
• グラデーションとパターン　……まずは効果を適用する実体のオブジェクトを生成
  • グラデーション　……線形グラデーション、円形グラデーション
  • パターン　……repeat、repeat-x、repeat-y、no-repeat
• アルファブレンディング　……アルファ値で、透明や半透明の描画処理
• コンポジットオペレーション　……さまざまな合成の種類
  • コンポジットオペエレーションの設定

4.4　本章のまとめ

第5章　ユーザーインタラクションのプログラミング　……ゼロから作るシューティングゲーム❶

5.1　［まずは準備から］シューティングゲームを作る　……ファイル構成とルール

• なぜ、ゲーム作り？　……種々の関連技術の集合体で、小さなゴールを設定しやすい
• 作成するゲームのファイル構成
• 作成するゲームの枠組み　……最低限のルールの定義

5.2　ゲームの骨格を作る　……土台となるプログラムの設計

• HTMLページとしての構造　……ゲームの舞台となるCanvas要素のための設定
• class構文　……独自の機能や属性を持つクラスを定義できる
• Column　loadイベントとDOMContentLoadedイベント
  • クラス再入門　……クラスの概念を持つ言語、持たない言語
  • プロトタイプとクラス　……JavaScriptにクラスは存在しない
  • ［まとめ］クラスベースとプロトタイプベース
  • プロトタイプベースの言語の記述と振る舞い　……prototype、new演算子、コンストラクタ関数
  • class構文の使い方　……プロトタイプの記述をわかりやすくする
• Column　プロトタイプは拡張できる　……ただし、注意点も
• canvas2d.jsに記述したCanvas2DUtilityオブジェクト　……class構文で定義
  • コンストラクタ関数でインスタンスを生成できるオブジェクト　……便宜上の「クラス」
  • constructor（コンストラクタ）
  • property（プロパティ）
  • propertyとgetter（プロパティとゲッター）　……プロパティを取得する際に関数を実行したい
• Column　setter（セッター）　……プロパティを設定する際に関数を実行したい
  • method（メソッド）　……オブジェクトが持っている関数
• Column　プロトタイプを用いるメリット　……プロトタイプチェーン
• script.jsに記述されたメインプログラム　……シューティングゲーム作成のひな形
• メインループ　……アニメーション処理のための基盤を実装
  • タイムスタンプの格納と取得
  • 描画処理　……塗りつぶし、経過時間の計測、画像の描画、描画処理の再帰呼び出し
• ユーザーインタラクション　……ユーザーの入力とaddEventListener
• Column　キー入力系イベントの発生順序とリピート
• シーン構成を整える　……各種シーンの状態管理の基盤

5.3　本章のまとめ

第6章　キャラクターと動きのプログラミング　……ゼロから作るシューティングゲーム❷

6.1　キャラクターの実装　……キャラクター管理クラス、キーの入力によるインタラクティブな移動

• クラスの抽象化　……共通して必要となるパラメーターをまとめて管理
  • Positionクラス　……座標を管理するためのクラス
• Column　コンストラクタによる値の代入
  • Characterクラス　……キャラクターのベースとなる汎用的なクラス
  • クラスの継承と自機キャラクタークラス　……class構文のextendsと、super
• 自機キャラクタークラスを利用したメインプログラム
• クラスに特有の処理を一元管理する
• キャラクターの幅を考慮した描画
• キャラクターの移動をなめらかに行う
  • windowオブジェクトへのプロパティ追加
• Column　キャラクターの中心　……3Dでも活かせる座標を意識する感覚
  • オブジェクトのプロパティへのアクセス　……ドット記法とブラケット記法
  • テンプレートリテラル
  • ブラケット記法とテンプレートリテラルを組み合わせる
• 画面の外に出ないように制限する　……画面の端の判定と座標の補正
• Column　速度をspeedというプロパティに置き換えた意味

6.2　ショットの実装　……大量ショットのインスタンス、程良い速度、回転描画

• ショットはキャラクターの一種　……Characterクラスを継承してShotクラス
• キャラクターからショットを放つ　……Characterクラス、Shotクラス、Viperクラス
• ショットのことを踏まえた初期化処理　……大量のショットのインスタンスを扱う
• ロードの完了と描画処理
  • render関数の呼び出し
• ショットが高速に生成されることを防ぐ　……密生するショットの原因と対策
• Column　setTimeoutとsetInterval
• ショットの進行方向を設定可能にする
• 異なる種類のショットを同時に放てるようにする
• ショットを回転させて描画する
  • Canvas2Dコンテキストにおける回転表現
  • 原点を意識して回転処理を行う
  • Canvas2Dコンテキストの状態保存と状態復元
  • その他の変更点
• Column　Math.PI * 1.5の意味するもの

6.3　敵キャラクターの実装　……敵キャラクターの配置、シーン管理＆更新、敵キャラクターのタイプ

• Column　サイン、コサインで作るベクトルは常に単位ベクトル
• 敵キャラクターのためのクラスを実装する
• 「シーン」という概念　……SceneManagerクラス
• シーン管理クラスの利用とシーン更新用の関数
  • ［まとめ］シーン関連の変更点
• 連続して敵キャラクターが出現するシーン
• キャラクターに「タイプ」の概念を追加する

6.4　本章のまとめ

第7章　状態に応じた判定や演出のプログラミング　……ゼロから作るシューティングゲーム❸

7.1　衝突判定　……オブジェクト同士の衝突、エフェクト、補間関数/イージング関数

• 衝突を判定するロジック　……形状に応じた判定の基本
  • 矩形との衝突判定の注意点
• ベクトルを利用した衝突判定　……ベクトルの長さを測る方法の応用
• Positionクラスの拡張　……2つの座標間の距離を計測
• 自機キャラクターのショットと敵との衝突判定　……攻撃力とライフ
• Column　キャラクターのサイズ
• 破壊を演出する　……爆発エフェクト
  • Explosionクラス
• 爆発エフェクトの質感を向上する　……ランダム要素を取り入れる
• 補間関数で減衰するような動きを表現　……より自然な変化

7.2　自機キャラクターの状態に応じた処理　……ライフの減算、ゲームオーバーの演出、再スタート

• 自機キャラクターと敵ショットとの衝突判定　……敵キャラクターの攻撃
• ゲームオーバーの演出とゲームの再スタート　……ゲームの終わり。しかし、実装と演出は続く...

7.3　ゲームの品質向上　……スコア、敵キャラの攻撃力＆耐久力、シーン管理、背景、音声、ボスキャラ

• スコアを集計して表示する
• Column　String.padStartメソッド
• 敵キャラクターのバリエーションを増やす
  • 自機狙い弾を放つ敵キャラクター
  • 耐久力の高い敵キャラクター
  • シーン管理の見直し　……よりゲームらしく
• 背景を追加する　……ゲームの舞台を表現する演出
• 効果音を再生する　……シーンの雰囲気を底上げする演出
  • ユーザーの操作を受けてから初期化処理を行う
  • 音声データを扱う自作クラスを実装する　……Soundクラス
  • Promiseと非同期処理
  • AudioContextによる音声データの再生
• Column　コールバック関数とPromise
• Column　JavaScriptとガベージコレクタ
• ［いよいよ最終仕上げへ］ボスキャラクターやホーミングショットの実装に挑戦！
  • ボスキャラクター本体の実装　……キャラクター自身が「モード」を持つ
  • ホーミングショットの実装　……内積＆外積の知識をフル活用
• Column　プログラミングと数学や物理

7.4　本章のまとめ

第8章　ピクセルと色のプログラミング　ピクセルを塗る操作と感覚

8.1　［再入門］グラフィックスを構成するピクセル　……ピクセルと画像処理

• そもそもピクセルとは何か？　……グラフィックスを構成する最小の単位
• ピクセルを操作する画像処理　……ある意味ではグラフィックスプログラミングの本質
• Column　ペイントソフトは画像処理の宝庫

8.2　Canvas APIでピクセルを直接操作する　……ピクセル操作の窓口「ImageData」

• ［基礎知識］同一生成元ポリシー　……ローカル環境とWebブラウザのセキュリティ
• ローカルサーバーを起動してファイルをプレビューする
• Chromeの拡張機能を利用したローカルサーバーの起動　……Web Server for Chrome
• Column　（比較的簡単な）その他のローカルサーバー起動方法
• ImageDataオブジェクト　……Canvas要素のピクセルを操作する窓口
• TypedArray　……数値を効率良く扱える型付き配列
  • Uint8ClampedArray形式　……値がクランプされる特殊な形式
• Column　JavaScriptとバイナリデータ　……TypedArray
• ピクセルの並び順とデータ構造　……ImageDataを利用したピクセル情報の抜き出し

8.3　画像処理プログラミングの基本テクニック　……ネガポジ反転、グレースケール、2値化、エッジ検出、ノイズ除去、モザイク

• ネガポジ反転
• グレースケール　……色の鮮やかさと引き換えに。白〜灰色〜黒の明暗を得る
• 2値化　……白か黒か。色が二択
• Column　意外にも奥が深い（!?）グレースケールの世界
• エッジ検出　……色差分を可視化するラプラシアンフィルター
• ノイズ除去　……メディアンフィルターで極端に色が異なるピクセルを除去する
• Column　上下左右だけでなく、斜め方向も加えたラプラシアンフィルター
• Column　メディアンフィルターを繰り返し実行する
• モザイク　……ピクセルの大きさを変化させる

8.4　本章のまとめ