Red Worms
11th of March 2010Made this a few weeks back.
Dynamically including Github code
12th of November 2009I like writing code, and sharing it.
Often I want to post a snippet here or on another website, to illustrate a point or to share a cool trick. But pasted code is dead code - real living code changes, and short of going back and repasting, the code on the web quickly becomes out of date.
So this is a little snippet I whipped up to dynamically (by the wonders of cross-site ajax) load code from a github branch. This means, when you update the git branch and repush, the code will update.
Here it is, bootstrapped and ready, and completely up to date.
Code available at http://github.com/peterbraden/peterbraden.github.com/blob/1ca083ed7890f5bc0d8b5555548a853ca2e6d420/github-code.js(Standard disclaimer applies - untested on IE, YMMV. Hack at will)
Visualizing music with <canvas>
17th of September 2009Despite a week of meetings, interviews and uncertainty as to where I would be sleeping at night, I managed to get a little coding done this week. Continuing my experimentation with HTML5 and in particular the canvas element, I decided to write a little graphic equaliser.
I'd hoped to use the new audio element, but unfortunately the API is extremely limiting and as far as I can tell, there isn't a way to get access to the audio data in javascript. Luckily, there's an awesome library called SoundManager which provides an interface to flash's audio capabilities in javascript.
So this demo does use flash, but all the rendering is done in canvas. It's pretty CPU intensive, but a nice demo of what's possible with canvas.
The music is a recording by my good friend and ex-flatmate Marcus Phillips from his upcoming album Thirst and Burden.
As always, this has been tested in modern browsers, but won't work in IE. Also you'll need Flash 9 or above.
Distributed Raytracer
23rd of August 2009I'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.
Tracing Rays
20th of August 2009I 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.
Photography
Recent Writing
Subscribe
Like what you see?
Subscribe to the RSS feed and be notified whenever there's something new…
