by Grant Skinner

Flash 8: gOOify Mike Chambers, and win!

So I’m back from my honeymoon on the Mediterranean, which was awesome, and very relaxing. Being the nerd I am I came back with a few sheets of sketches and descriptions of experiments/concepts I wanted to pursue when I got home.

The first idea that I tackled is an image goo-ifier that works similarly to PowerGoo, or Liquify in PhotoShop. It’s pretty simple in implementation, but is one of my favorite Flash 8 experiments to date.

This experiment was inspired by Guy Watson’s PowerGoo experiment, though I believe it takes a completely different technical approach. I’m guessing his uses per-pixel manipulation, whereas mine uses a dynamically generated displacement map. His offers more flexibility in the level of manipulation, while mine runs a lot faster, and generates a smoother result. It also includes a snifty animate function.

Thanks go to Mike Chambers for agreeing to be the victim of your distorting (distorted?) fun. I thought it was fitting to use Mike because in many ways he’s the face of Flash – and I’d already picked on Mike Downey enough. 🙂

Just to make things interesting, we will be giving away a free copy of gProject to the best gOOified picture of Mike that we receive by Monday, October 10, when we will post the cream of the crop and the winner to the blog. For now, you’ll have to screenshot your results, post it to your site and put a link to it in the comments with the title of your “art” (or email the pic to us).

Which reminds me: we have another free copy of gProject for the first person to create an AS & PHP system for sending a COMPRESSED version of a BitmapData object to the server and saving it as a JPG.


Flash 8 player required, have fun:

Here are a couple of example images to get you thinking:

Fat’n’Happy Chambers

Evil Genius Chambers

[UPDATE: Winner posted]

[UPDATE: Source code posted]

Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

If you enjoyed this, you might like these articles…

And the gOOify Mike Chambers winner is…, Source Code: Image gOOifier, gProject for Flash 8, gProject panel documentation posted.

57 Comments

  1. Martin Wood October 3, 2005 at 1:18pm

    Nice goo…really good implementation.

    here’s my effort.

    Siamese Chamber Cat : http://relivethefuture.com/pics/siamese-chambercat.jpg

  2. Campbell Anderson October 3, 2005 at 1:40pm

    Muh huh hahahaha very nice! love it. I tried some compression of data when sending pixel information from flash to a php page and found the prosessing really killed flash. I will try clening up the code and enter.

    Check out my mini mike @:

    http://blog.xsive.co.nz/archives/57

    Cam.

  4. Ryan Matsikas October 3, 2005 at 1:51pm

    How do you expect us to get any work done?

    I call this, Tiny Head/Floating Hair Peice Chambers..

    http://out.chewtinfoil.com/gOOChambers.jpg

  6. cr October 3, 2005 at 2:22pm

    here some special mike :

    he looks malignant (first time ever? 😀 )

    http://www.gatcor.com/mike/malignantmike.jpg

    After his sabatical year with the pygmies

    http://www.gatcor.com/mike/mikeHeadreduced.jpg

    Mike his a punk ?

    http://www.gatcor.com/mike/mikePunk.jpg

    Mike after seen transpoting

    http://www.gatcor.com/mike/mikespoting.jpg

    In the film Terminator

    http://www.gatcor.com/mike/mikonator2.jpg

    Mike if you read me … give me the defaultplayer2 sources please 😀

  11. Mario Falomir October 3, 2005 at 3:22pm

    haha very nice !!!

    here is “Mike the little devil”

    http://blogs.cybermundos.com/mfalomir/?p=15

  13. PiXELWiT October 3, 2005 at 3:55pm

    http://www.pixelwit.com/temp/FandLatMM.jpg

    No point in mentioning these bats, I thought. Poor bastard will see them soon enough.

  15. Aaron Gonzalez October 3, 2005 at 4:29pm

    I did a whole bunch of Mike goo photos.

    They are here:

    http://houseofoctober.com/mc/

    My fav though has to be the teenage Mike:

    http://houseofoctober.com/mc/images/mikechambers_teen.jpg

  16. Mario Klingemann October 3, 2005 at 4:37pm

    Great Job Grant!

    I haven’t got the the BitmapData compression engine ready yet, but I have built a solution which uses AMFPHP to transfer the bitmap to the server which should reduce the transfered data already by 50%. Demo: http://www.quasimondo.com/biggerthanlife.php

  18. Campbell Anderson October 3, 2005 at 5:26pm

    Hey Mario,

    are you streaming that data to Amfphp line by line? Im seeing 27 calls to the server and for an image thats 435px high im guessing your processing it into 16×16 blocks? Have you started compression of that data?

    Be interested to help with the compression alog..

    Cheers

    Cam

  19. Pascal October 3, 2005 at 11:45pm

    The many (disturbing) faces of Mike Chambers…

    http://www.ikology.com/goomike/

    🙂

  21. Mario Klingemann October 4, 2005 at 3:30am

    @Cam: After I received PHP timeout message for big images I decided it’s better to chop the image into slices. The block size is user defined plus it depends on the speed of the computer as it includes a timeout. Currently I’m almost finished with a first compressed version, but I will build the engine in a way to allow for different compression methods, so as soon as I publish the source you can add your own algorithms.

  23. campbell October 4, 2005 at 4:19am

    Cheers Mario,

    Sounds like an interesting project! Mr Skinner, sounds like you have one to watch.

    Cam.

  26. Patrick Hunton October 4, 2005 at 8:51am

    My favorite is the last I think… it was a bit of a progression, but here are three I did:

    1) Curious Mike

    http://www.shaggydogmedia.com/goo/mc_wide_eyed.jpg

    2) Smartest Kid in the Class

    http://www.shaggydogmedia.com/goo/mc_smartest_kid.jpg

    3) Magic Troll Mike (my favorite)

    http://www.shaggydogmedia.com/goo/mc_magic_troll.jpg

  27. Patrick Hunton October 4, 2005 at 9:01am

    Grant, I was wondering, since your method uses the displacement map technique, couldn’t you also apply it to a video? That could be interesting. It wouldn’t be quite the same, but being able to mess with a goowey video screen could be interesting. Just a thought.

  30. Mario Klingemann October 4, 2005 at 10:31am

    Okay Grant,

    fork over the gProject copy 😉 – my compression engine is ready. As the algorithm is not JPEG but palette based and runlength endocoded the results for noisy photos are of course not as optimum as for graphics, but I’ve added a “lossy” option so the least significant noisy bits can be masked out. For noisy photos as in the example with 3 bits lost I get ~70% compression, whereas vector graphics go down to ~3%. Plus it can return JPEGS and PNGs. I will publish v1 very soon on my blog.

    BTW – the most of the time is lost on the server where GD has to reconstruct the bitmap.

  34. tim maffett October 4, 2005 at 12:40pm

    (on bitmap transmission subject)

    The problem that Grant has suggested here is bitmap compression/transmission from flash. As Mario’s example shows there is a lot of data to transmit for a bitmap. (width*height*4 bytes) (if no alpha an 6 bit encoded). (Mario’s now added compression) Compression will be added to minimize this, RLE or BWT should be fast enough for flash…. but

    Another way of looking at this problem is what data can be used to reproduce the ‘goo’ed’ image. Transmitting the displacement map to the server with mario’s engine is one possibility, I suggest in something much smaller, the recorded mouse goo’ing of the user. This is tiny (relatively), and small enough to be appended to a url.

    I have implemented a version of this using a reverse engineered version of grant’s goo’er.

    The example is taking a set of draw commands from the url, but the user can also get text strings of their mouse recordings. The example also helps illustrate how displacement maps work)

    (and grant, i will remove the source if you object)

    [[Grant says: While I’m usually very happy to share code, it is under my terms. I do NOT appreciate people reverse engineering my work and posting the code. I admire your enthusiasm for the challenge, but have removed the link to the source code]]

  35. tim maffett October 4, 2005 at 2:27pm

    source removed as well from my site, i threw it up primarily so you could grab it if you wanted. didn’t want to step on any toes.

  36. Matthew Marriott October 4, 2005 at 2:48pm

    Mike Chambers? or Agent Smith? (Matrix effect)

    http://www.fusionmediainc.com/temp/matrix.png

  37. Matt Marriott October 4, 2005 at 3:00pm

    Last one. Sorry I should of grouped mine like everyone else:

    Anyways, here’s Grandpa Chambers.

    http://www.fusionmediainc.com/temp/grandpa.png

  39. Grant Skinner October 4, 2005 at 5:25pm

    Ha! That last one definitely gets bonus points. Keep ’em coming, these are great.

    I’m going to have to build a slide show app to display these all.

  42. Patrick Pietens October 5, 2005 at 5:39am

    A very cool little toy. It makes it even better to try it out on Mike 🙂

    Here’s mine, called “Fat Kid Mike”:

    http://www.flashaddict.nl/fatkidmike.jpg

    I couldn’t resist to load the picture in Photoshop and do some liquify magic on it:

    http://www.flashaddict.nl/liquifiedmike.jpg

    Cheers!

  43. Valters Boze October 5, 2005 at 4:41pm

    mikey, you naughty boy 🙂

    http://www.djnet.lv/mikey.jpg

    one difference is, you cannot smudge as far as you want, because the limit of displacement map. maybe you could make the displacement offset bigger according to image size, so every bottom pixel could be driven up to top..

  44. Kit man October 6, 2005 at 2:41am

    nice exp!!!

    and come check my page with PHP/Flash to output jpeg

    http://www.f-for-flash.com.hk/8ball_exp/genPop.php?swf=printScreen2.swf

  49. James Eberhardt October 11, 2005 at 7:41pm

    I know I’m late for the contest, but I had to post this one. I call it “Thousand Island Mike”.

    http://www.eberhardt.ca/mike.png

    James

  52. BLOGGY October 13, 2005 at 5:25am

    gOOify Mike Chambers

    gOOify Mike Chambers: “Filed under: Flash 8, Flash Player 8, Macromedia, Innovation, Art, Games, Rich Internet ApplicationsNow that is funny!Grant Skinner (previously mentioned in Flash Insider here, here, here, and here) has posted a great example of an

  53. David R October 17, 2005 at 1:34pm

    “we have another free copy of gProject for the first person to create an AS & PHP system for sending a COMPRESSED version of a BitmapData object to the server and saving it as a JPG.”

    This is super easy in Flash 8.5. You can turn a BitmapData into a ByteArray, which then has a .compress() function for compressing with zlib. It’s then just a matter of uploading that to the server.

  55. Eik November 10, 2005 at 3:58am

    Where is it possible to get the sourcecode for your gooifyer?

  56. jeihan & sarah December 31, 2005 at 4:29am

    hi Mike how r u?

    really nice effort

    we r 2 sisters(jeihan & sarah) from egypt and are interested by this work and wanna be tought this

    what are the tools that you use?

    and are they difficult to be tought alone?

    we are 2 web designers in a a graphical company and need to be updated

    thx

    byeeeeeeeeeeeee

  57. Erkan January 23, 2006 at 3:28pm

    How do you expect us to get any work done?

Leave a Reply

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