I picked up a particular fondness for ray-tracing during my University years while studying Computer Science, majoring in Computer Graphics. Ray Tracing is quite a simple idea which produces quite impressive results with relatively little work.
Ray-tracing is a very intensive algorithm. Abstracting the maths away a bit, it basically casts a ray (yep, hence “ray tracing”) over the scene (a collection of shapes and lights all represented in 3D space) for every pixel of the image, bouncing the ray around the scene multiple times as it hits objects (this is how reflections work, etc).
As I said, the main point of this exercise was to learn more about the Canvas element. If you want to learn more about Ray Tracing, there are a number of great resources on the the net.
The canvas element has a pretty simple API: simply get the 2D context and render to it. I was thinking of documenting my usage of it, but it’s already done so well on other sites that I figure I’ll just link you off to them to learn more.
The Flog.RayTracer in action
If you’re really keen feel free to go ahead and download the ray-tracer. It’s probably very buggy (I know of a couple of big ones already), but it’ll give you hours of fun trying to fix it.