DisplacementMapFilterについて





this is flash contents.

flash.filters.DisplacementMapFilter...
こいつを極めるとビットマップ画像の大概の変形はできちゃうみたい...
ひょっとすると国勢調査権なんかより威力ある.

んで,このフィルターなんなの?ってのは3Dソフトなんか使ったことある人だとバンプマッピングとか不透明度の設定で特定のマップ用画像を設定してその明度なんかでその位置にそのエフェクトをかける量なんかを調整したことがあると思う.
このフィルターも同じようにマップ用の画像を引数にとって,その特定のチャンネルをX軸,Y軸に設定してそのチャンネルの彩度によってDisplacement(移動距離)を調整することが出来る.
これを使うと3Dのマッピングのようなことが出来たりしちゃう.

DisplacementMapFilterの使い方はなんとか分かった.
ただ思うような変形ができない.(というかここが肝なんだけどね...)
一方的な変形ならあらかじめ用意したマップ画像でいいのかもしれないけど,変形後のビットマップから元のビットマップの位置なんかを必要とするときは,やっぱりスクリプトで制御しておかないとダメ.

とにもかくにもpsyark.jpのkeyさんの記事をずっと眺めて格闘してます.すげー勉強になります.

download


リンク)
psyark.jp | search DisplacementMapFilter
Flash馬鹿一代ブックマーク | DisplacementMapFilter


サンプルのコード(汚い)

import flash.display.BitmapData;
import flash.filters.DisplacementMapFilter;
import flash.geom.*;


// 画像の初期化
var imageBitmap = BitmapData.loadBitmap('image');
var colorPalletBitmap = BitmapData.loadBitmap('colorPallet');

this.image_mc.attachBitmap(imageBitmap, 1);
this.result_mc.attachBitmap(imageBitmap, 1);
this.colorPallet_mc.attachBitmap(colorPalletBitmap, 1);


// 選択されている色のサイズの設定
var selectedColorW = this.selectedColor_mc._width;
var selectedColorH = this.selectedColor_mc._height;


// 選択されている色を保持(初期は白)
this.selectedColor_mc.setColor = function(color) {
  this.beginFill(color);
  this.lineStyle(0, 0x000000, 0);
  this.moveTo(0, 0);
  this.lineTo(selectedColorW, 0);
  this.lineTo(selectedColorW, selectedColorH);
  this.lineTo(0, selectedColorH);
  this.endFill();
  
  this.selectedColor = color;
};

this.selectedColor_mc.setColor(0xFFFFFF);

// カラーパレットの設定
this.colorPallet_mc.onRelease = function() {
  var selectColor = colorPalletBitmap.getPixel(this._xmouse, this._ymouse);
  
  selectedColor_mc.setColor(selectColor);
};

// リセットボタン
this.resetButton_mc.onRelease = function() {
  mapBitmapX.fillRect(new Rectangle(0, 0, mapBitmapX.width, mapBitmapY.height), 0x888888);
  mapBitmapY.fillRect(new Rectangle(0, 0, mapBitmapY.width, mapBitmapY.height), 0x888888);
  
  upDataResult();
};


// スケールボタン
var scaleListener = new Object();

scaleListener.change = function(event) {
  upDataResult();
};

this.xScale_mc.addEventListener('change', scaleListener);
this.yScale_mc.addEventListener('change', scaleListener);


// マップイメージの初期化
var mapBitmapX = new BitmapData(this.image_mc._width, this.image_mc._height, false, 0x888888);
var mapBitmapY = new BitmapData(this.image_mc._width, this.image_mc._height, false, 0x888888);

this.mapImageX_mc.attachBitmap(mapBitmapX, 1);
this.mapImageY_mc.attachBitmap(mapBitmapY, 1);

var PEN_SIZE = 5; // 描くペンのサイズ
var RESOLUTION = 30; // 解像度

// マップイメージの着色の設定

// map X
this.mapImageX_mc.onPress = function() {
  this.onEnterFrame = function() {
    if (this.prevPoint == null) {
      this.prevPoint = new Point(this._xmouse, this._ymouse);
      return;
    }

    for (var i = 0; i <= RESOLUTION; i++) {
      var targetX = i * ((this._xmouse - this.prevPoint.x) / RESOLUTION) + this.prevPoint.x;
      var targetY = i * ((this._ymouse - this.prevPoint.y) / RESOLUTION) + this.prevPoint.y;

      mapBitmapX.fillRect(new Rectangle(targetX, targetY, PEN_SIZE, PEN_SIZE), selectedColor_mc.selectedColor);
    }

    this.prevPoint = new Point(this._xmouse, this._ymouse);
    upDataResult();
  };
};

this.mapImageX_mc.onRelease = this.mapImageX_mc.onReleaseOutside = function() {
  delete this.prevPoint;
  delete this.onEnterFrame;
};

// map Y
this.mapImageY_mc.onPress = function() {
  this.onEnterFrame = function() {
    if (this.prevPoint == null) {
      this.prevPoint = new Point(this._xmouse, this._ymouse);
      return;
    }

    for (var i = 0; i <= RESOLUTION; i++) {
      var targetX = i * ((this._xmouse - this.prevPoint.x) / RESOLUTION) + this.prevPoint.x;
      var targetY = i * ((this._ymouse - this.prevPoint.y) / RESOLUTION) + this.prevPoint.y;

      mapBitmapY.fillRect(new Rectangle(targetX, targetY, PEN_SIZE, PEN_SIZE), selectedColor_mc.selectedColor);
    }

    this.prevPoint = new Point(this._xmouse, this._ymouse);
    upDataResult();
  };
};

this.mapImageY_mc.onRelease = this.mapImageY_mc.onReleaseOutside = function() {
  delete this.prevPoint;
  delete this.onEnterFrame;
};


var dmXFilter = new DisplacementMapFilter(mapBitmapX, null, 1, 1, 5, 0);
var dmYFilter = new DisplacementMapFilter(mapBitmapY, null, 1, 1, 0, 5);

// X, Y各フィルターを再度割り当て
this.upDataResult = function() {
  dmXFilter.scaleX = xScale_mc.value;
  dmYFilter.scaleY = yScale_mc.value;

  this.result_mc.filters = [dmXFilter, dmYFilter];
};


contributor nao : 2006年03月03日 03:44

trackback

trackback for this entry URL:
http://blog.graffiti-web.org/mt/mt-tb.cgi/396

comment