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 http://jigsaw.alleged.org.uk/, 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, http://jigsawr.org/ and written a couple of blog posts about it
We tried it again yesterday
And even since then, trying again this morning I can see the improvements. Yesterday eve the pieces were all lumped together on top of each other, though the debug messages had gone by that time. Today it looks pretty good! NB the Hard setting is a bit too hard to do in a normal browsing in front of the computer session, I think. Not saying it needs to be changed, just a comment...
A nice ap, but my jigsaw is missing a piece! I've moved the block of completed pieces around all over the play area, and the last piece is really not there. Unless this is a deliberate joke on your part, that some jigsaw's are missing the last piece?

The initial screen is a bit confusing - this is a minor matter, but given how nice the actual ap is, it would be good if the start screen was easier to use and didn't need me to go back and read your instructions. A bit of hint text would help, and maybe put the "Jigsaw" button on its own at the bottom to make it clear that it's the main action button, and only enable it if there is a URL in the necessary field.

The jigsaw is easier to do than a real one, because the pieces are all the right way up. I doubt it's worth adding a "rotate" however, it's fine as it is.
There really should not be any missing pieces! At least if there are then that is a bug.

I have been trying to think of a way to make the front page a little more obvious, but only have a few hundred bytes left out of the 10K!
Just tried again - all pieces present :)

You are probably out of code, but a message when you've finished the jigsaw might be nice.
That looks amazing for 10k (though after I did a bit of research to see just how dated the books I'm getting rid of are, I've no idea how rich the JavaScript library is these days i.e. how much need hand-rolling).
We are allowed to use the jQuery library (without its counting toward the 10K) and that helps a bit.
It's put all the pieces on top of each other in the top left corner again - annoying. Also I preferred the smaller size pieces in the larger frame - it gave plenty of room to play with for moving pieces into the right place.
Seeing this for the first time this morning, and it looks really good -- I didn't see any of the problems mentioned above, and the interface seemed intuitive.

Ah, just tried it for the second time, using my own url rather than a Flickr tag, and all the pieces were piled up in the top left. Oh well.

I chose a very small image, and the resultant jigsaw was also very small. Might be good to rescale to a sensible size, if you have the bytes left to do that.
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.
Peter from OCC - IE9 Test result
(Anonymous)
Hey Damian!
Check your work email address - screenshot attached just before the last piece of the jigsaw is placed;

I tried it on IE9 Preview 4 and it worked great.
Re: Peter from OCC - IE9 Test result
Thank you so much for testing this for me—I figured it would probably work given the whole point of the contest is to show off their web-standards implementation but felt I ought to check just to be sure. :-)