スポンサーサイト

DisplacementMapFilterを使った水面ぽい画像表示

DisplacementMapFilterにパーリンノイズ画像を設定するよくあるサンプルです。

速度と変化量を設定して表示ボタンを押すと、左側にフィルタを適用した画像、右側にフィルタに使用している画像が表示されます。



やってることは、まずパーリンノイズのオクターブ毎に変化スピードを決めといて、フレーム毎にオフセットをそのぶん変化させてパーリンノイズ画像を作って、DisplacementMapFilterにセットするというカンジです。
以下が上記サンプルのActionScriptのソースです。
image_mcというのがフィルタを適用する元画像（ムービークリップ）です。

import flash.display.BitmapData;
import flash.geom.Point;
import flash.geom.Matrix;
import flash.filters.DisplacementMapFilter;

// ノイズ関数の数
var octaveCnt:Number = 3;
// 乱数シード
var rndSeed:Number = Math.floor(Math.random() * 65535);
// マスク画像オフセット
var maskOffsetX:Number = image_mc._width + 10;
var maskOffsetY:Number = 0;
// パーリンノイズのオフセット値の配列
var offsetArray:Array = new Array();
// パーリンノイズの変化量の配列
var speedArray:Array = new Array();

// 変化スピード
var speed:Number;
// ゆがみの拡大率
var scale:Number;

// フィルター画像表示用ムービークリップ
var map_mc:MovieClip;
// パーリンノイズ画像
var perlinNoiseBitmap:BitmapData = new BitmapData(image_mc._width, image_mc._height);

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

// 初期表示
doInit();

// 表示の初期化をします。
function doInit() {
  // 速度と変化量の設定
  speed = Number(speed_txt.text);
  scale = Number(var_txt.text);

  // マップ用ムービークリップの設定
  if (map_mc) {
    map_mc.removeMovieClip();
  }
  map_mc = _root.createEmptyMovieClip("map_mc", _root.getNextHighestDepth());
  map_mc._x = image_mc._x + maskOffsetX;
  map_mc._y = image_mc._y + maskOffsetY;

  // 変化方向の初期化
  initOffsetArray();
}

// オフセット配列を変化速度配列の初期化
function initOffsetArray() {
  // 関数の数だけ必要
  for (var i:Number = 0; i < octaveCnt; i++) {
    offsetArray[i] = new Point(0, 0);
    // 乱数で変化する向きを決定
    speedArray[i] = new Point(speed * (Math.floor(Math.random() * 2) == 0 ? -1 : 1), 
                              speed * (Math.floor(Math.random() * 2) == 0 ? -1 : 1));
  }
}

function onEnterFrame() {
  // オフセット位置の変更
  for (var i:Number = 0; i < octaveCnt; i++) {
    offsetArray[i].x += speedArray[i].x;
    offsetArray[i].y += speedArray[i].y;
  }
  // パーリンノイズ画像生成
  perlinNoiseBitmap.perlinNoise(image_mc._width,
                                image_mc._height,
                                octaveCnt,
                                rndSeed,
                                false,
                                true,
                                1,
                                false,
                                offsetArray);
  // 歪みフィルターを作成
  var filter:DisplacementMapFilter
    = new DisplacementMapFilter(perlinNoiseBitmap,
                                new Point(0, 0),
                                1,
                                1,
                                scale,
                                scale);
  image_mc.filters = [filter];
  // パーリンノイズ表示用ムービークリップに画像をセットアップ
  map_mc.attachBitmap(perlinNoiseBitmap, 1);
}

2007/6/24このエントリのソースコードはFlash8でのものです。
Flash CS3で似たような処理をするものをFlash CS3で水面ぽい画像表示にエントリしました。