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

新春2016スペシャル

たかはしのぶひろ

第一回クリエイティブコーディング勉強会「ベクトル」成果物

第二回クリエイティブコーディング勉強会「力」成果物

グループ展「Reflection」出展作品演出

グループ展「unframe 003」出展作品『Re-n-da-n』

クリエイティブコーディングで数学？

• パーティクルを自由に飛ばしたい→速度の計算、ベクトル、移動量計算

• 色を自由に変化させたい→周期角度の計算、濃淡の連続的変化

• 大量のオブジェクトにダンスしてもらいたい→時間制御（タイムラプス）、高度な変形計算

• ジェネレイティブアートを作りたい→数学アルゴリズムの理解

目標

① 三角関数と行列で表現に活用できる部分を知る

• 全部は知らんでも何とかなるわよ

② 数学式→JavaScript へ移植できるようになる

• 画像、音声処理の wikipedia や論文が活用できるようになりますぞ

一部意訳があります正確性は他の文献を参考にしてね

アジェンダ

① 関数とは (2m)

② 三角関数とは (5m)

③ 三角関数を使ったコーディング体験(10m)

④ 行列とは (5m)

⑤ 行列を実装するコーディング体験 (10m)

⑥ 自由にコーディング (20m)

⑦ 発表 (5m)

「関数」とは

• 処理のまとめ

• パラメータ（引数）を渡して、返り値を返してくれる（こともある）

「関数」とは

• 処理のまとめ

• パラメータ（引数）を渡して、返り値を返してくれる（こともある）

数学も同様！

三角関数（数学I）

「三角関数」とは

① 角度を引数に渡すと、-1 から 1 の値を返す関数

② 返してくれる値はランダムではなく 角度と関係性がある

「三角関数」とは

① 角度を引数に渡すと、-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

青：sin　赤：cos

http://goo.gl/bMdGjl

課題①　sin cos を使って何か作る

制約

• Math.sin() Math.cos() を使う

例

• 光が明滅するアニメーション

• http://goo.gl/q1xRzH

• sin cos を使って描かれる図

• Math.PI 使ってもいいかも

alpha= sin(count)

x = cos(count)×10y = sin(count)×10

⎧⎨⎪

⎩⎪

おまけ：アークタンジェント atan

アーク～は値から角度を求める逆関数

• Math.atan2 (y: 1, x: 1) → 1/4π (45°)

蛇足：Math.atan と Math.atan2

tan は 180° 単位で値が循環するatan も 180° 単位で値を返すatan2 は 360 ° がわかるよう、よしなにやってくれる

• Math.tan(45°) → 1

• Math.tan(225°) → 1

行列（数学C）

「行列」とは

• 複数の数を行と列で保持する数列

3 5( ) 1 00 1

⎛

⎝⎜⎞

⎠⎟a11 … a1n! " !am1 # a

mn

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

「行列」とは

• 複数の数を行と列で保持する数列

• 表現では行列同士の計算まで理解があるといい感じ

3 5( ) 1 00 1

⎛

⎝⎜⎞

⎠⎟a11 … a1n! " !am1 # a

mn

⎛

⎝

⎜⎜⎜⎜

⎞

⎠

⎟⎟⎟⎟

行列の計算：合体（concat）

M = 1 23 4

⎛

⎝⎜⎞

⎠⎟5 67 8

⎛

⎝⎜⎞

⎠⎟

行列の計算：合体（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