スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

DisplacementMapFilterで遠近法っぽい変換

前回のDisplacementMapFilterを使った拡大/縮小を改造して、遠近法っぽく画像を変換するようにしてみました。
遠近法っぽくとはいっても透視変換等の3次元の処理はまったくしておらず、各ピクセルのy座標値によって拡大率を変化させてそれっぽくしてるだけデス。




前回は横方向/縦方向の拡大率を入力してマップ画像を生成してましたが、今回は各ピクセルのy座標値に対しての拡大量入力するようにしました。
例によって左側が変換後の画像、右側が変換に使用しているマップ画像デス。
各ピクセルでの拡大率ですが、y軸方向の場合ならy座標値をy、基準点のy座標値をoY(サンプルでは0です)、入力値をsYとしたときの各ピクセルの拡大率を

  (y - oY)sY + 1
として算出しています。
x軸方向も同じようなカンジです。
ソースコードは以下のようなカンジですが、前回のとほとんど同じデス。
import flash.display.BitmapData;
import flash.filters.DisplacementMapFilter;
// 位置、サイズ
var l:Number = test_mc._x;
var t:Number = test_mc._y;
var w:Number = test_mc._width;
var h:Number = test_mc._height;

// 原点
var oX:Number = w / 2;
var oY:Number = 0;

// マスク画像オフセット
var maskOffsetX:Number = w + 10;
var maskOffsetY:Number = 0;

// 表示ボタン
test_btn.onRelease = doTrans;

// マスク画像
var mask_mc:MovieClip;

// スケール調整値
var yAdj:Number = 1;
var xAdj:Number = 1;

// 初期表示
doTrans();

function doTrans() {
// 倍率
var sX:Number = Number(sx_txt.text);
var sY:Number = Number(sy_txt.text);

if (mask_mc) {
mask_mc.removeMovieClip();
}
// マスク画像
var mask:BitmapData = createMask(sX, sY, oX, oY);

// マスク画像表示
var depth:Number = _root.getNextHighestDepth();
mask_mc = _root.createEmptyMovieClip("mask_" + depth, depth);
mask_mc.attachBitmap(mask, 1);
mask_mc._x = l + maskOffsetX;
mask_mc._y = t + maskOffsetY;

// フィルタ設定
var filter:DisplacementMapFilter
= new DisplacementMapFilter(mask,
new Point(),
4,
2,
Math.ceil(256 / xAdj),
Math.ceil(256 / yAdj));
test_mc.filters = [filter];
}


// マスク画像を作成し、戻す。
function createMask(sX:Number, sY:Number, oX:Number, oY:Number)
:BitmapData {
// 差が128以内に収まるように調整値を設定する
var maxY:Number = 0;
var maxX:Number = 0;
for (var y:Number = 0; y < h; y++) {
maxY = Math.max(maxY,
Math.abs(getYC(y, (y - oY) * sY + 1, oY)));
for (var x:Number = 0; x < w; x++) {
maxX = Math.max(maxX,
Math.abs(getXC(x, (y - oY) * sX + 1, oX)));
}
}
yAdj = 128 / (maxY + 1);
xAdj = 128 / (maxX + 1);
// ビットマップ生成
var bitmap:BitmapData = new BitmapData(w, h);
for (var y:Number = 0; y < h; y++) {
// yに対する色の明るさを求める
var yC = Math.floor(getYC(y,
(y - oY) * sY + 1,
oY) * yAdj);
for (var x:Number = 0; x < w; x++) {
// xに対する色の明るさを求める
var xC = Math.floor(getXC(x,
(y - oY) * sX + 1,
oX) * xAdj);
// このピクセルの色を算出
var c:Number = 0xFF000000 +
(0x80 + yC) * 0x100 +
xC + 0x80;
// ピクセルを描画する
bitmap.setPixel(x, y, c);
}
}
return bitmap;
}

// 指定したy座標で用いる色の明るさ(0x80との差)を戻します。
function getYC(y:Number, sY:Number, oY:Number):Number {
return -Math.round((y - oY) * (sY - 1) / sY);
}

// 指定したx座標で用いる色の明るさ(0x80との差)を戻します。
function getXC(x:Number, sX:Number, oX:Number):Number {
return -Math.round((x - oX) * (sX - 1) / sX);
}

2007/7/1このエントリのソースコードはFlash8でのものデス。Flash CS3でこんなようなコトをしてるのはDisplacementMapFilterでパースをつけてみるエントリです。
スポンサーサイト

テーマ:Flash - ジャンル:コンピュータ

2007.03.12 | | Comments(0) | Trackback(1) | Flash/ActionScript

コメント

コメントの投稿


秘密にする

トラックバック

http://100th.blog96.fc2.com/tb.php/3-d2ee7979
この記事にトラックバックする(FC2ブログユーザー)

遠近法について

遠近法 遠近法(えんきんほう)は、主に美術、特に絵画の世界で用いられる技術である。これはルネサンス期のイタリアで確立された。遠近法には一点透視法、二点透視法、三点透視法、六点遠近法、湾曲遠近法、天使遠近法、地上遠近法、空気遠近法などがある。  透視法(透視

2007.03.13 | デザインの杜

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。