Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
  • Soyez le premier à commenter

クリエイティブコーディングのための数学 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

    Soyez le premier à commenter

    Identifiez-vous pour voir les commentaires

  • masami_matsuda

    Apr. 18, 2016
  • nupee

    Apr. 18, 2016
  • DavidRojas52

    Apr. 18, 2016
  • hirumakazuya

    Apr. 18, 2016
  • takoba_

    Apr. 18, 2016
  • nemurin

    Apr. 18, 2016
  • YuKodama

    Apr. 18, 2016
  • moviito

    Apr. 19, 2016
  • taikomatsu

    Apr. 19, 2016
  • kyamane13

    Apr. 19, 2016
  • HirokiIzumi

    Apr. 22, 2016
  • sennakty

    Apr. 23, 2016
  • takaoumehara

    Apr. 25, 2016
  • yoskhdia

    Apr. 25, 2016
  • satoshiimanishi58

    Apr. 28, 2016
  • yuukiebihara79

    Apr. 30, 2016
  • silvermonad

    May. 4, 2016
  • NobuhikoAsada

    May. 6, 2016
  • teshigawara

    Jul. 30, 2016
  • AtsushiKitamura1

    Feb. 1, 2017

三角関数と行列

Vues

Nombre de vues

19 101

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

664

Actions

Téléchargements

40

Partages

0

Commentaires

0

Mentions J'aime

57

×