All posts in: Blog

Continue Reading header image

Quick tip: Shaders in Sublime Text

Sublime Text is my favorite text editor and here’s a quick tip if you’re working with shaders in three.js. I prefer to store my shaders as a separate file. And to do this in the same way as three.js all shader code must be enclosed in quotes and comma-separated. Enter this in the search and replace boxes in Sublime Text and you have a quick way to prepare your shaders for three.js: Note the ‘regular expression’ button must be active.

Continue Reading Screen Shot 2015-03-18 at 08.59.39

What is projection mapping?

As Wikipedia states in their definition of projection mapping: “Projection mapping, also known as video mapping and spatial augmented reality, is a projection technology used to turn objects, often irregularly shaped, into a display surface for video projection. These objects may be complex industrial landscapes, such as buildings.” With projection mapping one can create interesting visual effects even optical illusions that make the static surface seem to move. Also an important aspect of the experience is the audio that complete the illusion. Many people have seen impressive examples such as this one on a clock tower A number of tools exist that aid with the projection mapping. Madmapper, Blendy and TouchDesigner to name a few. These tools help the aligning of the video projection to fit onto the surface. A list of projection mapping software A mapping tool is not enough however. One will need to prepare graphical content especially […]

WebGL experiment: Expose line drawing

Here’s a WebGL demo I made – when you click the canvas a hand drawn image slowly appears. Try it out: The effect is achieved using a shader based technique called reaction diffusion as a mask over the image. The reaction effect ‘feeds’ on the line drawing and gradually spreads as far as possible following the black lines. My code builds upon an example by pmneila.

Continue Reading syphon

Syphon into the web browser

Yes apparently we can have a Syphon input into the web browser. It is a workaround done via Quicktime. So it has some limitations. The biggest limitation being that we can not use the Syphon input as a texture in WebGL. When I did this I prepared a Syphon client in Quartz Composer and converted it to a Quicktime file. Then I put it into my webpage like this: <embed width=”400px” height=”300px” name=”plugin” src=”file:///” type=”video/quicktime”> It does seem that we can put CSS filters on the Quicktime element which I hadn’t expected (tested in Safari and Chrome). Like this: <head> <style> .filtered { -webkit-filter: hue-rotate(230deg) saturate(300%) blur(6px); } </style> </head> <body> <embed class=”filtered” width=”400px” height=”300px” name=”plugin” src=”” type=”video/quicktime”> </body> I have also tested the awesome up-and-coming CSS custom filters feature but it does not work on videos or embedded content – yet. I have a hope that when it is […]

Continue Reading here-com

Live online remix of the maps at

A remix could be many things but in this case the word refers to some modifications I made to the maps at in realtime using the Node-Webkit framework. Like this: What you see on the right is a screen-shot of the live and navigable application at but interface elements have been removed and the whole maps has received a colored tint. In other words it’s possible to modify and change the look and functionality of a live website without copying it to another server or hack the server on which the website resides (don’t do that, kids!). I made the modifications using simple html and javascript which modifies the website when viewed in my own browser – or in this case a specialized application made using the Node-Webkit framework. In this video I demonstrate how the modification works: Background As a part of my work with Obscura we […]

Continue Reading webgl01

Getting started with WebGL

Here’s the thing that takes up my spare time right now: WebGL. For me with my web developer background (PHP, javascript, .NET) and my growing interest in realtime 3D graphics it’s so obvious that I can’t believe I haven’t played around with it before. The good thing is that at this point there are plenty of resources for those who want to learn and that it has been implemented in a stable way in some major browsers. The downside is that it’s not an obvious choice for VJs as it does not integrate with VJ apps. But I’m sure tools will appear over time to overcome this. Just have a look at some of the mind-blowing visual possibilities WebGL brings for visualists: Lights Blast Often when delving into a new programming environment the hard part comes right at the beginning when you try to get a grasp of the […]

Continue Reading beat01

Finding the right beat

At those (admittedly few) occassions when I VJ alongside DJ I have often wished for a tool that would detect the tempo of the music for me. The more I searched for a Mac based solution the more I realized there is some pretty complex music analysis behind beat detection and that few or no freeware tools existed. Vj apps seem to have settled on a tap-the-beat solution and most of the existing BPM detectors are not real time as they only operate on prerecorded audio files. Then someone posted a link to this ingenious little app in the Modul8 forums and I have been using it ever since. It picks up the beat after a few seconds and it’s pretty accurate – as long as there is a steady discernible beat to the music of course. Waveclock You try it out in demo mode (and click away a dialog […]

Continue Reading qlab01

Using cues, timelines and VJ software for performances

These days as a part of the Obscura crew I am ofting doing visual shows that have more in common with theatre productions than traditional VJing. Often there is some sort of script for a show or a piece of music that is rehearsed. For these types of jobs I have found good use for the application called QLab which is great for triggering a pre planned sequence of events. Actually the whole point of QLab is to line up a sequence of audio, video files or other types of events and being able to trigger them with a simple ‘Go’ button at the exact right time during the show. QLab was originally developed with audio in mind and has later been extended with video features so it does not have many features as VJ applications when it comes to live manipulations of images and video. But for those of […]

Using Unity3D for mapping

The above video documents a recent project Obscura did. Actually I was mostly on another project at the time but I followed with great interest the work that my colleagues Frederik and Kasper did here. For all of us this installation was a learning experience in using Unity 3D for mapping onto a spherical object. It took a bit of trial and error but Frederik and Kasper decided to make a workshop out of it instead of worrying too much about the finished result. They ended up with these little creatures created in Open Frameworks which were piped into Unity 3D via Syphon. They then made a Unity app for mapping onto the sphere. A regular 3D mapped rendering would not do here, as the small boids react to the presence of people in the room via a motion tracking camera. Using Unity went resonably well – it has a […]

Continue Reading modul8-01_out

Developing visuals synced to a music composition

Recently I have had the pleasure of working with Linda Edsjö a classically trained percussionist and composer Simon Christensen in developing visuals for a piece of modern compositional music. The project was unusual for me as we decided to try to connect the visuals computer with the computer that was running the musical backing track. That way it was possible to obtain a perfect sync  between music and image. The music was composed as a piece in the Max/MSP software and this was linked to Modul8 (the visuals) through midi. The music software was sending midi on every beat and another midi signal whenever the music entered a new section of the piece. To achieve the result I wanted I had to program two small modules for Modul8. These modules were in charge of turning layers on and off, applying effects and switching between images. Excerpt from percussion concert 7 […]