God bows to math

Ever wondered how to draw a Fibonacci spiral using only CSS and JavaScript? Well, wonder no more. If you want to change the amount of the spiral that’s visible, add a parameter ‘scale’ to the URL. Well, it’s actually an approximation to a spiral made by drawing sections of circles, but who’s going to notice? (Fibonacci number generator found at LiteratePrograms.)

Here’s a simple logarithmic spiral. Change a and b in the URL to alter its appearance. It becomes quite dull as b approaches 0. Update: try pressing the cursor keys while looking at the spiral. Negative values of b are kind of fun.

Judge for yourself which of these spirals best represents a nautilus shell.

CSS magnifying glass 2

We’ve now rolled this out across the National Maritime Museum’s collections pages. I think it looks rather nice.

There’s an example page on this site, using one of my photos from Flickr. It fixes an annoying bug in Opera, which doesn’t fire onload events for images loaded from the cache. Consequently, the setup code never ran in Opera, meaning the ‘zoom on/off’ link never did anything. Until I discovered the magical img.complete property. I’m not sure it’s a standard DOM property for images, but it does the job. Opera users can now enjoy the rich JavaScript goodness, rather than looking enviously at the users of web browsers which actually work.

I’ve added keyboard support, since device-independent control is a AA accessibility requirement*. You can focus the control with the tab key. While it has focus, the cursor keys move the magnifier, not the browser window. Shift+cursor keys move it around faster (thanks to Dan Champion for suggesting that improvement).

It supports simple, inline HTML in the popup notes now too – basically, embedded images, links and simple text formatting. I can’t decide if it would be neat, or just plain annoying, to have a note that played an embedded audio clip when it appeared.

The Museum’s trustees are very impressed by it – go me!

*Wouldn’t voice control be cool? Like that bit in Bladerunner where he examines the photo of the bathroom – “Pan left. Stop. Enhance.”

CSS magnifying glass

Had a chat at the War Museum last week, in which we talked (among other things) about the difficulty of making large paintings available in detail over the web. This afternoon I knocked together a quick magnifying glass, using CSS and the DOM-Drag javascript library. The code behind it is pretty crappy at the moment (it’s a rehash of the magnifier I wrote about 4 years ago) but I think it looks promising: The British Power Boat Company.

No division

I haven’t posted a music video for a while, so here’s a rousing anthem from my current favourite band, Hot Water Music. Perhaps it’ll go some way towards cleansing my brain of Celine Dion’s truly awful cover of You Shook Me All Night Long. There are dark, nameless horrors lurking in the hidden corners of youtube, ready to catch the unwary.

Here’s some more HWM. I saw ’em live in Camden just after they released No division. They were ace.