With the addition of Bitmap Filters in Director 11, I’m sure it will open up many possibilities in Image Effects for Director Content. I’d like to discuss one such effect, may be a commonly used one, Ripple Effect.
Doing this is very simple. Displacement map requires two images to do the displacement. So we are taking one image where we want to apply displacement map. The other one is an image on which Perlinnoise is applied. As and when the perlinnoise gets animated, the image on which Displacement map is applied also gets animated.
So, what are we waiting for? Let’s get started…
Before starting this, make sure you have downloaded two png files, land.png and water.png from here.
Launch Director. Import both the png files.
Set the stage size to 300x288. Place the water.png on the stage little above vertically. So in Property Inspector’s sprite tab it would be L:0, T:-12, R:300, B:300. Name the sprite as ‘water’
Place the land.png exactly in the center of the stage. In the Property Inspector’s Sprite tab it would be L:0, T:0, R:300, B:300.
Now, we need one more image to apply the perinNoise on. So let’s create a paint bitmap. Open Paint window, draw a filled rectangle and name it as ‘Bitmap’.
Place the OUTSIDE the stage and scale it to 300x300 using Property Inspector. We don’t want to see this image in the final content. We want to just use the perlinNoise properties of this image.
Starting with out first code, let’s apply perlinNoise to member(“bitmap”). Open the script window and write the following movie script.
global perlinOffset
on prepareMovie
-- Create a list and associate with variable
perlineOffset.
-- This list is required for the perlinNoise.
perlinOffset = list()
repeat with i = 1 to 5
p = point(3,3)
perlinOffset.append(p)
end repeat
end
on exitFrame me
-- change the baseX and baseY values for the size of the
perlinNoise
baseX = 70
baseY = 70
numOctaves = 5
seed = 1
bStitch = true
bFractalNoise = true
bGrayscale = 0
chanOptions = 7
repeat with i = 1 to numOctaves
getP = perlinOffset[i]
-- Change these x and Y values to speedup the
perlinNoise
x = 1
y = 1
x = x + getP.locH
y = y + getP.locV
tempP = point(x, y)
setAt perlinOffset, i, tempP
end repeat
myImage = member("bitmap").image
-- Apply the perlineNoise on the image of
member("bitmap")
Play the movie and you can see the perlinNoise getting animated on ‘Bitmap’ member.
Now, let’s apply the Displacement map on ‘water’ sprite using the ‘Bitmap’ sprite. Select the ‘water’ sprite, go to filter tab of Property Inspector and choose Displacement Map. Do the following Settings;
map: member “bitmap”
Comp X: Green, Comp Y: Red
Scale X: 20, Scale Y: 20
Mode: Ignore
You can observe the pixels getting shifted. What we need is it to be continuous. Right-Click the water sprite on the score and choose ‘Script…’ Insert the following script.
