February 13, 2006
Flash 8: Blotting Paper Effect

Here is an astonishingly simple method to get something like a diffusion effect of wet ink on blotting paper. This can be used to get organic looking edges or to give photos a painterly effect:

1. draw the object you want to diffuse onto a BitmapData object [A]
2. create another BitmapData object [B] of the same size as a temporary storage
3. create another BitmapData object [C] of the same size and fill it with noise

4. apply the DisplacementMapFilter on A using C as the displacement map and store it in B
5. draw B over A using Multiply mode for growth or Screen mode for shrinking or both for something in between. You can also experiment with other blendmodes
6. repeat from step 4

For a less fibery look you have to create a new random noise map each round. Instead of normal noise you can also use perlin Noise which will give you some freakish effect especially when used with photos.

Here is a demo:

Moving the mouse to the top will shrink the dark areas
Moving the mouse to the bottom will grow the dark areas
Moving the mouse to the left will give a smoother, blurrier look
Moving the mouse to the right will give a more fractal, fibery look

You can also paint by clicking and dragging and erase by clicking and dragging with the SPACE bar pressed.

And I have added a litte "Rorschach" inkblot mode which will horizontally mirror everything you draw. Press the "R" key to toggle it on/off. (you will have to click the Flash file at least once, so it receives the keyboard focus).

Download the source file here.

Posted at February 13, 2006 12:31 AM | Further reading

That is slick. Nice work.

Posted by: Matt Przybylski on February 13, 2006 05:57 AM

The edges look like a Mandelbrot :-)
Nice effect!

Posted by: joa on February 13, 2006 07:30 AM

How would you use this to create a piece of paper burning?

Posted by: steve w on February 13, 2006 04:43 PM

Exactly! Like a burning map.

I'm not sure I'm up to the task but thanks for sharing the code as it will jump start my effort.

Posted by: steve w on February 13, 2006 07:17 PM

totally cool stuff! hey when you go on shrink, it looks like a deep nasty ugly wound spontaneously healing up. Maybe you could build it into a flashgame where youre jesus and you have to heal all these horrible fleshwounds or something..
Maybe Im getting carried away again.

Posted by: jan on February 14, 2006 01:20 PM
Post a comment

Email Address:



Remember info?

Thank you!

Most Visited Entries
Sketches, Works & Source Code
In Love with
Powered by
Movable Type 2.661

© Copyright Mario Klingemann

Syndicate this site:
RSS 1.0 - RSS 2.0

Quasimondo @ flickr
Quasimondo @ LinkedIn
Quasimondo @ Twitter
Quasimondo @ Facebook
Quasimondo @ MySpace
Quasimondo is a Bright
Citizen of the TRansnational Republic
My other blog in german

My family name is written Klingemann,
not Klingelmann, Klingeman, Klingaman, Kingemann,
Kindermann, Killingaman, Klingman, Klingmann, Klingonman
Klingemman, Cleangerman, Klingerman or Kleangerman

profile for Quasimondo at Stack Overflow, Q&A for professional and enthusiast programmers