【sketch】ストライプ模様

hara

Oct 10, 2009

frocessing

haraです、こんにちは。

今回はsketchネタです。

以前参考にさせてもらったnutsuさんの作品

Draw worm by mouse gesture. - wonderfl build flash online

こちらのFMatrix2Dを使っている処理のところがよくわからないので、にゃあプロジェクトさんのMatrixのページやら、AdobeのMatrixのページやら、FrocessingのDocsのFMatrix2Dのページやらとにらめっこしながら読んでみました。

こちらのコード中で、ラインを描くcc1x〜pp2yはvx,vyのベクトルにより得られたMatrixの移動値tx,tyに傾斜と変形の値c,dを足しています。

var cc1x:Number = -obj.w*obj.vmt.c + obj.vmt.tx;
var cc1y:Number = -obj.w*obj.vmt.d + obj.vmt.ty;
var pp1x:Number = (obj.c1x+cc1x)/2;
var pp1y:Number = (obj.c1y+cc1y)/2;
var cc2x:Number = obj.w*obj.vmt.c + obj.vmt.tx;
var cc2y:Number = obj.w*obj.vmt.d + obj.vmt.ty;
var pp2x:Number = (obj.c2x+cc2x)/2;
var pp2y:Number = (obj.c2y+cc2y)/2;

ここがなぜ足しているのかよくわからなかったもので。
で、なんとなくこうでないか、と思ったのが以下のような感じ。
このポイントにおいて必要なのは、矩形の２辺の角度と長さだけ。なので、xにおいてはMatrixの回転によってどれだけ傾斜がずれたか、yにおいては回転およびスケールによってどれだけ伸び縮みしたかの情報があれば成立するのでcプロパティとdプロパティをそれぞれx,yに加味する、ということ。

試しにc, dの代わりにa, bを入れても大体同じような結果が得られる。ただし、辺の傾きが逆になっている。