Prototype /

Virtual Urban Prototyping

Design media architecture remotely and validate options before implementation

Prototyping a media architecture design solution, such as a digital facade, community LED wall or responsive sidewalk, means implementing enough of it to allow it to be tested by stakeholders and potential users. In doing so, designers can more confidently evaluate what it means to experience solutions in real life, and thus how appropriate they may be, reducing risks and costs of development and implementation. However, by its very nature, media architecture poses two big challenges to prototyping. First, it presupposes access to the target urban location and its infrastructure, which may not always be logistically practical, safe or even legally allowed before the solution reaches a certain level of maturity. Second, evaluating different options in situ may be too costly, particularly when comparing a range of choices for hardware, scale or placement of media within the city.

Virtual Urban Prototyping (VUP) involves the simulation, exclusively via software, of media architecture solutions for an urban space. Approaches can vary from the very simple to the highly sophisticated, depending on skills and resources available. In its simplest form, for example, it can be achieved merely with a photo or 2D digital representation of the target site, which can then be loaded as the background for an interactive code sketch—for example, in Processing or JavaScript—and overlaid with interactive graphics or animations. More advanced approaches may involve interactive 3D models of the media architecture, potentially accessible online. General steps include problem definition, platform selection, implementation, testing, analysis and recommendations.

The advantage of this approach is to enable the testing of interactions between humans and digital media in the built environment, which are often difficult to assess otherwise. As such, VUP can be highly useful for at least four reasons: (1) it allows specific elements of the solution to be tested, swapped, tweaked or combined in different ways without too much effort, in a safe and affordable way; (2) it can be particularly effective for identifying and eliminating unsuitable approaches early on in the project, thus helping narrow down the array of possible solutions; (3) it can assist with futureproofing a solution, by simulating options perhaps not yet entirely viable at present but which could eventually be scaled up; and (4) as the software can be distributed across members of a team, it allows for remote collaboration during design and testing. On the flip side, VUP’s main drawback is that the user lacks the feeling of being immersed in the city, subject to all its spontaneous elements. As a result, VUP can only offer partial impressions into what the media architecture solution may actually feel like at the target site.

VUP should be used by urban interaction designers, product designers, artists, architects, urban planners or managers of media architecture projects. By offering a convenient way to ‘mix and match’ design elements and progressing through iterations of the design solution, VUP can be a powerful method to justify concepts, equipment and budget figures, as well as supporting decision-making, both prior to a proposal submission and during the early stages of design and development.

Method Steps

1. Open the projection mapping simulator:

   • Navigate to the vup_01_projectionMappingSimulator subfolder.

   • Double-click on any file with a .pde extension (indicative of Processing code files).

2. Install the required Processing libraries:

   • In the top menu, go to Sketch / Import Library / Add Library.

   • Once the Contribution Manager opens, enter Keystone in the search bar.

   • Select the Keystone library by David Bouchard, and then click the install button.

   • Once the installation is completed, go back to the search bar and enter Syphon.

   • Select the Syphon library by Andres Colubri, and then click the Install button.

   • Close the Contribution Manager window.

3. Run the projection mapping simulator:

   • Click on the play button to open the simulator.

   • The simulator opens as a window displaying the image of a building.

   • (Optional) Press the c key to enter the projection surface customisation mode.

4. With the simulator running, run the interactive animation to be ‘projected’:

   • Navigate to the vup_02_interactiveAnimation subfolder and open any file.

   • Run the animation by clicking on the play button.

   • Move your mouse around the animation window.

   • See the circle ‘projected’ on the building facade in the simulator.

5. Close the animation window and repeat the steps above for the video (vup_03_video subfolder) to see its simulated projection.