Cartoonize Image by AS3.0 - Cartoon Filter

Using Photoshop or Gimp, you can create lots of artistic pictures from photos like water painting, oil painting, sketch ..., by powerful filters there.

Actionscript provides some filters such as BlurFilter, DisplacementMapFilter... and two basic but useful filter ColorMatrixFilter and ConvolutionFilter. We can do many things using those two filter. Here are two tutorials explaining them:

http://www.adobe.com/devnet/flash/articles/matrix_transformations_01.html

http://docs.gimp.org/en/plug-in-convmatrix.html (ConvolutionFilter)

Once I want to convert a photo into a Chinese painting style pic but failed.

What inspired me recently is this free online app based on flash -Befunky Cartoonizer http://www.befunky.com/, which can convert your photo into a cartoon style pic.

I searched the Internet and found some tutorials on how to cartoonize your photo into cartoon

using some image processing software.

GIMP:ocaoimh.ie/2004/10/01/cartoonizing-photos-with-the-gimp/

(Now we have a cartoon filter in GIMP: http://docs.gimp.org/en/plug-in-cartoon.html)

PHOTOSHOP: http://prashantmullick.com/wlog/archives/2004/09/14/cartoonize/

I found that the only trick is to find edges of image, extract outline of shapes and set BelndMode to multiply! I think Actionscript can handle that, so did this little experiment.

Firstly, ConvolutionFilter can do edge detection. Secondly, we can use BitmapData.draw()

+BlendMode to set blend mode.

However, in my test, simple edge detection using ConvolutionFilter with 3*3 array

[ 0, -1, 0, -1, 4, -1, 0, -1, 0 ] or [1, 2, 1, 0 ,0, 0, -1, -2, -1] or [1, 0, -1, 2, 0, -2, 1, 0, -1]

wouldn't result a nice effect.

But thanks to this post:

http://www.kirupa.com/forum/showthread.php?p=2205469

I get a better way to extract outlines.

If you wants to know more about edge detection using AS3.0, here are two tutorials with source:

http://lukewalsh.co.uk/blog/2008/06/sobel-edge-detection-in-flash.html

http://www.kilometer0.com/edge_detection.php

And I found BlendMode.OVERLAY seems better than BlendMode.MULTIPLY.

This is the final result:

original picture:

edge detection:

BlendMode.MULTIPLY+Blur :
BlendMode.OVERLAY :
It doesn't look like a cartoon very much and may produce ugly things when using photos of human face but that's all I can do now.

In my test this is not suitable for real time rendering. 6*applyFilter()+3*draw()+2*threshold() eats too much CPU. I hope to find some better ways to do this. Hope some one could write a shader to do that work. If anyone knows a faster way to trace edges, please tell me. I do hope to make it run on the fly!

Source Code:

http://flaswf.googlecode.com/files/CartoonFilter.zip

================================================
UPDATE 2009_7_09
another cartoon filter (version B) using Image binarization and edge tracing:
http://bruce-lab.blogspot.com/2009/05/image-binarization-and-edge-tracing-in.html

Ray Tracing - Voxel Rendering in Flash

I did some experiments on ray tracing in as3 before and I'm interested in this technology because it is simple but can create convincing 3D effects like shadows and reflections.
The problem is efficiency, real time rendering for complicated objects seems impossible for
hardware limitations nowadays.

Voxel rendering is another interesting thing, I once played with voxel terrains, you can find some work here:
http://bruce-lab.blogspot.com/2009/01/terrain-rendering-in-flash.html
http://bruce-lab.blogspot.com/2008/10/open-source-as30-voxel-terrain-engine.html

Voxel rendering for 3d objects -volume rendering is something a little different.
Mr doob gave us a very impressive demo(with source):http://www.mrdoob.com/blog/post/571
That swf load a confusing "data.v" file, at first I thought it is a Vista/Lipsia medical CT data format file, but now I think I was wrong. It is just a compressed bytearray data storing the voxel head data -x,y,z and colour values of voxels, please check the loading part of the source code for details. I don't know how they created such data file, maybe use some other software or mybe just by as3. That source is not very readable, what's more I can't figure out how to get those voxel data.

After I saw zevan's work http://shapevent.com/sketchbook/2008/12/28/voxel-play/

and this Isometric Voxels: http://actionsnippet.com/?p=431 (with code)

I decide to do something myself. I tried a simple way - create my own voxel data and use ray tracing to render it. Ray tracing is slow, so I give up real time. I can only create some simple voxel object - cube&sphere, I used six pictures as textures, five for cube and one for the sphere. I use 256*256*256 voxels to represent a simple scene - a sphere in a cube and stored the values in an array, convert and compress it into a bytearray and then save it as 'cube_sphere.vd'. The data file is still large - 3.23MB! The 'voxel_data_tracer.swf' loads this voxel data file and renders the voxels.

This is what I got:

You can download the demo here:
http://flaswf.googlecode.com/files/raytracing%20voxel%20rendering.zip
but it is NOT RECOMMEND, it is slow and eats too much, too much memory - about 200,000k when initing, cpu 50% and more than 120,000k memory needs while rendering.
Source code needs too much optimization so I can't put it here now.
[Update:2011/08/26] Source code for the demo:
http://bruce-lab.blogspot.com/2011/08/simple-ray-tracing-voxel-demo.html
--------------------------------------------
Ken Silverman created a fast cpu based voxel 3d engine -Voxlap using C and DirectX.
http://www.advsys.net/ken/voxlap/voxlap05.htm

The world of Voxlap is fully destructible, yes , you can destroy everything there!
That is the most exciting part of voxels!
Voxlap is open source, but God understands what those crazy codes mean!

An open source game using Voxlap is V O X E L S T E I N 3 D - a FPS game inspired by Wolfenstein 3D.
http://voxelstein3d.blogspot.com/
http://voxelstein3d.sourceforge.net/
Links:
A minecraft level render in flash:
http://liquify.eu/flash/MCExplorer
http://www.minecraftforum.net/viewtopic.php?f=25&t=96591