Inspired by Jack Kerouac by Ritator, it reminded me of the headers that I used to build for this site. I would take one of the local news’s webcam shots and slice a full height, single px wide segment and then let that repeat for the full width of the header. Simple and effective. The thing that I though was really neat about it was that I could start to tell what the weather was like just by the colors in the image. If it was mostly grey, it was likely raining.
That’s all well and good, but I hung that chunk of code out to dry so long ago, could I re-vive it? Was it even worth finding? No, why bother, start from scratch and make something else with the same idea. For example, this time around lets play with javascript.
Work has me playing with jQuery and I soon found pixastic, stitch them together and TADA you have a little image toy.
(if you want to play you’ll likely be happier playing with out the bounds of the iframe: go here instead).
It’s not a hard problem, I find a random 5px vertical slice and blur the image and then stretch it to the original dimensions. Some images result in more interesting results and the random factor has it’s ups-and-downs.
Just drop the URL of an image in the box, hit ‘GO’ and see what you get. It took me a while to get to a point where the ‘next’ call would clear out the created image. So far the hack I have in place has nasty side-effects. If you click ‘Go’ twice, it clears the image, like it should. But because the original img didn’t re-load the ‘load’ even is never fired thus the second image is not built. We’ll see if I fix that tomorrow or not.
UPDATE: the ‘Go-twice’ bug has been resolve, but it’s done in a rather crude way (I just do the work twice). Also I’ve added a marker on the original image that shows where the second image is built from.
Well hope you have as much fun playing with yet another toy I’ve built, as I had building it.


