Illustratorでアフィン変換を試してみよう
今日は少しさむいですね。皆様におかれましてはお風邪など召されぬようご注意頂きたいとおもいますぅ。年末モードに入って暫くなのですが、この季節、何が面倒って「おしゃれな年賀状２〜３案、週末まで！」ってやつです。君みたいなヤツ沢山居るから既に資源枯渇モードに入ってるのだよw例えば、君の様なヤツが10人居たとしよう。わたしは週末までに20点の小洒落た年賀状の校正を用意し、その半分はボツになる事確定なのだよwww誰かなんとかしてください。
さて本日の本題です。先日アフィン変換を復習していた時に見つけたページが分かりやすかったので真似してみました。
今回作ったのはAI用Javascriptです。ScriptUI利用でアフィン変換の動作を試してみる事が出来る物です。
アフィン変換とは３×３の行列を利用して図形を変形しちゃう非常に便利かつややこしいものなのです。なんの事か理解して頂けないのは承知で先に進みます。下に示すのはアフィン変換に使われる行列です。
a b u
c d v
tx ty w
こんな感じなのですが、
a：横スケール
b：横スキュー
c：縦スケール
d：縦スキュー
tx：横移動量
ty：縦移動料
u,v,wは0,0,1で固定
と各パラメータの意味合いはこういう風になっています。これらをうまく使うと…
はい、45°回転しました。こんな具合にシアーと変倍の組み合わせで回転を行う事が出来ちゃいます。
皆様におかれましては心ゆくまでパラメータをいじり倒してアフィン変換の感覚を掴んで頂ければ幸いでございます。
最後に、コードはこちら
var $_affine={
win:function(){
var w = new Window (‘dialog’, “affine matrix”, undefined);
var p1 = w.add(‘panel’,undefined,”a”);
p1.size = [100,45];
var tx1 = p1.add(‘edittext’,undefined,’1′,{multiline:false});
tx1.characters = 5;
var p2 = w.add(‘panel’,undefined,”b”);
p2.size = [100,45];
var tx2 = p2.add(‘edittext’,undefined,’0′,{multiline:false});
tx2.characters = 5;
var p3 = w.add(‘panel’,undefined,”c”);
p3.size = [100,45];
var tx3 = p3.add(‘edittext’,undefined,’0′,{multiline:false});
tx3.characters = 5;
var p4 = w.add(‘panel’,undefined,”d”);
p4.size = [100,45];
var tx4 = p4.add(‘edittext’,undefined,’1′,{multiline:false});
tx4.characters = 5;
var cl = w.add(‘button’, undefined, ‘cancel’, {name:’cancel’});
var bt = w.add(‘button’, undefined , ‘apply’, {name:’ok’});
bt.onClick = function (){
$_affine.applyTransform(tx1.text,tx2.text,tx3.text,tx4.text);
}
w.show();
},
applyTransform:function(a,b,c,d){
var tm = new Matrix();
tm.mValueA = Number(a);
tm.mValueB = Number(b);
tm.mValueC = Number(c);
tm.mValueD = Number(d);
tm.mValueTX = 0;
tm.mValueTY = 0;
//alert(tm.mValueA+tm.mValueB+tm.mValueC+tm.mValueD);
app.selection[0].transform(tm,true,true,true,true,1);
app.redraw();
}
}
$_affine.win();
やっている事はアフィン変換用行列を定義し、入力されたパラメータでアフィン変換を行うといった段取りです。ウインドウにcloseメソッドかませてませんのでキャンセルボタンをクリックするまで繰り返し試す事ができます。
数学的な部分の解説は…またの機会にw
