I like coding. In fact I like it so much that every now and then I make something completely pointless and yet quite cool. That way it feels more like art and less like business.

So without further ado:

Javascript Raytracer

This only works in a modern browser that supports the <canvas> element. For example Firefox 3.5+, Safari or Chrome.

The raytracer is pretty processor intensive - I recommend you run it in Google Chrome which has the fastest javascript engine I've found. Also tested in Firefox/Safari. Will certainly not work in IE.


I've always been interested in Ray-Tracers - I spent hours playing about with Povray back in high school — the idea that you can make such realistic pictures algorithmically fascinates me. I've started writing a couple of my own over the years, but always shelved them around when I hit a nasty vector issue.

Vector maths is tricky.

But when I opened up my text editor this morning to play with the canvas element some more, I knew that something big was in order, bigger than pong, bigger than tetris. I was going to write a ray-tracer in the browser in the canvas element.

And 8 hours later it's done. Nothing revolutionary, but satisfyingly realistic.

View the page source to check out the code - there's only about 200 lines of it and it's pretty simple to follow. It's simple Phong shading on sphere and plane primitives.

I had originally planned to distribute the computational load between multiple browsers using a cross-browser map-reduce. But I think that's a project for another day.

I'm not the first to make a canvas based ray-tracer. It seems there's other people who like pointless code too.