Monkey Dodge – Attempt at my own Flow Map

So this is how I attempted to create my own flowmap:

1) Took a screenshot of the scene from above:

2) Using GIMP, performed edge detection using Sobel size 3 filter

3) Performed Dilation 3 times.

4) Performed Brightness/Contrast adjustment, setting Brightness to 126, contrast to 127

5) I loaded the resulting image in MATLAB using:

im = imread(‘island.png’);

And treated it as a heightmap:


to generate surface normals:


6) I took the resulting normals:

[nxx, nyy, nzz] = surfnorm(xx, yy, im);

Created new rgb image:

nrgb = zeros(size(im,1),size(im,2),3);

And assigned x component of the normal to red channel, y component to green channel and ignored z component.

nrgb(:,:,1) = (nxx + 1) * 127;

nrgb(:,:,2) = (nyy + 1) * 127;

imwrite(uint8(nrgb), ‘island_nrgb.png’);

This resulted in the following image:

7) Back in GIMP, I removed the greenish/yellowish color filling most of the image and then using series of Dilations first without selection and later with inverted magic selection of the black background (magic wand on black background, then invert) obtained the following result:

8 ) I added the principal flow direction to normals by bumping red/green color curves appropriately:

9) Then filled what used to be black with pure yellow color (principal flow direction)

10) And finally applied some Gaussian blur (size 20)

11) The resulting renderings definitely show that something is going on around obstacles but I think it’s still not perfect.

If you have any ideas how this could be improved, feel free to leave a comment 🙂 If you don’t have MATLAB, you can use a free alternative – Octave, it should also have the required functions! As usual, you’re more than welcome to play this fascinating monkey game 😉

DOWNLOAD: Monkey Dodge – Unity Game

Leave a Reply

Your email address will not be published. Required fields are marked *