グラフィックスプログラミング...?

「ゲーム&モダンJavaScript文法で2倍楽しい グラフィックスプログラミング入門」をいたしました。

JSDocの存在は知っていたが使われているとこ見たことなかった。サンプルコード全てにコメントされているので楽しみ。

グラフィックスプログラミングを理解するうえで弧度法、sin,cos三角関数の章が設けられている。この年で数学をすることになるとは思わなかった。学生の時数学が一番好きだったが、全然忘れていてびびった。

度数法からラジアンへ変換

function degToRad(degrees) {
 // 円周は半径 * 2 * π
 return (degrees / 360) * (Math.PI * 2)
}

// リファクタリング
function degToRad(degrees) {
 return degrees * Math.PI / 180
}

sinとcosが半径1の円のy座標とx座標ということ、そういえばそうだったなと記憶が蘇って感動。

Math.sin(ラジアン)でsinや同様にcosを求めることができる。

sin,cosは-1~1の値を往復するので、図や数学でなくても、プログラミング上で応用できる。

ベクトル久しぶり。

ベクトルの量を1にそろえたものを単位ベクトルという。1に揃えることを「単位化」「正規化」ともいう。

単位ベクトルは半径が1のときの(x,y)の座標ともとれる。

sinの値からラジアンをもとめるMath.asinとかもある。

内積

単位化されたベクトル同士の内積=cosθ

数式では・（ドット）を使って表現するためdot関数と命名されがち

外積

単位化されたベクトル同士の外積=sinθ

✕（クロス）を使って表現するためcross関数

線の描画、矩形の描画を学んだところで、ロードするたびに異なる図形を描画してみた。

実態はランダムな５点の頂点の座標をつなげているだけだが、これをどうにかして補間するだけで面白いものが作れそうだと胸踊る。

同じく、円弧をランダムに描画

ベジェ曲線-始点終点と制御点で描画。2次ベジェ曲線は描画点が1つ、3次ベジェ曲線は2つ。Photoshopみたい。

画像の描画

let img = new image()
img.addEventListener('load', () => {
 // 画像を描画する（位置を指定）
 ctx.drawImage(img, 100, 100); 

 // （位置、大きさを指定）
 ctx.drawImage(img, 300, 100, 200, 200);

 // 画像を描画する（一部を切り出し＋大きさを指定）
 ctx.drawImage(img, 16, 16, 96, 96, 100, 300, 50, 50);
}
img.src = path

文字の描画 - fillText関数

ドロップシャドウ - テキストや図形に

ctx.shadowBlur
ctx.shadowColor
ctx.shadowOffsetX
ctx.shadowOffsetY

以上の知識と、requestAnimationFrame,WebAudioAPIを用いて、本付属のimageやsound、コードを参考にして作ったのが下記シューティングゲーム。

https://chipper-parfait-5545f3.netlify.app/

大事なのはボスキャラの、自機へ追従するホーミング弾だと感じた。何周かやって、グラフィックスプログラミングの基礎を掴みたいと思う。