[iOS 7] 追加された画像フィルタ郡 (3) 様々な多次元項回旋

2013.09.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

iOS7で追加されたフィルタのうち、多次元項によるフィルタ機能が強化されています。
今回は、様々な多次元項によるフィルタを検証していきます。

なお、例によって、使用するオリジナル画像はこちら。

original

CIConvolution3X3

 縦3,横3の行列から補正するフィルタです。中心の画素から、周りを利用した補正に使用します。
なお、自位置の左上が(0,0)位置から(0,1)(0,2)(1,1)...(2,2)の9個の数字が必要です。

ソースは以下のようになります。

/* ファイルを読み込む */
CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"original.jpg"]];

/* フィルタを読み込む */
CIFilter *ciFilter = [CIFilter filterWithName:@"CIConvolution3X3" keysAndValues:kCIInputImageKey, ciImage, nil];

/* オプション */
CGFloat cgf[9] = {0,0,0,0,0.5,0,0,0,0};
[ciFilter setValue:
     [CIVector vectorWithValues:cgf count:9] forKey:@"inputWeights"];
[ciFilter setValue:
     [NSNumber numberWithFloat:0.0] forKey:@"inputBias"];

/* フィルタした内容を画面に表示する */
CIContext *ciContext = [CIContext contextWithOptions:nil];
CGImageRef cgimg = [ciContext createCGImage:[ciFilter outputImage] fromRect:[[ciFilter outputImage] extent]];
_mainImage.image = [UIImage imageWithCGImage:cgimg scale:1.0f orientation:UIImageOrientationUp];
CGImageRelease(cgimg);

[0 0 0
 0 0.5 0
 0 0 0]
この配置での補正をかけると次のような画像になります。

3x3_0.5

これを、次のような行列にしてみます。
[0 -2 0
 -2 9 -2
 0 -2 0]
すると、次のようになります。

3x3_292

CIConvolution5X5

先ほどの3x3を更に範囲を広げた形のフィルタになります。
ソースコードは次のとおりです。

/* ファイルを読み込む */
CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"original.jpg"]];

/* フィルタを読み込む */
CIFilter *ciFilter = [CIFilter filterWithName:@"CIConvolution5X5" keysAndValues:kCIInputImageKey, ciImage, nil];

/* オプション */
CGFloat cgf[25] = 
{0.5,0,0,0,0,
0,0,0,0,0,
0,0,0,0,0,
0,0,0,0,0,
0,0,0,0,0.5};

[ciFilter setValue:[CIVector vectorWithValues:cgf count:25] forKey:@"inputWeights"];
[ciFilter setValue:[NSNumber numberWithFloat:0.0] forKey:@"inputBias"];

/* フィルタした内容を画面に表示する */
CIContext *ciContext = [CIContext contextWithOptions:nil];
CGImageRef cgimg = [ciContext createCGImage:[ciFilter outputImage] fromRect:[[ciFilter outputImage] extent]];
_mainImage.image = [UIImage imageWithCGImage:cgimg scale:1.0f orientation:UIImageOrientationUp];
CGImageRelease(cgimg);

これを実行すると、以下の様な画像になります。

5x5_0.5

なお、先ほどの3x3の最後と似たようなことを5x5でやると以下のようになります。

5x5_292

CIConvolution9Horizontal

 これまでは、平行方向と垂直方向のスクエア型での補正を行ってきましたが、補正方向を限定する代わりに、範囲を増やす方法での補正を行います。
水平方向に、これまでは+-1(Convolution3X3),+-2(Convolution5X5),+-3(Convolution7X7)での補正でしたが、それをさらに拡張する+-4の範囲となります。

/* ファイルを読み込む */
CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"original.jpg"]];

/* フィルタを読み込む */
CIFilter *ciFilter = [CIFilter filterWithName:@"CIConvolution9Horizontal" keysAndValues:kCIInputImageKey, ciImage, nil];

/* オプション */
CGFloat cgf[9] = {1,-1,1,0,1,0,-1,1,-1};
[ciFilter setValue:[CIVector vectorWithValues:cgf count:9] forKey:@"inputWeights"];
[ciFilter setValue:[NSNumber numberWithFloat:0.0] forKey:@"inputBias"];

/* フィルタした内容を画面に表示する */
CIContext *ciContext = [CIContext contextWithOptions:nil];
CGImageRef cgimg = [ciContext createCGImage:[ciFilter outputImage] fromRect:[[ciFilter outputImage] extent]];
_mainImage.image = [UIImage imageWithCGImage:cgimg scale:1.0f orientation:UIImageOrientationUp];
CGImageRelease(cgimg);

上記のプログラムを使って補正した画像が下記のようになります。
左右にぶれたような絵の印象になります。

 9Horizontal-1

CIConvolution9Vertical

先ほどの水平方向を、垂直方向で補正するためのフィルタです。+-4までの範囲での補正ができます。

/* ファイルを読み込む */
CIImage *ciImage = [[CIImage alloc] initWithImage:[UIImage imageNamed:@"original.jpg"]];

/* フィルタを読み込む */
CIFilter *ciFilter = [CIFilter filterWithName:@"CIConvolution9Vertical" keysAndValues:kCIInputImageKey, ciImage, nil];

/* オプション */
CGFloat cgf[9] = {1,-1,1,0,1,0,-1,1,-1};
[ciFilter setValue:[CIVector vectorWithValues:cgf count:9] forKey:@"inputWeights"];
[ciFilter setValue:[NSNumber numberWithFloat:0.0] forKey:@"inputBias"];

/* フィルタした内容を画面に表示する */
CIContext *ciContext = [CIContext contextWithOptions:nil];
CGImageRef cgimg = [ciContext createCGImage:[ciFilter outputImage] fromRect:[[ciFilter outputImage] extent]];
_mainImage.image = [UIImage imageWithCGImage:cgimg scale:1.0f orientation:UIImageOrientationUp];
CGImageRelease(cgimg);

CIConvolution9Horizontalで使ったパラメータを、そっくりそのまま使った形でどのような補正が入るかという例です。
縦方向にぶれたような絵が作れます。

9Vertical-1

パラメータに関して、今回は深く追求しませんでしたが、いろいろなパラメータでやってみると面白い絵が作れるかもしれませんね。