Tane’s Mental Mindstream

For when 140 characters just isn't e.......

Tane Piper

Misanthrope; Developer and general hater from Edinburgh, Scotland.

I like to make web applications with Django + HTML5/CSS3 and dabble in Android stuff as well. I also do PHP, but I really don't like to.

I like to post really random stuff

             
 

Domain going down

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

Posted
 

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:

Posted
 

What a lovely day to go to Fife

Posted
 

Stupid cat is stupid

(download)

Posted
 

It's raining as hard as your mum likes it...


Listen!
Posted
 

Not had these in years..

NOM NOM

Posted
 

This is just a random first bootest


Listen!
Posted
 

Testing HD video posting on Posterous

(download)

Sent from my HTC

Posted
 

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."

Posted
 

In other news...I Quit my job today

Posted
Theme by Cory Watilo.
More great Posterous themes at themes.posterous.com.