スポンサーサイト

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

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

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で水面ぽい画像表示にエントリしました。
スポンサーサイト

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

2007.03.10 | | Comments(5) | Trackback(0) | Flash/ActionScript

コメント

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2009-02-11 水 12:08:40 | | # [ 編集]

Re: 質問

特に許可とかは必要ないデス。
ご自由に使用してクダサイ。

2009-02-11 水 19:41:19 | URL | HundredthMonkey #- [ 編集]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2009-02-12 木 09:12:08 | | # [ 編集]

承認待ちコメント

このコメントは管理者の承認待ちです

2010-03-16 火 13:02:05 | | # [ 編集]

承認待ちコメント

このコメントは管理者の承認待ちです

2010-03-20 土 16:49:44 | | # [ 編集]

コメントの投稿


秘密にする

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

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

ブログ内検索


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