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