green, cartoon

Jigsaw: A 10K Web Application

As a side project I am working on an entry for the 10K Apart competition which is due quite soon so I will not talk about it much yet since I still have work to do.

Start at, enter a Flickr tag and press the Next to get button to one of Flickr’s most interesting photos with that tag. Then press the Jigsaw button to see a jigsaw made from that picture. The jigsaw pieces will snap together when you bring matching pieces together, and you can then drag the hunks of puzzle around as you work out where they belong in the finished picture. The trick is you don’t know what it will look like until you finish the puzzle!

If you like, you can enter an image URL of your own. Animated GIFs will work on some browsers, which is moderately amusing.

This game requires support for SVG and JavaScript in your web browser. Tested in the latest Apple Safari, Google Chrome, Opera, and Mozilla Firefox. Testing in IE9 pending!

If you want to gaze upon the un-minimized code, it is available on GitHub.

Update (23:30): You now switch between entering Flickr tags or specifying the picture URL rather than having to go through two steps.

Update (24 August): My Jigsaw is now entry #169 on the 10K Apart site. If you would like to vote for my entry I would really appreciate it!

Update (1 Sept.). I have given it its own micro-site, and written a couple of blog posts about it
I have changed it to blow up images that would other wise be less than half the size of the arena.

All the pieces clustering in the top left is a problem I had with Firefox for a bit. It was caused by Firefox reporting the size of the arena as being 0x0 pixels. I thought I had fixed it though. :-(
Just had it happen again, although I couldn't then reproduce it. (I'm using FF 3.6.8.)

Any particular circumstances of suspicion I can test around?
Oh, and: does it similarly shrink gigantic images to fit? Couldn't quickly find one to test with.
It shrinks down giant images to just fit within the arena. I get the impression that scaled images make the drqg & drop even more sluggish, however.

When you use a Flickr tag, it chooses the largest image Flickr supplies that fits within the arena.