So lately I’ve been wanting to make another semi-interactive piece that goes into the feeling of a city so to say. Especially the way these mammoth skyscrapers dissapear behind one another as I’m walking through it. But in order to be able to hook up sound to these movements I wanted to have a visualization that I could use to set up the skyscraper environment. Now a while ago I backed this game from developer Nicky Case called Nothing to Hide. It’s entirely built in HTML5 and, although it’s not done yet, sport some well done visual effects. One of these effects for light and sight is accompanied by a very nice explanation (located here ). Now raytracing would also be very useful for determining which buildings are ‘visible’ (if only auditory) to the listener so I set out to mimic the technique in processing 2.0 and see if that would show promise. The reason I’m going for processing is that I know it has a library for control over Supercollider, which I intend to use for the audio, and it’s just a very straightforward environment. And I also found out how to implement processing sketches on websites using processing.js (and website).
So after figuring out how the raytracing worked in general I ended up with the result below. The rays at this point are aimed randomly but the principle is there.
After following the advice of aiming the rays directly at the corners of the shapes the result became much cleaner. Still it’s quite jittery and glitchy.
After rewriting, checking and cleaning up the code (which is never wasted effort) I found out that the jittery effect was simply the result of the raytracing function being called before the update function was called on the rays. Thus the raytracing was constantly working with ‘dated’ data and becoming jittery.
So for next time I want to fully finish the processing sketch such that I know which portions of which buildings are visible and can send this data on to Supercollider.
(small final update, with possible buildings and a mask (as talked about in Nicky Case’s explanation), I used a java sort to sort the rays based on their angle and create a mask between the points where they hit the shapes.)
second update: So apparently the mask is not working in processing js and I suspect it’s because of the java sort. I will try to *sort* it out and see if I can get it online.