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]
Comments (56)
Nice goo...really good implementation.
here's my effort.
Siamese Chamber Cat : http://relivethefuture.com/pics/siamese-chambercat.jpg
Posted by: Martin Wood at October 3, 2005 01:18 PMURL: http://relivethefuture.com
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.
Posted by: Campbell Anderson at October 3, 2005 01:40 PMURL: http://www.xsive.co.nz
Mike the Wombat.
http://juanzo.com/nonsense/wombat-mike.jpg
Posted by: Juan Carlos at October 3, 2005 01:51 PMURL: http://www.juanzo.com
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
Posted by: Ryan Matsikas at October 3, 2005 01:51 PMURL: http://www.chewtinfoil.com
Sumo Mike:
Posted by: Chris at October 3, 2005 02:15 PMhttp://designforge.net/images/sumo.jpg
URL: http://www.designforge.net
here some special mike :
he looks malignant (first time ever? :D )
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 :D
Posted by: cr at October 3, 2005 02:22 PMURL:
Big hair Mike:
Posted by: David at October 3, 2005 02:29 PMhttp://evolutionar-e.com/blog/?p=39
URL: http://www.emllabs.com
http://rorexrobots.com/flash/mikec.jpg
Posted by: David R at October 3, 2005 02:29 PMURL: http://rorexrobots.com/flash/
mesh as Yogi Bear...
http://www.michaelcopeland.com/gooChambers.gif
Posted by: yuks at October 3, 2005 02:33 PMURL: http://www.michaelcopeland.com
My dog wants in on this too...
http://www.magicsnacks.com/shiftedpixels/img/GoodBoy.jpg
Posted by: Jon Bradley at October 3, 2005 02:57 PMURL:
haha very nice !!!
here is "Mike the little devil"
http://blogs.cybermundos.com/mfalomir/?p=15
Posted by: Mario Falomir at October 3, 2005 03:22 PMURL: http://blogs.cybermundos.com/mfalomir/
hehehe I liked how this turned out:
Demonic Mike:
http://blogs.cybermundos.com/mfalomir/images/bad_evil_mike.jpg
E.T. Mike:
http://blogs.cybermundos.com/mfalomir/images/et_mike.jpg
Conehead Evil:
Posted by: Mario Falomir at October 3, 2005 03:42 PMhttp://blogs.cybermundos.com/mfalomir/images/conehead_demonic_mike.jpg
URL: http://blogs.cybermundos.com/mfalomir
http://www.pixelwit.com/temp/FandLatMM.jpg
No point in mentioning these bats, I thought. Poor bastard will see them soon enough.
Posted by: PiXELWiT at October 3, 2005 03:55 PMURL: http://www.pixelwit.com
http://www.spintechnologies.ca/howdoyoulikethismike/goo_mike.jpg
Posted by: Randy Troppmann at October 3, 2005 04:02 PMURL:
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
Posted by: Aaron Gonzalez at October 3, 2005 04:29 PMURL:
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
Posted by: Mario Klingemann at October 3, 2005 04:37 PMURL: http://www.quasimondo.com/biggerthanlife.php
Sumo Chambers!
http://www.freaksauce.com/blog/images/sumo_chambers.jpg
Posted by: Jon at October 3, 2005 05:16 PMURL: http://www.freaksauce.com/blog
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 16x16 blocks? Have you started compression of that data?
Be interested to help with the compression alog..
Cheers
Cam
Posted by: Campbell Anderson at October 3, 2005 05:26 PMURL: http://www.xsive.co.nz
The many (disturbing) faces of Mike Chambers...
http://www.ikology.com/goomike/
:)
Posted by: Pascal at October 3, 2005 11:45 PMURL: http://www.ikology.com
Damn ! Ugly one » http://dasp.free.fr/more/goo-mike.jpg
Posted by: Quentin at October 4, 2005 02:15 AMURL: http://dasp.free.fr
@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.
Posted by: Mario Klingemann at October 4, 2005 03:30 AMURL: http://www.quasimondo.com/biggerthanlife.php
My Design is ...
Posted by: kyle at October 4, 2005 04:09 AMhttp://kyle.jolin.info/tt/attach/1004/051004180516192994/033330.jpg
URL: http://kyle.jolin.info/tt/index.php?pl=341
Cheers Mario,
Sounds like an interesting project! Mr Skinner, sounds like you have one to watch.
Cam.
Posted by: campbell at October 4, 2005 04:19 AMURL: http://www.xsive.co.nz
Here's my entry: Giraffe Mike.
Posted by: Sarge at October 4, 2005 07:55 AMhttp://pixelfumes.blogspot.com/2005/10/my-mike-chambers-gooify-contest-entry.html
URL: http://www.pixelfumes.com/blog
http://kyle.jolin.info/tt/attach/goo.jpg
Posted by: kyle at October 4, 2005 08:27 AMURL: http://kyle.jolin.info/tt/attach/goo.jpg
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)
Posted by: Patrick Hunton at October 4, 2005 08:51 AMhttp://www.shaggydogmedia.com/goo/mc_magic_troll.jpg
URL:
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.
Posted by: Patrick Hunton at October 4, 2005 09:01 AMURL:
http://play.astrostyle.net/littleface_mike.jpg
Posted by: Lanny at October 4, 2005 09:01 AMURL: http://astrostyle.net
Joker Mike
Posted by: Matt Marriott at October 4, 2005 10:04 AMhttp://www.fusionmediainc.com/temp/joker_chambers.png
URL:
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.
Posted by: Mario Klingemann at October 4, 2005 10:31 AMURL: http://www.quasimondo.com/biggerthanlife.php
Mike Chambers - Edumacator of Last Resort
Posted by: Philip at October 4, 2005 12:06 PMhttp://flickr.com/photos/97702812@N00/49403228/
URL: http://shocktime.com
Haha, thats great. Evil Mike - http://www.paulofierro.com/images/evilmike.jpg
Posted by: Paulo at October 4, 2005 12:23 PMURL:
Funny Mike:
http://dengjie.com/temp/mike_chambers.jpg
Posted by: Danger at October 4, 2005 12:23 PMURL: http://www.dengjie.com
(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]]
Posted by: tim maffett at October 4, 2005 12:40 PMURL: http://timmaffett.com/source/revEngGSkinnerGooify.html
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.
Posted by: tim maffett at October 4, 2005 02:27 PMURL:
Mike Chambers? or Agent Smith? (Matrix effect)
http://www.fusionmediainc.com/temp/matrix.png
Posted by: Matthew Marriott at October 4, 2005 02:48 PMURL:
Last one. Sorry I should of grouped mine like everyone else:
Anyways, here's Grandpa Chambers.
http://www.fusionmediainc.com/temp/grandpa.png
Posted by: Matt Marriott at October 4, 2005 03:00 PMURL:
My Entry:
Posted by: Christopher Wigginton at October 4, 2005 04:04 PMhttp://wiggy.coldfusionjournal.com/goofy_mike_chambers.htm
URL: http://wiggy.coldfusionjournal.com
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.
Posted by: Grant Skinner at October 4, 2005 05:25 PMURL: http://www.gskinner.com/
I made a movie theme like this..^^"
http://kyle.jolin.info/tt/attach/goo2.jpg
origin pic...
http://kyle.jolin.info/tt/attach/goo.jpg
Posted by: kyle at October 4, 2005 07:44 PMURL: http://kyle.jolin.info/tt/attach/goo2.jpg
Here are mine, too fun.
www.kembond/tmp/gskinner/index.html
Posted by: Chris at October 4, 2005 09:22 PMURL: http://www.kembond.com
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!
Posted by: Patrick Pietens at October 5, 2005 05:39 AMURL: http://www.flashaddict.nl
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..
Posted by: Valters Boze at October 5, 2005 04:41 PMURL: http://www.djnet.lv
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
Posted by: Kit man at October 6, 2005 02:41 AMURL: http://f-for-flash.com.hk
Here's another one:
Posted by: Lanny at October 6, 2005 05:07 PMhttp://play.astrostyle.net/reptile_mike.jpg
URL: http://www.astrostyle.net
here's my try :-)
a flat piggy face.
http://www.bus444.ch/test/piggy.jpg
Posted by: daniel at October 10, 2005 04:28 AMURL: http://www.bus444.ch
Here is a few I put together....
www.designoncue.com/images/Chambers/alien.jpg
www.designoncue.com/images/Chambers/brainiac.jpg
www.designoncue.com/images/Chambers/cartoonish.jpg
www.designoncue.com/images/Chambers/impressionist.jpg
www.designoncue.com/images/Chambers/ostrich.jpg
www.designoncue.com/images/Chambers/pompodore.jpg
www.designoncue.com/images/Chambers/windy.jpg
I hope you like :)
Posted by: Gabriel at October 10, 2005 07:26 AMURL: http://www.designoncue.com
funny...
http://thomaf.free.fr/mikeMouse.png
Posted by: thomaf at October 10, 2005 09:16 AMURL:
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
Posted by: James Eberhardt at October 11, 2005 07:41 PMURL:
Here´s the winner.....
Posted by: Rob Flink at October 12, 2005 09:38 AMhttp://img291.imageshack.us/my.php?image=screenhunter1507mp.jpg
http://img291.imageshack.us/img291/8606/screenhunter1507mp.th.jpg
URL:
How about a late entry...its good!
http://img291.imageshack.us/img291/8606/screenhunter1507mp.jpg
Posted by: R. Flink at October 12, 2005 09:48 AMURL:
"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.
Posted by: David R at October 17, 2005 01:34 PMURL: http://rorexrobots.com/flash
http://home.anet.net.tw/danco/other/mike.jpg
Posted by: killme at October 17, 2005 10:19 PMURL:
Where is it possible to get the sourcecode for your gooifyer?
Posted by: Eik at November 10, 2005 03:58 AMURL:
hi Mike how r u?
Posted by: jeihan & sarah at December 31, 2005 04:29 AMreally 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
URL: http://http:\\www.hotmail.com\
How do you expect us to get any work done?
Posted by: Erkan at January 23, 2006 03:28 PMURL: http://www.siirci.net