画像をぼかす。。とは？3

ということで、【キレイにボカす】ということで、ガウス消去ガウスぼかしをいってみましょう。

まず、これ↓がガウス分布というやつです。

どうやってつくったかっていうと、

double ar = 1.0; // 1.0  2.0  2.8

for(int a = 0;a<100;a++){

    double aa = (double)a / 10.0;

    double gausu = exp( - (double)aa * aa / (2.0 * ar * ar ) );

    printf("gausu:%.6f\n",gausu);

}

こんなことを書いて、テキストファイルにリダイレクトして、openOfficeの表計算に貼って、

グラフ化して、でもこれだとグラフは右半分だけだから、

グラフィック系S/Wで対象な図形にしたわけです。

これがどう関係するかということですが、

前回は、上下左右のピクセルの色をとってきて、それを平均化することで、

ぼかしてたわけです。

これを、上下左右を**ピクセルづつとってきたときに、

遠い方のピクセルの影響度を少なくしようという方法です。

上の分布のように、中心を100％として、中心のピクセルの影響度を100％としたときの、

周囲のピクセルの影響度を減らしていくのです。

この場合も、前回と同様に、Ｘ方向にガウスぼかしをしたあと、

Ｙ方向にガウスぼかしをすることによって、

上下左右を一度にぼかした結果と等価になるのです。

なぜかはここでは問題ではないのです。

ということで、やってみると、、、

やっぱりキレイにボケてます。
ちなみに前回のガウスぼかしじゃないやつ↓

ただし、欠点もないわけではなく、同じようなボケ精度（どのくらい判別できないか）
という点で考えると、ガウスぼかしの方が範囲を広くとらないと、
シャープになってしまいます。
よって範囲を広く取ると計算量が増えるわけですね。
もちろん、部分的に使うという使い方もできるので、
そうすれば計算量はたいして増えませんよね。

まぁでも、用途によってそこらへんは使い分ければいいわけなので、
この話はこのくらいで。

ちなみに、逆ガウスぼかしをしてみたところ、、
（※離れるほど重みを増やす）

そもそも何をやってるかわからなっちゃいましたね
↓↓↓↓↓

画像をぼかす。。とは？２

前回はモノクロだったので、カラーに適用するとこうなりますよ、、的な話。

もちろん、平均はR,G,Bと別々に平均をとりますよ。

αチャンネルはどうしましょうかね。まぁとりあえずは元のままでいいでしょう。

（平均を取らずにもとのピクセルのα値をそのまま使用する）

但し、正しくはというか、画像の合成という話題になったりすると、

αチャンネルをもつ画像同士の合成なんかを考えなきゃならないので、

そのとき考えましょう。

このへんのことは、正しく処理されていないS/Wをときどき見かけますんで、

っていうか、自分でも何度もバグを出しましたけどね^^;^^;^^^;

ってことで、あとはサンプルの画像のみで。

↑これがガウスぼかし（半径15）

カラーですると、単純に前後左右で矩形で平均をとったものと

歴然の差がでますね。^^;^^;^^;

なんか、、【キレイにボケてる】感があります。

うん。しょうがない。次回はガウスぼかしだな＾＾；＾＾；

画像をぼかす。。とは？

画像をぼかす。。って、ちょこちょこ書いてたわけですが、

技術的には、非常に簡単な考え方です。

下図の黒い部分がドット（ピクセル）だとすると、

その周辺を含めた平均を出し、その値に変換してしまうのです。

要するに、赤いピクセルに着目し（下図の■）、

その周辺、たとえば前後左右を１ピクセルずつ考慮すると、

９ピクセルの矩形が考えられます（下図の□）。

これの平均を出して、変換後のピクセルの色にしてしまうだけです。

この画像を前後左右１ピクセルを考慮すると、

↓

こうなります。

どうようにして、こんな画像を用意して、

影響範囲を前後左右１ピクセルの3*3=9ドットの平均すると

↓ 

影響範囲を前後左右２ピクセルの5*5=25ドットの平均すると

↓  

影響範囲を前後左右３ピクセルの7*7=49ドットの平均すると

↓  

影響範囲を前後左右4ピクセルの9*9＝81ドットの平均すると

↓   

影響範囲を前後左右7ピクセルの15*15＝225ドットの平均すると

↓    

影響範囲を前後左右15ピクセルの31*31＝961ドットの平均すると

↓   

っとこれでわかるように、演算量は、２乗に比例するような気もするのですが、

実は、タテと横を別々に行っており、最初にヨコでぼかした画像を生成し、

それをさらにタテにぼかして画像を生成します。

よって、計算量は、２乗ではなく、２Nですかね。。

間単に、【平均】なんて書いてしまいましたけど、平均のとりかたに、

重みをつけたりすると、微妙に結果がかわります。

そこらへんは、、、まぁ、いろいろ調べてみましょう^^;^^;

その中のひとつに、【ガウスぼかし】なるものがあります。

まぁたいしたものでもないのですが、たまにはSRCを乗せると。。
二重のLOOPを２回まわしてるだけですね。^^;

int minusv = (haba - 1) / 2;
    for(int yy = 0;yy<hh;yy++){
        for(int xx = 0;xx<ww;xx++){
            for(int z=0;z<haba;z++){
                int idxx = xx + z - minusv;
                int idxy = yy;// + z - 2;
                if(getPixelIndex(G,idxx,idxy)){
                    uc[z] = G.GetPixelsDirect3(idxx,idxy);
                }
            }
            unsigned int ucc = getBock5(uc,haba);
            GO.SetPixels32(xx,yy,ucc);
        }
    }
    for(int yy = 0;yy<hh;yy++){
        for(int xx = 0;xx<ww;xx++){
            for(int z=0;z<haba;z++){
                int idxx = xx;// + z - 2;
                int idxy = yy + z - minusv;
                if(getPixelIndex(GO,idxx,idxy)){
                    uc[z] = GO.GetPixelsDirect3(idxx,idxy);
                }
            }
            unsigned int ucc = getBock5(uc,haba);
            G.SetPixels32(xx,yy,ucc);
        }
    }

【αちゃんねる】な件。３

さて今回は前回のつづきで、グレースケール画像のふちどりです。

これは、こういうことをしたいからですね。

(※画像がちょっとキタナイのは圧縮の高いJPEGだから^^;)

↓

これも、もと画像から作成することができます。

元画像

↓

まず、元画像をボカします。

ここでは、ガウスぼかしをしました。

それがこれ

↓

そうしたらこの画像の中の白でない部分を黒に変換します。

拡大してみると（下図）、入り組んだところは、こういう風になってるので、

この白に近いグレーも黒にします。

おどろくなかれ、白でない部分ってこんなにあるんですね。

↓

しかし、白でない部分を黒にしたってことは、白と黒の２値、

即ち、#000000と#ffffffの２つだけなので、ギザギザになってしまいますね。

よってこれをさらにガウスぼかしします

↓

そうこれを前回やった、グレースケールをαチャンネルに置き換え、

さらに白に乗せ、それを黒い画像に置くと、こうなります。

↓

最後に、赤を乗せた葵の御紋をのせれば、

完成ですね。

↓

で、千社札っぽくしてみます。

そんでもって、前回のと比べてみましょう。。

ぜんぜんイイっすね。ふちどりした方が。。^^;

ということで、、

【結論。】

【モノクロのグレースケール画像さえ準備すれば、

それに色をつけたり、ふちどりしたりしたパーツとして、

貼りこむことが可能である】

でもどうやって？という話はまた今度。

【αちゃんねる】な件。２

さて、αちゃんねるは、透過を256階調で指定できるので、

バックとなじませるようなときには効果的である。

しかし、その他の用途をここでは考える。

具体的には、２値のTIFFに色をのせるかのごとく、

デザインがモノクログレースケールでできていれば、

そこに色を乗せることが可能である。

千社札に家紋が入っていたりするものがある。

こんなの↓

ここで、家紋の部分は、フチ部分（白いところ）は別にして、モノクロの１色なので、

モノクロ部分をグレー階調とし、これに色を乗せることができる。

そうすれば、家紋の部分を自由に色をつけることができる。

そうすれば、αチャンネルをつかっているので、

背景の色に関係なく、自然と背景になじむように画像を合成できる。

っと、何を書いてるかよくわからないので、サンプル。

まず、モノクロで画像を用意しますね。

水戸黄門で。葵で。

これは、モノクロのPNGです。このグレー成分を抜き出し、赤を乗せたPNGにしてみます。

左が元画像。中央が、モノクロのグレースケールをαチャンネルに置き換えたあと、

RGB成分を赤（#FF0000）におきかえた画像。

右が、モノクロのグレースケールをαチャンネルに置き換えるときに反転させたもの。

白地で。 

青地で。 

緑地で。 

もちろん、透過属性だから、画像の上にも置けますね。

まぁ、それがやりたかったわけだけど。

そうすると、、こうなります。

↓

で、最終的には、今回やりたかったのは、これ。

↓

ちなみに、家紋にはライセンスはありません^^;^^;

【αちゃんねる】な件。

画像ファイルに、αちゃんねるなるものがある。

残念ながら、αちゃんねるを自由に操れるグラフィック系S/Wはみたことがない。

こんなRGB画像と、

こんなモノクログレースケール画像を組み合わせると

こんな画像になる。

※αちゃんねるを自由に操れるS/Wのイメージは、上の３つの画像が３つとも表示されて、

どの画像でも編集作業ができるようなものをイメージしている。

そういうものが無いよね。いやむしろあったら教えて！！

さて、αチャンネルは【透過】といえば透過なのだが、

透過が256階調になっている。

よくかたまにかは微妙だが、αチャンネルのグレースケールではなく、

透過色を指定した画像を貼ってあったりサイトをみかける。

バックが白だと、こんな感じでわからないが、↓

（左がαチャンネル付PNG、右が白を透過色にしたGIF） 

バックが赤だと、こんな風になる

↓ 

黄色だとこうだよね

↓ 

そう、αちゃんねるは、もっと一般的になってもよさそうなのだが、

一般ユースとしては浸透しているとは言い難い。

---

つづく。

千社札を組版する（２）

まぁこんなのがありました。なんか、技術的にはイラレを駆使したみたいな^^;感じですね。
技術的には難しくありませんね。もちろん、多少めんどい（文字をベクトル化して矩形の図形の演算をするとか）方法もありますけど、ここでは簡単な方法にしてみます。

見やすく黒にしてみると、
って感じです。どうやるかというと、まず、
これをかいて、文字をのせて、
こうなるので、こんどは、文字を描くエリアをマスク（赤い矩形）。
白だとみにくいので、黄土色にして、こんな文字を準備して、
そんでもって乗せるとこう。
黄土色を白でやれば、、本来は、、
こうなります。
で、黒のとこは最初から赤で描けば、
こうなりますね。
だからといって、、、
こんなことやりたいってことになると、、まぁすでに画像が存在しているので、画像処理をかけたほうがラクだから、
をアルファチャンネル化して、絵にのせたほうがぜんぜんラクですね。