PeterBraden.co.ukArticles Tagged "code"

I've just released the project I've been working on for the last few days. It's a collaborative raytracer, based on my new between-browser map reduce system.

It's still young, but have a play and tell me what you think.

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

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.

About

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.

So following on from yesterdays Call of Duty text effect, I had a little play around with the new Google Maps API. Here are the results - a little pointless maybe, but whatever.

Like a lot of my experimental projects, this is not thoroughly tested (works in Firefox 3.5), and almost certainly won't work in Internet Explorer. Use a proper browser.

I don't play a lot of video games, but my brother does, and every now and then I get hooked on one of his games. This afternoon I completed Call of Duty 4, which is surprisingly engrossing — shooting people in the head is quite addictive.

One of the things I liked most about the game was the visual experience of the briefing/loading screens. The designers have used all the typical elements that have become associated with this spy/military thriller genre — the aerial maps, wire-frame fly-throughs, mountains of irrelavant data. All the cliches are covered.

One particular effect that caught my eye was the fade-in/fade-out on the name of the level. It seemed very reminiscent of Bourne Identity/24. I thought I'd give a go at recreating it in javascript.

Here's the code — I've wrapped up the fade-in into a jquery extension:

$.fn.stealthIn = function(callback){
	this.each(function(){
		
		var content = $(this).text();
		$(this).text("").css({
			'color' : '#9f9',
			'text-shadow' : '#0f0 0px 0px 5px',
			'font-family' :"Bank Gothic"
			}).show();
		
		var i = 0;
		var j = 1;
		var x = $(this);
		var t = setInterval(function(){
			var cont = x.text();
			
			if (j==3){	
				x.text(cont.substr(0,i) + content[i]);
				i+=1;
				j=0;
			}else{
				x.text(cont.substr(0,i) + String.fromCharCode(
					1072 + parseInt(Math.random()*20)));	
				j+=1;
			}
					
			if (i == content.length){
				clearInterval(t);
				if (callback){
					callback();
				}
			}	
		}, 20);
		
	});

}


// Use it like:
$("#some-element").stealthIn();

And here's a live example:

You'll only get the full effect if you have the font "Bank Gothic" on your computer - which I believe is bundled on a mac. Sorry PC users!

Some more <canvas> experimentation. Basic pong rules, but the AI should improve as your score increases…