Raymond Camden's Blog Rss

Friday Challenge: Cut and Randomize a Picture

24

Posted in ColdFusion | Posted on 08-07-2009 | 3,701 views

Been a while since I posted a challenge, and today I had a good idea for a new one. Given a source image, divide the picture into 100 squares, and then paste these squares into a new picture in random order. This will create a mixed up version of the source image. You can assume a decent sized image (minimum of 200x200 pixels). Post your solution, and if you can, URLs to some sample output. As one hint, don't forget ColdFusion has the ability to paste images into canvases.

Comments

[Add Comment] [Subscribe to Comments]

todd sharp said on 08-07-2009 at 8:12 AM #
I'll give 10000 bonus points to whoever uses an Ajax library to make each square draggable so you can 'solve' the puzzle after it's jumbled....
Mike Hodgson said on 08-07-2009 at 8:54 AM #
Here's my first attempt!

http://209.200.68.149/imagetest.cfm

Yes, I'm using the free CF9 hosting graciously provided by CrystalTech :)

Will link to the code from the same page, once I get it cleaned up a bit :)
Kumar said on 08-07-2009 at 9:12 AM #
Demo:
http://209.200.68.148/image.cfm

Code:
<cfimage name="imgGlobe" source="globe.jpg">

<cfimage source="#imgGlobe#" action="writeToBrowser" >
<!--- Destination Image --->
<cfset imgC = ImageNew("",400,400,"argb")>

<cfset imgA = imgGlobe>
<!--- Loops will create our 100 squares --->
<cfloop from="0" to="360" step="40" index="x">

   <cfloop from="0" to="360" step="40" index="y">
      <cfset imgA = imgGlobe>
      <!--- Get the Image Area square --->
      <cfset imgB = ImageCopy(imgA,x,y,40,40,x,y)>
      <!--- Paste the image to our destination --->
      <cfset ImagePaste(imgC,imgB,y,x)>
   </cfloop>

</cfloop>

<cfimage source="#imgC#" action="writeToBrowser">
Raymond Camden said on 08-07-2009 at 9:24 AM #
Wow, both of you, cool!
todd sharp said on 08-07-2009 at 9:27 AM #
I give Mike +200 points for creative use of 'Shuffle'. But seriously, nice work guys!
Kumar said on 08-07-2009 at 9:48 AM #
Agreed, Mike's solution is better.
Steve Caldwell said on 08-07-2009 at 9:56 AM #
Todd, can I get 1000 points for being a Google ninja? :p

http://www.bennadel.com/resources/demo/jquery_puzz...

I created one with my own image, just don't have public facing CF space.
todd sharp said on 08-07-2009 at 10:09 AM #
@Steve - yep, i'll grant you the 1000 points for that - nice find. And 5000 to Nadel for putting that together.
Rob O'Brien said on 08-07-2009 at 11:17 AM #
Mike wins instantly for the use of a Hasselhoff cover! http://www.youtube.com/watch?v=x20v9F-sWHQ
Matthew Abbott said on 08-07-2009 at 11:41 AM #
I took Mike's code and attempted to add some jquery to sort the pics.
http://www.coldfusionjedi.com/demos/maimage/
Thanks Ray for graciously hosting this.
todd sharp said on 08-07-2009 at 11:44 AM #
@Matthew - that's awesome!! Hard as heck too!
todd sharp said on 08-07-2009 at 11:46 AM #
@Matthew - it would be *really* cool if i could ctrl+click several tiles and move them all at once... doable?

I'd also love to see a blog post written up on how you did it (I know I can view the source, but I'd still like to see a write up).
todd sharp said on 08-07-2009 at 11:47 AM #
Wait a second...

$("#sortable").sortable();

That's it?!
Raymond Camden said on 08-07-2009 at 11:50 AM #
re: todd and sortable:

yes, the jquery ui library kicks ass.
Matthew Abbott said on 08-07-2009 at 12:10 PM #
@todd Im probably the ONLY guy that doesnt have their own blog!
Cody said on 08-07-2009 at 12:35 PM #
Is it required to use ColdFusion?

I tried it with HTML 5 and JavaScript/jQuery.
http://www.codymarquart.com/projects/image100/
Raymond Camden said on 08-07-2009 at 12:37 PM #
Normally it is required, but you get a pass since it's jQuery. ;)
todd sharp said on 08-07-2009 at 12:49 PM #
Would you believe that your HTML5/jQuery version works properly on FireFox 1.5 (don't ask...)?
Jason Walle said on 08-07-2009 at 1:01 PM #
I'm a first timer at the challenges...

http://code.project924.com/img-functions/cut-and-r...
Leigh said on 08-07-2009 at 1:27 PM #
@Todd,

You have got to be joking .. a one liner? Damn. That _is_ awesome. Hats off to @Mathew.

@Mike,

(Despite the Horrible Hasselhoff cover ;-) Great work!
Chris Ulrich said on 08-08-2009 at 9:03 AM #
Wow, you guys kicked butt on this one ...
Here's my attempt .. makes me feel old school !

http://www.drg1.com/challenge.cfm
Raymond Camden said on 08-08-2009 at 9:07 AM #
I must say - I am incredibly impressed by the source pictures you guys used.
Bjarte said on 08-13-2009 at 12:57 PM #
Why not use html5 canvas? ( ok I know it said 100 squares but I did not bother editing the image in paint)
http://bjarte.dev.inbusiness.no/canvas/index.html
Raymond Camden said on 08-13-2009 at 2:36 PM #
Slick - of course, it's going to be a few years before we can use that. ;)

[Add Comment] [Subscribe to Comments]