ホーム > > Image – Gradient パッチ

Image – Gradient パッチ

  • 2011年2月17日 9:45 AM

イメージカテゴリ、グラディエントの解説です。
Gaussian Gradient, Linear Gradient, Radial Gradient パッチです。
Color 1 からColor 2へのグラデーションを出力します。

ここにgrgrid とあるのは、後で使用する イメージパッチです。(400x300pxで 50pxの格子パターン)

これらのパッチが出力するImage は Infinite なので、Crop が必要です。(→Infinite Image についてはこちらを参照)


Gaussian Gradient (ガウス状グラデーション)


Linear Gradient (線形グラデーション)


Radial Gradient (放射状グラデーション)

Color に透明色を設定することもできます。(Gaussian Gradientは デフォルトでColor 2 が透明)

Linear Gradient の Input Parameter で Color 2 を透明にします。

Billboard の Blending をOver にします。Dimensions Mode は Real Size にしています。

白から透明になるグラデーションで、下の画像が見えるようになりました。
ところで、パラメータのPoint 1, Point 2, Center はどんな値でしょうか?
格子画像は50px 毎になっているので、パラメータを変えながら見てみましょう。


Center (X) :150, Center (Y):150


Center (X) :300, Center (Y):200

これはQuartz Composer のUnit 座標系とは異なる、Quartz ネイティブの座標系です。
厳密 ではありませんが、ここでは左下が(0,0) で、ピクセル単位と考えてよいでしょう。
「左下」はWindow の左下ではなく、この場合はBillboard の左下になります。

Billboard が RealSize でないとき(ウィンドウサイズによって拡大・縮小されるとき)は、このようになります。

この値をUnit 座標系に変換するとすれば、
原点 X (Unit) = Billboard X Position – (Billboard Width /2)
原点 Y (Unit) = Billboard Y Position – (Billboard Hight /2)
Center X (Unit)= 原点 X [Unit] + (Center X [px] / Image Pixel Width[px]) * Billboard Width [Unit]
Center Y (Unit) = 原点 Y [Unit] + (Center Y [px] / Image Pixel Height[px]) * Billboard Height [Unit]

となります。

コメント:0

コメントフォーム
入力した情報を記憶する

トラックバック:0

この記事のトラックバック URL
http://wp.djgj.jp/archives/582/trackback
トラックバックの送信元リスト
Image – Gradient パッチ - QCこんなときどーするの? より

ホーム > > Image – Gradient パッチ

検索
フィード
メタ情報

ページの上部に戻る