Starting work on a “live world” projection

Following on from the VIDA win, we need to work hard on Naked on Pluto’s gallery installation presence. Although we now have the news website style front page, we need to take the game externalisation to another level, and one of the things required is a realtime projection of the game world. This represents the unfiltered behind-the-scenes view of the game as seen by the bots as they attempt to keep track of what is going on. Technically we decided to do this work using HTML5 canvas, in keeping with the web based themes of the game it needs to work on a browser, which has the added bonus of making gallery setup quite simple.

My first approach was to write a scheme bricks representation for Javascript objects, and see how bits of the game looked if rendered in this way.



This is part of the ArrivalLobby, and all the internal information is present with no explanations, which is great, but it results in very large images. The next thing was to try filtering the objects to remove most of this information:

function node_filter()
{
    this.filter=function(obj)
    {
        return {objects:obj.objects.map(function(object) {
            return object.name;
        })};
    }
}

This code provides a single method for filtering locations in the game – it simply returns an object consisting of a list of names of things found at that location. These filters can be easily changed over time, to include different information or process it in different ways. Rendered with the same code as before, this makes the location diagrams much smaller:

Add a few more locations, put them together in a circular formation (the projection will be onto the floor space in the gallery), add some bezier curves to indicate paths between locations and it looks like this:

There is also some relatively complex jiggery-pokery to detect when bots have moved from one location to another and animate them. The moving bots display more detail including what they are wearing and who has ‘liked’ them. In this image you can see the AdverBot004 moving to the HelpDesk, and the HyperClock and GreenwichClock on the upper right as they move from the Palace Garden.

Leave a Reply