All posts by: Udart

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

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