From the end of this week, the domain name digitalspaghetti.me.uk will no longer exist.
For various reasons I have chosen not to continue using it, and from the beginning of next week the URL will revert back to http://tanepiper.posterous.com
Anatomy of my #js1k Submission - Raindrop ripple on a Gradient (#1kjs)
Yesterday I saw that the JS1K competition was running and since I've been doing a bunch of JavaScript stuff recently I thought it would be a good time to have a go and create a submission.
I'm not a hugely creative person so I decided to do something that I thought would be reasonably simple and after looking for some inspiration I came across a canvas implementation of the Raindrop ripple effect that I decided I could probably implement in less than 1Kb.
As of now I'm on the third forth version of my submission which you can see below:
As the rules state that you cannot use external media such as an image so I had to generate a gradient background to have the effect work. You cannot see the effect on a solid colour - and you can also see this - or not see this - on a gradient that has too may similar colours. In the current version you can also click on the canvas to change the gradient.
After running the code through the Closure compiler the current code is reduced to 1021b 996b, within the limit - and I'm sure there is more I can do to optimise the size and speed. I have until the 10th of September to try do this. You can checkout the unminified here.
Along with optimisation, there are a few bugs I could fix.
I have found is that it actually takes a lot to compute the visualisation - running the code takes up between 25-50% of CPU on my dual-core 64b PC, depending on the browser. There is a very heavy for loop that I have optimised as much as I can for now by doing a reverse-forloop (-- instead of ++). I also have to limit the canvas to 200x200, any larger and it runs a hell of a lot slower.
In running this, Chrome and Opera definitely lead the browser pack, followed by Firefox. Safari also seems to be the slowest but I'm going to assume that on Mac hardware it isn't as bad as on Windows 7. But if anyone with a Mac can confirm this I'd be happy to hear
Another issue that has cropped up is Firefox's implementation of the Canvas tag. Due to an issue with the bounding area of a canvas tag in Firefox, I get the following error using the canvas context method putImageData.
- An invalid or illegal string was specified" code: "12
From searches on Google it seems I'm not the only person with this issue. As of now I have not found a proper fix for this except to wrap the line in a try/catch and drop frames for now. (Update: Seems this is a know issue. There is a test suite in that bug report that works fine on Chrome/Safari/Opera but breaks on Firefox. This is currently being fixed)
One final issue is there are orphan pixels left if you keep the canvas running for a while - I need a way to garbage collect these.
While I'm happy with my submission, I'll admit it certainly not the prettiest. Check out some other submissions I've seen that I really like:
Rockstar Programmers
Today, after reading this, I asked a question of why people like Joe Spolsky and Jeff Atwood get such a following when they are actually not very good coders in general. This was the best explination I got:
"If there was a badger loudly dying in your backyard you would probally go out and watch it."
