 Flash 8: gOOify Mike Chambers, and win!Posted on October 3, 2005 by Grant SkinnerSo 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.
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]
Follow @gskinner on Twitter for more news and views on interactive media.
|
|
|
57 Comments
Nice goo...really good implementation.
here's my effort.
Siamese Chamber Cat : http://relivethefuture.com/pics/siamese-chambercat.jpg
Posted by: Martin Wood on Oct 3, 2005 1:18pm URL: 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 on Oct 3, 2005 1:40pm URL: http://www.xsive.co.nz
Mike the Wombat.
http://juanzo.com/nonsense/wombat-mike.jpg
Posted by: Juan Carlos on Oct 3, 2005 1:51pm URL: 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 on Oct 3, 2005 1:51pm URL: http://www.chewtinfoil.com
Sumo Mike:
http://designforge.net/images/sumo.jpg
Posted by: Chris on Oct 3, 2005 2:15pm 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 on Oct 3, 2005 2:22pm
Big hair Mike:
http://evolutionar-e.com/blog/?p=39
Posted by: David on Oct 3, 2005 2:29pm URL: http://www.emllabs.com
http://rorexrobots.com/flash/mikec.jpg
Posted by: David R on Oct 3, 2005 2:29pm URL: http://rorexrobots.com/flash/
mesh as Yogi Bear...
http://www.michaelcopeland.com/gooChambers.gif
Posted by: yuks on Oct 3, 2005 2:33pm URL: http://www.michaelcopeland.com
My dog wants in on this too...
http://www.magicsnacks.com/shiftedpixels/img/GoodBoy.jpg
Posted by: Jon Bradley on Oct 3, 2005 2:57pm
haha very nice !!!
here is "Mike the little devil"
http://blogs.cybermundos.com/mfalomir/?p=15
Posted by: Mario Falomir on Oct 3, 2005 3:22pm URL: 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:
http://blogs.cybermundos.com/mfalomir/images/conehead_demonic_mike.jpg
Posted by: Mario Falomir on Oct 3, 2005 3:42pm 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 on Oct 3, 2005 3:55pm URL: http://www.pixelwit.com
http://www.spintechnologies.ca/howdoyoulikethismike/goo_mike.jpg
Posted by: Randy Troppmann on Oct 3, 2005 4:02pm
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 on Oct 3, 2005 4:29pm
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 on Oct 3, 2005 4:37pm URL: http://www.quasimondo.com/biggerthanlife.php
Sumo Chambers!
http://www.freaksauce.com/blog/images/sumo_chambers.jpg
Posted by: Jon on Oct 3, 2005 5:16pm URL: 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 on Oct 3, 2005 5:26pm URL: http://www.xsive.co.nz
The many (disturbing) faces of Mike Chambers...
http://www.ikology.com/goomike/
:)
Posted by: Pascal on Oct 3, 2005 11:45pm URL: http://www.ikology.com
Damn ! Ugly one » http://dasp.free.fr/more/goo-mike.jpg
Posted by: Quentin on Oct 4, 2005 2:15am URL: 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 on Oct 4, 2005 3:30am URL: http://www.quasimondo.com/biggerthanlife.php
My Design is ...
http://kyle.jolin.info/tt/attach/1004/051004180516192994/033330.jpg
Posted by: kyle on Oct 4, 2005 4:09am 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 on Oct 4, 2005 4:19am URL: http://www.xsive.co.nz
Here's my entry: Giraffe Mike.
http://pixelfumes.blogspot.com/2005/10/my-mike-chambers-gooify-contest-entry.html
Posted by: Sarge on Oct 4, 2005 7:55am URL: http://www.pixelfumes.com/blog
http://kyle.jolin.info/tt/attach/goo.jpg
Posted by: kyle on Oct 4, 2005 8:27am URL: 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)
http://www.shaggydogmedia.com/goo/mc_magic_troll.jpg
Posted by: Patrick Hunton on Oct 4, 2005 8:51am
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 on Oct 4, 2005 9:01am
http://play.astrostyle.net/littleface_mike.jpg
Posted by: Lanny on Oct 4, 2005 9:01am URL: http://astrostyle.net
Joker Mike
http://www.fusionmediainc.com/temp/joker_chambers.png
Posted by: Matt Marriott on Oct 4, 2005 10:04am
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 on Oct 4, 2005 10:31am URL: http://www.quasimondo.com/biggerthanlife.php
Mike Chambers - Edumacator of Last Resort
http://flickr.com/photos/97702812@N00/49403228/
Posted by: Philip on Oct 4, 2005 12:06pm URL: http://shocktime.com
Haha, thats great. Evil Mike - http://www.paulofierro.com/images/evilmike.jpg
Posted by: Paulo on Oct 4, 2005 12:23pm
Funny Mike:
http://dengjie.com/temp/mike_chambers.jpg
Posted by: Danger on Oct 4, 2005 12:23pm URL: 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 on Oct 4, 2005 12:40pm URL: http://timmaffett.com/source/revEngGSkinnerGo…
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 on Oct 4, 2005 2:27pm
Mike Chambers? or Agent Smith? (Matrix effect)
http://www.fusionmediainc.com/temp/matrix.png
Posted by: Matthew Marriott on Oct 4, 2005 2:48pm
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 on Oct 4, 2005 3:00pm
My Entry:
http://wiggy.coldfusionjournal.com/goofy_mike_chambers.htm
Posted by: Christopher Wigginton on Oct 4, 2005 4:04pm 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 on Oct 4, 2005 5:25pm URL: 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 on Oct 4, 2005 7:44pm URL: http://kyle.jolin.info/tt/attach/goo2.jpg
Here are mine, too fun.
www.kembond/tmp/gskinner/index.html
Posted by: Chris on Oct 4, 2005 9:22pm URL: 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 on Oct 5, 2005 5:39am URL: 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 on Oct 5, 2005 4:41pm URL: 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 on Oct 6, 2005 2:41am URL: http://f-for-flash.com.hk
Here's another one:
http://play.astrostyle.net/reptile_mike.jpg
Posted by: Lanny on Oct 6, 2005 5:07pm URL: http://www.astrostyle.net
here's my try :-)
a flat piggy face.
http://www.bus444.ch/test/piggy.jpg
Posted by: daniel on Oct 10, 2005 4:28am URL: 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 on Oct 10, 2005 7:26am URL: http://www.designoncue.com
funny...
http://thomaf.free.fr/mikeMouse.png
Posted by: thomaf on Oct 10, 2005 9:16am
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 on Oct 11, 2005 7:41pm
Here´s the winner.....
http://img291.imageshack.us/my.php?image=screenhunter1507mp.jpg
http://img291.imageshack.us/img291/8606/screenhunter1507mp.th.jpg
Posted by: Rob Flink on Oct 12, 2005 9:38am
How about a late entry...its good!
http://img291.imageshack.us/img291/8606/screenhunter1507mp.jpg
Posted by: R. Flink on Oct 12, 2005 9:48am
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
Posted by: BLOGGY on Oct 13, 2005 5:25am URL: http://mike-wilson.net/blog/index.php?/archiv…
"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 on Oct 17, 2005 1:34pm URL: http://rorexrobots.com/flash
http://home.anet.net.tw/danco/other/mike.jpg
Posted by: killme on Oct 17, 2005 10:19pm
Where is it possible to get the sourcecode for your gooifyer?
Posted by: Eik on Nov 10, 2005 3:58am
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
Posted by: jeihan & sarah on Dec 31, 2005 4:29am URL: http://http:www.hotmail.com
How do you expect us to get any work done?
Posted by: Erkan on Jan 23, 2006 3:28pm URL: http://www.siirci.net