4. アジェンダ
① 関数とは (2m)
② 三角関数とは (5m)
③ 三角関数を使ったコーディング体験(10m)
④ 行列とは (5m)
⑤ 行列を実装するコーディング体験 (10m)
⑥ 自由にコーディング (20m)
⑦ 発表 (5m)
9. 「三角関数」とは
① 角度を引数に渡すと、-1 から 1 の値を返す関数
② 返してくれる値はランダムではなく?
角度と関係性がある
表現で使うのは主にサイン (sin) とコサイン (cos)
それとパイ→π [3.1415…] は 180 であるという事
10. サイン sin
引数がいくら増えても 1 ～ -1 の値を循環する
? Math.sin( 0 ) → 0
? Math.sin( π?2 ) [ 1.570796… ] → 1
? Math.sin( π ) [ 3.141592… ] → 0
? Math.sin( π+π?2 ) [ 4.712388… ] → -1
? Math.sin( 2π ) [ 6.283185 ] → 0
11. サイン cos
引数がいくら増えても 1 ～ -1 の値を循環する?
π?2 度分だけ返り値がオフセットされている
? Math.cos( 0 ) → 1
? Math.cos( π?2 ) [1.570796…] → 0
? Math.cos( π ) [3.141592…] → -1
? Math.cos( π+π?2 ) [4.712388…] → 0
? Math.cos( 2π ) [6.283185] → 1
13. 課題①?sin cos を使って何か作る
制約
? Math.sin() Math.cos() を使う
例
? 光が明滅するアニメーション
? http://goo.gl/q1xRzH
? sin cos を使って描かれる図
? Math.PI 使ってもいいかも
alpha = sin(count)
x = cos(count)×10
y = sin(count)×10
?
?
?
??
20. 行列の計算：合体（concat）
M = 1 2
3 4
?
?
?
?
?
?
5 6
7 8
?
?
?
?
?
?
= 1×5+2×7 1×6+2×8
3×5+4×7 3×6+4×8
?
?
?
?
?
?
一つめの行列は横に、二つめの行列は縦に値を拾う
パズルみたいな感じだよ
21. 行列の計算：合体（concat）
M = 1 2
3 4
?
?
?
?
?
?
5 6
7 8
?
?
?
?
?
?
= 1×5+2×7 1×6+2×8
3×5+4×7 3×6+4×8
?
?
?
?
?
?
= 19 22
43 50
?
?
?
?
?
?
一つめの行列は横に、二つめの行列は縦に値を拾う
計算上出てくる行列最小の大きさになる
パズルみたいな感じだよ
22. 行列の計算：合体（concat）を汎化
= A× E + B ×G A× F + B × H
C × E + D×G C × F + D× H
?
?
?
?
?
?
M = A B
C D
?
?
?
?
?
?
E F
G H
?
?
?
?
?
?
23. 行列の計算：合体（concat）を汎化
連立方程式にしてみる
= A× E + B ×G A× F + B × H
C × E + D×G C × F + D× H
?
?
?
?
?
?
M = A B
C D
?
?
?
?
?
?
E F
G H
?
?
?
?
?
?
→
a = A× E + B ×G
b = A× F + B × H
c = C × E + D×G
d = C × F + D× H
?
?
?
?
?
?
?
24. 行列の計算：合体（concat）を実装
→
a = A× E + B ×G
b = A× F + B × H
c = C × E + D×G
d = C × F + D× H
?
?
?
?
?
?
?
function concatMatrix(A, B, C, D, E, F, G, H) {?
...?
return [a, b, c, d]?
}
http://goo.gl/eYmwE5
25. 「行列」何に使うん
二次元座標 (X, Y) や三次元座標 (X, Y, Z) のように複数
の値から成るデータを操作する場合有効
例：「座標」に「変換行列」を加えると?
??「変形」が行える（一次変換、アフィン変換）
? 「回転のための行列」(rotate)
? 「移動のための行列」(translate)
? 「拡大のための行列」(scale)
? 「傾斜のための行列」(skew)
30. おくづけ
? sin と cos の解説でつかったアニメーション?
http://goo.gl/bMdGjl
? 課題②回転行列をつかったアニメーション?
http://goo.gl/ZXZxNk
? 参考：3年前に書いたブログ?
http://creator.dena.jp/archives/27614327.html
? 数式エディター：Math Type?
http://www.dessci.com/en/products/mathtype/
trial.asp
![「三角関数」とは
① 角度を引数に渡すと、-1 から 1 の値を返す関数
② 返してくれる値はランダムではなく?
角度と関係性がある
表現で使うのは主にサイン (sin) とコサイン (cos)
それとパイ→π [3.1415…] は 180 であるという事](https://image.slidesharecdn.com/javascript-160107112551/85/JavaScript-9-320.jpg)
![サイン sin
引数がいくら増えても 1 ～ -1 の値を循環する
? Math.sin( 0 ) → 0
? Math.sin( π?2 ) [ 1.570796… ] → 1
? Math.sin( π ) [ 3.141592… ] → 0
? Math.sin( π+π?2 ) [ 4.712388… ] → -1
? Math.sin( 2π ) [ 6.283185 ] → 0](https://image.slidesharecdn.com/javascript-160107112551/85/JavaScript-10-320.jpg)
![サイン cos
引数がいくら増えても 1 ～ -1 の値を循環する?
π?2 度分だけ返り値がオフセットされている
? Math.cos( 0 ) → 1
? Math.cos( π?2 ) [1.570796…] → 0
? Math.cos( π ) [3.141592…] → -1
? Math.cos( π+π?2 ) [4.712388…] → 0
? Math.cos( 2π ) [6.283185] → 1](https://image.slidesharecdn.com/javascript-160107112551/85/JavaScript-11-320.jpg)
![行列の計算：合体（concat）を実装
→
a = A× E + B ×G
b = A× F + B × H
c = C × E + D×G
d = C × F + D× H
?
?
?
?
?
?
?
function concatMatrix(A, B, C, D, E, F, G, H) {?
...?
return [a, b, c, d]?
}
http://goo.gl/eYmwE5](https://image.slidesharecdn.com/javascript-160107112551/85/JavaScript-24-320.jpg)
