A straight copy of this: Image Manipulation with HTML5 Canvas: A Sliding Puzzle - SitePoint with the addition of a random flickr photo tagged ds106 (supplied by a php file json from flickr). I changed the js just to put the boardSize and TileSize calculations inside the drawBoard function to deal with non square images. riffing off Jim Groom Wrapped Up Nice by aforgrave No error checking...we codejam econo.
In response to The Daily Create is one year old! Share a photo of a gift you have for us I posted this: ipod-ds106 and saw Jim Groom Wrapped Up Nice by Andrew Forgrave.
I google for a slide puzzle and found Image Manipulation with HTML5 Canvas: A Sliding Puzzle - SitePoint it was easy to make first, Ds106 Slider a straight copy.
Then this one which just uses a wee bit more JS to get a random flickr photo and a simple edit to 'crop' the found image square (hence the occasional undersized one).
So I didn't learn much in the first pass or two but for the final one I reviewed the flickr json stuff getting a slightly better handle on json (long way to go) and in cropping the photo I had to read and understand a bit of the original code to edit it.
I think this is quite a good way for casual scripters to learn JavaScript.
Notes prompted by A conversation with Audrey Watters about Web Literacies. | Doug Belshaw's blog