selflearn @ ウィキ

Alpha Compositing - Part II-3

最終更新：2009年06月03日 10:16

selflearn

- view

メンバー限定登録/ログイン

Alpha Compositing - Part II (3)

開始日	2007年03月24日
最終更新日	2009年06月03日

はじめに

Alpha Compositing - Part Iで説明した方法を応用し、Web2.0的な画像を作成する方法について説明・使い方を記しています。
全4ページのうち、ここは3ページ目です。

原著

「Alpha Compositing - Part II - Page3」
http://rmagick.rubyforge.org/web2/web2-3.html

注意

もともと個人利用を目的として日本語化したために、けっこう意訳している部分があります。「意味分からないよ」とか「おかしいんじゃない？」とかいうのがあれば、オリジナルを参照するか、コメントで質問してください（がんばって調べます）。

更新履歴

2008/3/24 作成開始
2008/3/26 いったん作成完了。でも変なところが多いから、今後も直す。

訳文

← Page 2に戻る

影(Shadows)

星形マークを追加する前に、ロゴの後ろに少し影を付け、そしてマークを追加するに十分なサイズに画像範囲を拡げておこう。影を追加するのは簡単だ。ロゴよりも少し大きい長方形を作って、そいつをボカすだけなんだ。ぼやけた長方形の上にロゴを合成すれば、まるで影が付いたように見える。

ボカすと、長方形は上下左右にそれぞれ5ピクセル程度大きくなる。だから、灰色の四角を10ピクセル大きくした背景の中央に描いてから、それをblur_imageメソッドでボカすんだ。

shadow = Image.new(background.columns+10, background.rows+10)
 
gc = Draw.new
gc.fill "gray30"
gc.rectangle 5, 5, background.columns+5, background.rows+5
gc.draw(shadow)
shadow = shadow.blur_image(0, 2)

影そのものはこんな感じだ。

imageプラグインエラー : 画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

この影をロゴと合成する。

shadowed_background = shadow.composite(background, CenterGravity, OverCompositeOp)

さあ、これが影を付けたロゴだよ。

imageプラグインエラー : 画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

背景の拡大(A larger background)

さて。今度は星形マークを貼付けるために、大きな白い画像を作り、ロゴをその上に合成するんだ。OverCompositeOpのcompositeメソッドには引数にNorthGravityを指定してあげ、ロゴを上段に張り付けてほしい。
こうしてバックグラウンド画像を新しく作成する。

big_canvas = Image.new(shadowed_background.columns, HEIGHT*5)
big_background = big_canvas.composite(shadowed_background, NorthGravity, OverCompositeOp)

下の画像には灰色のボーダーを付けておいたから、新しいバックグラウンドのサイズを確認できるはずだ。

imageプラグインエラー : 画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

星形マークの影(The starburst's shadow)

星形のマークを作るには、これまで説明してきたのと同じテクニックを使うよ。アルファコンポジット、マスク画像によるマスキング、そしてアノテーション。さて実際に始める前に、君の理解を深めるためにも、これから何をするかを先に説明しておくよ。その方が分かりやすくていいだろう？
星型の図形は25個の角を持ち、黄色→緑色のグラデーションになっている。そして"Ruby + Magick"というテキストが星形の中に収められる。また、星形図形は僅かに影を持っていて、その影と星は時計回りに20°傾いている、というわけだ。

さあ白い背景に黒いバージョンの星形マークを作り始めよう。-20°回転させて、これをこの後作る2画像のスタートポイントにするからね。

black_star = Image.new(170,170)
black_star.star(25, 60, 80, 'none', 'black')
black_star.rotate!(-20)

imageプラグインエラー : 画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

(Imageクラスを探してもstarメソッドなんて無いからね。こいつは私が今回のチュートリアル用に特別作成したんだ。ただこのアルゴリズムは今回のチュートリアルと関係がないから、ここでの説明は避けるよ。だからコードを見たいなら次のページを参照してほしい)

黒い星形マークのコピーを作り、そのフチをボカしてくれ。

star_shadow = black_star.copy.blur_image(3, 2)

imageプラグインエラー : 画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

さて、この影のフチを透明に、中心は不透明にしてマスク画像として使いたい。copy-opacityによる合成を用いれば良いのは分かるだろうけど、実際どういうマスク画像を使えばいいか、分かるかい？しかもフチはボケているから半透明の領域も存在する。
いや、答えは実に簡単なんだ。影のネガを使えばいいだけなんだよ。

shadow_mask = star_shadow.negate

imageプラグインエラー : 画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

思い出してくれ、マスク画像の黒いピクセルは合成先イメージにとって透明を意味していたよね。そして白いピクセルは不透明だった。というわけで、マスクのネガ画像を影のアルファ情報として使おう。

shadow_mask.matte = false
star_shadow.matte = true
star_shadow.composite!(shadow_mask, CenterGravity, CopyOpacityCompositeOp)

これが影を合成した画像の一部(400%に拡大)だ。どの部分が透明〜半透明〜不透明になっているか、一目瞭然だね。

imageプラグインエラー : 画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

星形マーク(The starburst itself)

さて、影はいったん脇に置いておいて、今度は緑の星形マークを作り始めよう。これにはまず緑色のグラデーションを持つ背景を作り、テキスト:"Ruby + Magick"をannotateメソッドで追加する。そして最後にrotateメソッドで-20°回転させるんだ。

grad = GradientFill.new(0, 0, black_star.columns, 0, "#99eb24", "#3c7f05}")
green_grad = Image.new(black_star.columns, black_star.rows, grad)
 
gc = Draw.new
gc.annotate(green_grad, 0, 0, 0, 0, "Ruby\n+\nMagick!") do
    gc.gravity = CenterGravity
    gc.stroke = 'none'
    gc.fill = 'yellow'
    gc.pointsize = 24
    gc.font_weight = BoldWeight
end
green_grad.rotate!(-20)

imageプラグインエラー : 画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

黒い星形の図形を、もう一つのマスク画像を作るために使う。白黒ネガ変換して星の外側が黒、内側が白になるようにするよ。

inverse_black_star = black_star.negate

このマスク画像をcopy-opacity方法による合成の元画像として使う。これによって、四角は星形に切り抜かれる。星形図形の内部は不透明になり、図形外部は透明になるからだね。

inverse_black_star.matte = false
green_grad.matte = true
green_star = green_grad.composite(inverse_black_star, CenterGravity, CopyOpacityCompositeOp)

さっきの影を緑の星形と合成する。(注：ここは末尾の追記を参照してくれ)

shadowed_green_star = star_shadow.composite(green_star, CenterGravity, OverCompositeOp)

緑の星に影を付ける前後のイメージを以下に載せておこう。薄青の背景は透明であることを示しているよ。

影無し	影有り
#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。	#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

さてここで、「どうして画像を回転させてから、透明度を追加したんだ？」って疑問に思ったんじゃないだろうか。
答えは簡単で、rotateメソッドによる画像は完全に不透明になってしまうからなんだ。つまり、もし透明度を付けた後で回転させてしまうと、これまでせっかく追加してもらった透明度情報が全て失われてしまう、というわけだ。

最終イメージ(The final result)

そしてそして遂に、背景画像の特定の場所(私は(x,y)=(400,0)を選んだ)に星形マークを合成する。

result = big_background.composite(shadowed_green_star, 400, 0, OverCompositeOp)

imageプラグインエラー : 画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

まとめ(Summary)

このチュートリアルでは君にRMagickの役立つメソッドだけでnice-lookingな効果を作り出す方法を紹介できたとおもう。もっとも役立つテクニックはcopy-opacityによる合成方法で、こいつで画像の透明部分を作り出せることだ。また、annotateメソッドはテキストを追加するにはとても簡単で、万能なメソッドだったね。
We covered using blur_image for shadows and negate for masks. rotateやappendもまた、RMagickツールボックスの便利な1つだ。

なお、このチュートリアルを通して作ったプログラムの全体はココに置いておいた。もしこのページで作ったImage#starだけを見たいなら、次のページを見てくれ。

追記： Glenn Rempeが、RMagickが1.10.1以前を使用している場合ここで使うcompositeがバグを引き起こすと教えてくれた。WindowsでのRMagick 1.9.2でも出るらしい。だから、もしこれらの古いバージョンを使用しているなら、次のコードを追加してくれ。[go back]

# Add this line if you're using RMagick < 1.10.1
green_star.crop!(CenterGravity, star_shadow.columns, star_shadow.rows)
shadowed_green_star = star_shadow.composite(green_star, CenterGravity, OverCompositeOp)

Tim - June 18, 2006

→ Page 4: Image#star