SVG
illustrator
vvvv
vvvvDay 25

[vvvv] Illustratorのパスを使って射影変換(ホモグラフィ)してみる

はじめに

この記事はvvvv Advent Calendar25日目の記事です。

目標

Illustratorで引いたパスを使ってvvvvで射影変換してみます。

射影変換とは

ある平面を別の平面に射影することができる変換です。斜めから見たものを、正面から見たらどうなるかを計算できます。
vvvvにはデフォルトでHomography (Transform 2d)というノードがあるので、とても簡単にできますが、複数のQuadに対して計算を行いたい時にとても面倒なのでIllustratorで複数パスのレイヤーを制作してvvvv上で読み込み変換をかけてみました。

・IllustratorからSVGへの書き出し

01.png
↑Illustratorで四角形をパスで書く
  
  
02.png
↑別名保存からSVG形式で保存する
  
  
03.png
↑保存したsvgをテキストエディタで開くとxml形式で各点の座標が確認できる

・SVGをvvvvに読み込む

04.png
↑Reader(SVG)→GetElements(SVG)でIllustratorで書いたパスのレイヤー構造が確認できる
レイヤーによって中のテクスチャ等を分岐させたい場合は、IllustratorでSVGに書き出す時にレイヤー構造を整理していた方が良いかと
  
  
05.png
↑GetSlice(Node)でIDを指定してGetPath(SVG)につなぐと各点の座標をvvvv上で確認できる
  
  
06.gif
↑vvvv上の座標はIllustratorでかいたパスの座標になっているのでMap(Value)ノードを使って4点の座標をそれぞれvvvv上の座標に変換してあげて、Homographyノードを挟んでTransformにいれてあげれば完了です。
ちなみにQuadが表示されない場合もあるのでその場合はRasterizerノードをかまして下さい。
テクスチャを貼った時、Illustratorのパスの書き方によって回転して表示されるので注意が必要です。

最後に

vvvv Advent Calendar 2017お疲れ様でした!
良いお年を!
  
  
足りない点あればご指摘お願いします!