!affineで遊ぼう
{{link /projects/perfume/inside inside}} で紹介したaffineクラスの理解を深めるために、ちょっと使って遊んでみよう。

http://inajob.dip.jp/perfume/perfume.html を開いてもらって、 Chromeとかfirefox(firebug)の「コンソール」的な所で遊んでみよう。
!!キホン
>> code javascript
> a = new Affine()
=> Affine
> a.calc()
=> [0, 0, 0, 1]
<<
これがまずキホン。 ただ単に作って、今の状態を出力しています。
[0,0,0,1]ってのは いまの基準点が (0,0,0)ってことを表しています（最後の要素「1」ってのはおまけです 使わないです）

!!移動
>> code javascript
> a.shift(1,0,0)
=> undefined
> a.calc()
=> [1, 0, 0, 1]
<<
移動してみよう。 shiftの返り値がundefinedなのは何もreturnしてないからなので気にしない。
shiftすると内部で移動されます。
本当にしてる？ ってことでcalcを呼び出しています。
基準点は(1,0,0) 確かに移動してるね。 (↑にも書いたけど最後の1はおまけです)

!!回転
回転

>> code javascript
> a = new Affine()
=> Affine
> a.rotateY(45) //Y軸中心で 45度回す
=> undefined
> a.shift(1,0,0) // 今の（回した後の座標系で）(1,0,0)移動する
=> undefined
> a.calc()
=> [0.7071067811865476, 0, -0.7071067811865475, 1]
<<

引数がdegree（度）なのに注意して…。

Y軸に45度回してからその回した後の座標で(1,0,0)移動します。
calcで値を調べてみると
(0.7, 0, -0.7)
まぁそんな感じか (しつこいようですが calcの結果の最後の1はおまけです)

回転は各軸にあるけど まぁY軸だけ説明すれば大丈夫だよね!!

さて、perfumeのはなしに戻りましょう → {{link /projects/perfume/inside inside}}