Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

クリエイティブコーディングのための数学 JavaScript 入門 [三角関数と行列]

14,953 views

Published on

三角関数と行列

Published in: Design
  • Be the first to comment

クリエイティブコーディングのための数学 JavaScript 入門 [三角関数と行列]

  1. 1. クリエイティブ コーディングのための 数学+JavaScript 入門 三角関数と行列 新春2016スペシャル たかはしのぶひろ 第一回クリエイティブコーディング勉強会「ベクトル」成果物 第二回クリエイティブコーディング勉強会「力」成果物 グループ展「Reflection」出展作品演出 グループ展「unframe 003」出展作品『Re-n-da-n』
  2. 2. クリエイティブコーディングで数学? • パーティクルを自由に飛ばしたい
 →速度の計算、ベクトル、移動量計算 • 色を自由に変化させたい
 →周期角度の計算、濃淡の連続的変化 • 大量のオブジェクトにダンスしてもらいたい
 →時間制御(タイムラプス)、高度な変形計算 • ジェネレイティブアートを作りたい
 →数学アルゴリズムの理解
  3. 3. 目標 ① 三角関数と行列で表現に活用できる部分を知る • 全部は知らんでも何とかなるわよ ② 数学式→JavaScript へ移植できるようになる • 画像、音声処理の wikipedia や論文が活用でき るようになりますぞ 一部意訳があります正確性は他の文献を参考にしてね
  4. 4. アジェンダ ① 関数とは (2m) ② 三角関数とは (5m) ③ 三角関数を使ったコーディング体験(10m) ④ 行列とは (5m) ⑤ 行列を実装するコーディング体験 (10m) ⑥ 自由にコーディング (20m) ⑦ 発表 (5m)
  5. 5. 「関数」とは • 処理のまとめ • パラメータ(引数)を渡して、
 返り値を返してくれる(こともある)
  6. 6. 「関数」とは • 処理のまとめ • パラメータ(引数)を渡して、
 返り値を返してくれる(こともある) 数学も同様!
  7. 7. 三角関数(数学I)
  8. 8. 「三角関数」とは ① 角度を引数に渡すと、-1 から 1 の値を返す関数 ② 返してくれる値はランダムではなく
 角度と関係性がある
  9. 9. 「三角関数」とは ① 角度を引数に渡すと、-1 から 1 の値を返す関数 ② 返してくれる値はランダムではなく
 角度と関係性がある 表現で使うのは主にサイン (sin) とコサイン (cos) それとパイ→π [3.1415…] は 180 であるという事
  10. 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. 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
  12. 12. sin と cos 青:sin 赤:cos http://goo.gl/bMdGjl
  13. 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 ⎧ ⎨ ⎪ ⎩⎪
  14. 14. おまけ:アークタンジェント atan アーク∼は値から角度を求める逆関数 • Math.atan2 (y: 1, x: 1) → 1/4π (45 )
  15. 15. 蛇足:Math.atan と Math.atan2 tan は 180 単位で値が循環する
 atan も 180 単位で値を返す
 atan2 は 360 がわかるよう、よしなにやってくれる • Math.tan(45 ) → 1 • Math.tan(225 ) → 1
  16. 16. 行列(数学C)
  17. 17. 「行列」とは • 複数の数を行と列で保持する数列 3 5( ) 1 0 0 1 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ a11 … a1n ! " ! am1 # amn ⎛ ⎝ ⎜ ⎜ ⎜ ⎜ ⎞ ⎠ ⎟ ⎟ ⎟ ⎟
  18. 18. 「行列」とは • 複数の数を行と列で保持する数列 • 表現では行列同士の計算まで理解があるといい感じ 3 5( ) 1 0 0 1 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ a11 … a1n ! " ! am1 # amn ⎛ ⎝ ⎜ ⎜ ⎜ ⎜ ⎞ ⎠ ⎟ ⎟ ⎟ ⎟
  19. 19. 行列の計算:合体(concat) M = 1 2 3 4 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ 5 6 7 8 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟
  20. 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. 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. 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. 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. 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. 25. 「行列」何に使うん 二次元座標 (X, Y) や三次元座標 (X, Y, Z) のように複数 の値から成るデータを操作する場合有効 例:「座標」に「変換行列」を加えると
   「変形」が行える(一次変換、アフィン変換) • 「回転のための行列」(rotate) • 「移動のための行列」(translate) • 「拡大のための行列」(scale) • 「傾斜のための行列」(skew)
  26. 26. 課題② 回転行列を実装する 問題:座標(5,10)を原点を中心に 45 度(1/4π)回 転させた座標をプログラムで求めよ。 回転行列 一度連立方程式にするとプログラム化しやすいよ! cosθ −sinθ sinθ cosθ ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ ′P = cosθ −sinθ sinθ cosθ ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ 5 10 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟
  27. 27. 課題② 回転行列を実装する 問題:座標(5,10)を原点を中心に 45 度(1/4π)回 転させた座標をプログラムで求めよ。 回転行列 cosθ −sinθ sinθ cosθ ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ ′P = cosθ −sinθ sinθ cosθ ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ 5 10 ⎛ ⎝ ⎜ ⎞ ⎠ ⎟ = cosθ ×5−sinθ ×10 sinθ ×5+cosθ ×10 http://goo.gl/k0nRq2
  28. 28. 課題②  回転行列でアニメーション どの座標・角度でも求められるように、課題②のアル ゴリズムを関数化し、角度を増やしていくと回転する ようなアニメーションを作成してください。 http://goo.gl/ZXZxNk
  29. 29. まとめ 数学式が読めるようになればいろんな論文がジェネレ イティブ表現で活用できるようになって捗るよ! 数学楽しいよ!
  30. 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

×