Displacement map

[kH_]

blaat

[Tha Narie]

As? :)

[mech7]

gaaf zou je echt coole water effecten mee kunnen maken :D

[kH_]

Yep, AS.

Als je een water effect wil hebben, dan kun je ook een displacement map gebruiken. Dan heb je BIJNA hetzelfde als wat ik heb gemaakt, maar dan moet je eigenlijk twee buffers gebruiken die je per frame omwisselt. De ene gebruik je dan als feedback buffer en de andere als buffer om te laten zien aan de gebruiker.

[Tha Narie]

LOL, ik weet dat het met AS is gedaan.
Ik (en de rest, aangezien het een AS-showcase is), ben benieuwd naar de AS :)

[kH_]

Ow, ok...zal ik vanaaf er even op knallen (als ik het niet vergeet).

Ik kan de stappen alleen wel alvast uitleggen:

- we hebben 2 BitmapData objecten, 1 voor de zwaan en 1 voor de displacement map
- we hebben 1 movieclip om de grafische informatie te tonen aan de gebruiker
- we hebben een BlurFilter om de displacement map wazig te maken
- we hebben een DisplacementMapFilter om de daadwerkelijke displace uit te voeren

Nu maken we eenmalig een BlurFilter aan (new BlurFilter(2,2,1) -> kwaliteit van 1 is genoeg!)
Vervolgens maken we het DisplacementMapFilter aan:
Wat doet dat ding? Nou, niet veel bijzonders. Voor ieder pixeltje in de displacement map doet
het filtertje het volgende:

- Pak de waarde van de R,G of B waarde van de pixel (opgegeven als ComponentX en Y in de
constructor -> B (alleen blauw dus) is 4)
laten we deze waarde even 'offset' noemen
- Pak nu een pixel op dezelfde locatie als waar je een pixel hebt gelezen uit de displacement map
- en wat gaan we nu doen? iets HEEL simpels. We gebruiken de 'offset' waarde om het pixeltje uit het plaatje van de zwaan (in ons voorbeeld dus) gewoon te verplaatsen (displacen) naar een nieuwe locatie. Je mag dit zelf zien als een 'setPixel(x+offset,y+offset)', maar de XScale en YScale parameters in de constructor geven aan in welke mate de offset
voor de X en de Y wordt beinvloedt (als je het graag wilt weten (wat ook nodig is :)) kijk ff in de help. Het is een simpele berekening.
Verder heb je ook nog een 'mode' parameter. Wat doet dat ding? Ach, wanneer een pixel bijvoorbeeld buiten het bereik van je plaatje valt (bijvoorbeeld: je verplaatst een pixel 1 pixel verder dan de breedte van het plaatje), dan wordt op basis van de 'mode' beslist wat we gaan doen met dat pixel.
Dus, pixel uit zwaan wordt weer een stuk of wat pixels verder weer in de zwaan geknalt. Als je dat nu doet met een displacement map met daarin een mooie sinus golf (of wat ik heb gedaan, een mooie smooth firetail), dan krijg je een golvend effect.

Btw....ken je de 'smudge' tool in Photoshop? Daarmee kun je bijvoorbeeld van een foto van jezelf een oor wat naar rechts trekken, ziet er heel leuk uit (vooral anderen vinden het leuk om te zien dat je dan bijvoorbeeld van die dracula oren hebt:)) . Dat kan ook met een displacement map. Dan moet je telkens het resultaat van een displacement vasthouden (dit wordt ook wel 'feedback' genoemd). Dus je gaat niet het filter uitvoeren op het origineel van de zwaan (wat ik steeds doe, waardoor je ook zo mooi ziet dat het origineel steeds terugkomt), maar je voert de displacement juist uit op de zwaan (dus een echte applyFilter) en op dat resultaat laat je weer een displacementmap filter los. Snap je dit niet? Dan zal ik daar ook es een voorbeeld van maken. Hmmm, als ik mijn eigen tekst lees dan lijkt het net of ik dit uit een boek haal, maar dat is niet zo hoor....dat is gewoon mijn schrijfstijl :)

Ok, verder met de uitleg van het effect zelf:

Tevens koppelen we het plaatje van de zwaan aan onze movieclip (attachBitmap)

Ok, en wat doen we dan? Bij de onEnterFrame vragen we ons af, of de linkermuisknop is
ingedrukt, zo ja....dan moeten we tekenen. We tekenen dan in de displacement map (die in
het begin helemaal zwart is) op de locatie van de muiscursor een blauw blok. Zo niet, dan
tekenen we dat blokkie dus niet ;)

De volgende stappen worden vervolgens altijd uitgevoerd in de onEnterFrame, na het tekenen
van het blokkie:

- laat het blurfilter los op de displacement map -> hierdoor krijgen we een soort van 'firetail' effect (ik zal wel es een ander demootje laten zien, hoe die displacement map er eigenlijk uitziet)
- koppel het displacement map filter aan onze movieclip -> dit moet telkens opnieuw, aangezien de displacement map telkens wijzigd -> realtime effect dus

En klaar ;)

Zo doe ik dat dus, net zo eenvoudig in Flash 8 :D

[kH_]

Ok, hier de code (met de druk op spatie code om de displacement map te zien):

import flash.display.*;
import flash.geom.*;
import flash.filters.*;
Key.addListener(this);
var bClick:Boolean=false;
var bShowTail:Boolean=false;
var zwaan:BitmapData=BitmapData.loadBitmap("zwaan");
var offscreen:BitmapData=new BitmapData(zwaan.width,zwaan.height,false,0);
var offscreen2:BitmapData=new BitmapData(zwaan.width,zwaan.height,false,0);
var displacer:DisplacementMapFilter=new DisplacementMapFilter(offscreen,new Point(0,0),4,4,16,16,"ignore");
createEmptyMovieClip("screen",getNextHighestDepth());
screen.attachBitmap(zwaan,screen.getNextHighestDep th());
var blur:BlurFilter=new BlurFilter(2,2,1);
var rect:Rectangle=offscreen.rectangle;
rect.left++;
rect.right--;
rect.top++;
rect.bottom--;
onEnterFrame=function()
{
if(bClick)
{
if(_xmouse>=9 && _xmouse<=offscreen.width-9 && _ymouse>=9 && _ymouse<=offscreen.height-9)
{
offscreen.fillRect(new Rectangle(_xmouse-8,_ymouse-8,16,16),0xff);
}
}
offscreen.applyFilter(offscreen,rect,new Point(1,0),blur);
if(!bShowTail)
screen.filters=[displacer];
else
screen.filters=null;
}

onMouseDown=function()
{
bClick=true;
}
onMouseUp=function()
{
bClick=false;
}

onKeyDown=function()
{
if(Key.isDown(Key.SPACE))
{
bShowTail=!bShowTail;
if(bShowTail)
{
screen.attachBitmap(offscreen,screen.getNextHighes tDepth());
}
else
{
screen.attachBitmap(zwaan,screen.getNextHighestDep th());
}
}
}
Inderdaad, stelt geen ruk voor. Bij dezen de link naar de nieuwe versie:

Zwanen zijn mooie dieren (http://n.domaindlx.com/kaHu/Inspiration.swf)

Druk op de spatiebalk om te wisselen tussen een weergave van de zwaan, waarover de displacement map wordt gegooid en de displacement map zelf.

Wat me wel tegenvalt aan Flash 8, is het feit dat de standaard filters snel werken, maar zelf per pixel een BitmapData object manipuleren is TERGEND langzaam. Toch iets minder dan ik had verwacht (gehoopt) :(

[Roenes]

kH_ waarom de boel verwijderen? :)

[Dauntless]

Ja, spijtig :(. Was nu juist een leuk swfje!

[A3D]

Ben ook al een beetje aan het spelen geweest met de "DisplacementMapFilter" Het effect heb ik verwerkt in deze swf (http://www.a3d.nl/home/main.php) (golvend water en reflectie) en wat uitleg (+code) over het gebruik van de DisplacementMapFilte en perlinNoise in deze post (http://www.a3d.nl/index.php/?p=204)...staat er in ieder geval "iets" in deze topic ;)

[Pointer]

Netjes adrie.
Je blog ziet er uber uit man.
// niet dat ik hem voor het eerst zie nu.

[TheDutch]

kH_ waarom de boel verwijderen? :)
Gelukkig hebben we Google cache: http://66.249.93.104/search?q=cache:gDNZtC-5RUcJ:www.flashfocus.nl/forum/archive/index.php/t-4147.html

[Roenes]

TheDutch, zm'ers kunnen zijn reacties ook nog gewoon zien hoor. Maar ik wilde zijn dingen niet terug halen zomaar zonder zijn toestemming :)

[kH_]

Nee, weglaten die zooi.

[Dauntless]

Natuurlijk brengen we die niet terug zonder jouw toestemming... Als jij wou dat hij bleef staan zou je hem niet verwijdert hebben... Logisch is logisch!

[TheDutch]

Nee, weglaten die zooi.
Ik heb de Google Cache weggehaalt. Wel vraag ik me af waarom je jouw werk "zooi" noemt en waarom het zo snel allemaal weg moest :).

Jouw bijdrage is meest van de tijd namelijk erg interessant...