All posts by: Udart

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 […]

New interactive browser based music video

“Valley Of Uncanny #01″ is an interactive animation with music by Zack Christ that explores the relationship between visual and musical rhythms, glitches and distortions. The animation is a part of a series of different virtual sculptures I made of human bodies and faces. Often in games and 3D art the human body is idealized into sexy or heroic archetypes but in this project the two heads are distorted and glitched in ways that create more unfamiliar expressions that sometimes dissolve into pure absctract shapes. The animation is created in WebGL using the popular library Three.js and in order to precisely control the progression of the visuals multiple tracks of keyframes are loaded into the application in order to control animation parameters in sync with the music. The piece is an adaptation of some of the material, that I also use when I perform live as a VJ at concerts. […]

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: http://udart.dk/webgl/expose_line_drawing/ 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.

Introducing Sliider – VJing with a web browser

Sliider is a simple yet usable application I’ve created for VJing with webGL and other interactive web based graphics. It works on Mac OSX, Windows and Linux. I am releasing an early preview version that has these features: Embedded Chrome browser. 99% of what works in Chrome will work in Sliider. full screen output A B crossfader Load html files from disk or the web Syphon output for the OSX version Control panel with sliders and buttons Drag and click in the scene with the mouse Download Sliider preview version Here’s a video where I demonstrate Sliider Sliider – Demonstration from Udart (Vibeke Bertelsen) on Vimeo. What is Sliider Sliider is basically a Chrome browser with some added features that makes it more suited for live performance. You can create your own html pages with any graphics you like whether it is based on WebGl, canvas or SVG and Sliider […]

Download Sliider preview version

Sliider preview version is released for Mac, Windows and Linux. It is open source and free. For Mac you can choose between a Syphon and a Fullscreen version. Download from the table below. Also download a set of example visuals that demonstrate the capabilities of Sliider: Download examples App version Download Fullscreen output Syphon output Preview window Control scene with mouse Mac: Sliider preview Syphon (OS X 10.8+) Download no yes yes yes Mac: Sliider preview Fullscreen (OS X 10.7+) Download yes no no no Windows: Sliider preview Download yes no no no Linux: Sliider preview See info below yes no no no Quick start Download the ‘Examples’ package and the Sliider app for your platform. Click the left most ‘Open’ button in the control window Click ‘Open file’ Locate the index.html in one of the Examples folders and click OK For Linux users There is no prepackaged version for […]

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:///Syphon%20Client%20QC.mov” 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=”Syphon%20Client%20QC.mov” 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 here.com

A remix could be many things but in this case the word refers to some modifications I made to the maps at here.com 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 here.com 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 Ro.me 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 […]

Lost In Uncanny Valley

That’s what I call my current visual explorations. There’s something endlessly fascinating to me in these 3D humanoid characters and their movements so I will definitely continue to explore this theme through animations, VJ performances etc. Here’s a few animated GIFs (I hope they play in your browser) plus a video from a recent performance in Copenhagen as a part of Obscura – the group of people I’m working with. Live music performance by ir (aka. Jonas Olesen), visuals by Udart. Copenhagen 2012