This is a project I have been looking forward to sharing with you! For Fox on the run in Delft, The Netherlands, I programmed and animated this Kinect controlled application.

The guys at Fox on the run were so nice to put together a website showcasing the project, so please go check it out here: FESTO - Make a move challenge - it has a great video showing the project.

The technical side is relatively simple: a webcam, a Kinect and a computer is the basic setup. The webcam stream is displayed in the background of the application, making it look transparent (filming the actions behind the physical screen). The Kinect camera feeds the application with information about users (skeletons) and their positions, which I then translate to interactions.

The game is created as an Adobe AIR application and is hardware accelerated for optimal performance, it runs on both Mac and PC.

I used the AIRKinect and OpenNI frameworks.

_Case website

Just a small update on some of the latest projects I have worked on.

-Climates Game
For Fox on the run I helped develop a small iPad/PC game for this years VSK exhibition. The visitor connects to Facebook, and after selecting 3 friends, the game starts. The visitor then has to set the correct room temperature for each friend using the interface from Carrier's Aquasmart Evolution. The winners are the fastest!
The iPad application connects to a PC (via the local network) and displays the friends and their temperature on 3 monitors.
Check out a video of the installation here.


-Nordic Noodle
Together with momlookwhatimade I built the website for new Copenhagen based fastfood restaurant Nordic Noodle. See it here.

-Storm P - pibebord
For Redia I just developed a new interactive table (touch screen lying down!) for the Danish museum Storm P. Museet.
The application shows a collection of Storm P.'s many Pipes and their stories. The visitors of the museum can also browse through some of Storm P.'s sketches and photographies by flipping the pages of the two books. I'm hoping to have a video of this ready soon.

- Robert Kranenborg website
I developed this Flash site for Dutch agency Fox on the run. The site features the Dutch chef Robert Kranenborg in 360° pictures, allowing the user the give him a spin. All content is feeded from Twitter, Youtube, Moby (for images) and a custom CMS (design, concept and CMS by Fox on the run).

- Hop and Learn application
This is my second game for the Wisdom Well platform. The game is camera-tracked and projected on a floor, just like the Memory Game I produced in 2011. The game is developed for Programdatateket in Denmark.

I have also worked on several e-learning applications for Tinqwise (clients include KLM, UPC and Abn. Amro) and I'm still working on some large projects including iPad and desktop applications for Simpatico.
And several new games for the Wisdom Well are coming before summer as well.

Thanks for reading!

_Climates Game Video

Nørreport is Denmark's only true underground station and the doorstep to the city.
Through almost 4 years, photographer Klaus Holsting documented Copenhagen's unnoticed inferno, day and night, summer and winter, before the city's main transport hub now changes forever.
The pictures can be experienced in the book Nørreport Station - which you can get a taste of, in this mobile/tablet application.

The application is produced with Bombay Flying Club, who directed the essay while I did the design, UX and development.

The application displays some of Klaus Holstings fantastic pictures in a minimalistic and intuitive gallery, but also adds a little extra to the experience, by featuring an essay written and read by Søren Ulrik Thomsen. Go check it out for yourself at Norreport Station.

Within two weeks the iOS application has reached number 1 in the "Photo & Video" category and a top 10 position in the overall free iPad apps. It has been downloaded and installed more than 15.000 times.

The application is created for both Android and iOS (both small, medium and large devices). Developed with Adobe AIR.

The application was awarded FWA "Mobile of the Day" on June 14.

_Norreport Station

I recently promised to share my experience with Adobe Air for mobile and tablet development. Lately I have been doing a lot of this (actually this is my main work area at the moment) and I have gone from interested to confused to frustrated to impressed to "wow"... And my conclusion is that this approach to application development, is very interesting and powerful. We will be seing a lot of great applications and games built with Air in the near future.
The Air approach is very useful in terms of deploying easily to multiple platforms (such as Android, iOs, normal web etc.) and doing fast development compared to native languages. However you don't have full access to everything (phone vibrator, native UI controls etc.) and you must put in a lot of effort in optimizing your code and graphics. It is all about using the best tool for the job, as Lee Brimelow wisely puts it :-)

Tips for Air development:
- Run GPU mode. (I have found very few cases in which CPU mode was better).
- When running GPU mode, consider that everything should be bitmaps and don't try using filters runtime - they won't render!
- Keep you display list flat. Meaning avoid nesting movieclips inside movieclips inside movieclips...
- Consider using different stylesheet for text, this can come in handy when targetting old and new iPhones in which the resolution goes from 320x480 to 640x960.
- After loading assets, make them render instantly (check this out).
- Set StageQuality to "low".
- Test on your device regularly (Android is much faster for testing).
- Clean up (like any good developer always does) with removeEventListener, removeChild, mc = null etc.
- Avoid bubbling events by using mouseChildren, mouseEnabled and event.stopPropagation()
- Remember you are developing for touch interfaces. Button hitareas should be pretty big.
- Have some fun! Working on touch devices opens up a world of new oppertunities, go explore them and don't think "website"" or "mouse" limitations anymore.

Find more tips by following the links in the right side.

One of the really cool things I have found, which is not mentioned often, is the ability to use StageWebView to display html content in your Air application. I am using this for a new application, in which I am displaying a simple text page, which needs to scroll and be able to zoom in/out - the StageWebView is perfect for this, four lines of code and I have everything I need. And why don't I build the entire application with html then? Because there are a lot of different interactive stuff (such as multitouch gestures) in there, which would be much too complicated (and time consuming) to do with html/javascript!

I hope this helps and/or motivates you to dive into Air development. I have personally been very surprised to see how well this performs and how much fun it is.

_

I have been developing for touch- and multitouch screens for quite some time, and during the different projects I have collected and created many different utilites and small tricks.
I finally got around to cleaning up some of the code. The result is these easy-to-use-and-reuse "MT" and "MTkin" classes.

In details, this is what they do:
- The "MT" and "MTkin" class are extended Sprites, with multitouch enabled functionality. They can be moved, rotated and scaled. You can choose to disable rotation, enable smooth scaling (using TweenNano from Greensock) and you can set min/max scaling limits, so your objects don't get too big or small.
- You can also listen for "tap" events, which is the same as a traditional mouse click, however just listening for the MouseEvent.CLICK or the TouchEvent.TOUCH_TAP doesn't work like it should. The CLICK doesn't support more than one object being interacted with, but for a large multitouch and multi-user table, this isn't sufficient, all objects should be able to receive "tap" events regardless of the number of active touchpoints (or mouse cursors). And the TOUCH_TAP has a "bug" (in my opinion), because it dispatches the event even if an object has been moved/scaled/rotated and even if you hold down your finger/mouse for a long time - which obviously triggers many errors in your application.
- The "MTkin" also enables "throwing" the object - therefore the kinetic name! A user can do all the things above, but also throw the object in a direction. By changing an object's "weight" property, you can control how quickly it decreases its speed. Pretty nice!

All the matrix calculations are based on the great code written by Tim Kukulski (see more here) - though changed a little (these classes don't support disabling rotation, dispatching "tap" events, kinetics etc.).

The demo!
The demo above shows two different tests, running on both an iPad and the desktop. They have the exact same codebase. The iPad version is of course compiled for Adobe Air. The performance of this demo was outstanding on both an old iPhone, iPad 2 and my Android device (HTC Desire HD) - all three ran 60fps.
- Demo 1 shows a single object on the stage. The buttons in the right side toggles various parameters, such as rotation, smooth scaling and kinetics.
- Demo 2 shows multiple "MTkin" objects. These can be manipulated simultaneously.

Some time ago I realized that I needed an easy way to test touchevents on the desktop. Listening for gestures only allows for a maximum of two touchpoints, and testing on a Mac didn't allow me to use a real multi-touch display. So I created a simple class to dispatch these events (look for the green dots in the demo above, in the desktop version). You can simulate multiple touch points by holding down the "cmd" button.
This is also included in the source.

These multitouch and kinetic features were heavily used in my work with the Redia application for the National Gallery of Denmark. Ensuring that multiple users could interact with the table simultaneously. I also have a simple kinetic container (used for text etc.) which I will try to clean up as well and share with you.

How about a Javascript version?
Flash/Air isn't always the right solution, so of course much of this can also be achieved with javascript. The performance is pretty nice, even when running in mobile Safari.
Here's a test I did some time ago, it's only the kinetic features - not multitouch - so they don't scale or rotate, and you can only interact with one at a time. And here's an extended version, in which the objects bounce against each other (which is just my attempt to write a quick physics demo with javascript!).
If I have the time and need soon, I might add the multitouch functionality to this as well.
By the way, I also did this example with HTML5 drawing on the canvas (instead of moving objects with javascript) - didn't perform well at all...

Download the source and demo here at Google code. You also need the TweenNano classes, get them here and support the project here. The tweening library is only needed for the "smooth scaling", which you can easily remove from the classes if you feel like it!

The demo runs perfectly on the iPad in GPU mode. I have learned a lot recently about optimizing and building for mobiles and tablets, I will share some of this (and some projects) soon, I promise :-)

_

Some time ago I created a small class for animating custom shapes(outlines). Since then I realized that adding support for curves are actually not that hard. So, that's just what I did!

The class is still very easy to use, but gives you much more flexibility.
- The stroke (thickness, color etc.) is defined as a GraphicsStroke object, giving you complete control (and stuff like gradient line fills).
- Old code has been rewritten and optimized.
- YOU CAN NOW ANIMATE CURVES... this is really cool and suddenly makes this class work for much more than just an animated outline. For instance you can write small words with a pen, animate outlined logos and much more.

Check the demo above - click it to switch between different examples.

The cool thing is still that you don't have to be a coding genius, you just tween the percentage of the entire shape to render it!
Check out the old class for more explanation, or just go ahead and download the new class and some different examples (they are easy to understand). I also included a small tool to easily draw shapes and get the code for them. Have fun!

Download source here

_

I am happy to announce that today the mobile version of my website is "Mobile of the Day" at The Favourite Website Award.

Go check it out on your smartphone or tablet...

The interaction is really intuitive and simple - just swipe sideways to see my news and cases, and swipe vertical to see contact details and info.

"FWA is an industry recognised award program, established in 2000, showcasing projects which use cutting edge technology, together with inspirational ideas, that lead the way for future generations."

The site is built from scratch with HTML5 and javascript - using jQuery for the animations.

I am also proud and thankful to have been featured with my new website at Designlicks, Designcharts (#1), Spyline, Irie, Another Bookmark and more.

_The FWA

For the new Nordic Art exhibition at National Gallery of Denmark, Redia was asked to develop a 50 inch interactive table. I worked for them as lead Flash developer and animater on the entire user interface. The table is a horizontal multi-touch display supporting (almost) unlimited number of touch points.

The application is dynamic and displays some of the art from the exhibition along with videos, artist information and much more. Users can interact with the content from both sides of the table, and tracking cameras make sure the content is always near the users.

The application also has many different overviews of the art pieces. These are ordered by various parameters and shown in different grids.

The entire application is built on top of Redia's custom framework.
All content on the table can be rotated, zoomed and swiped(thrown) around as the user pleases. The interaction is incredibly intuitive and the application has a lot of intelligence built in (in terms of registering user positions, pan sound from videos, drag content from an opposite users thumbnail stack etc.)
Be sure to check Redia's website for more info and many other interesting projects. They also have a brief description of the installation here.

_National Gallery of Denmark

Redia asked me to develop and animate an application for the Danish Electronic Research Library (DEFF), showing realtime search queries from their libraries.

The application is basically a bunch of DNA strings visualizing various data about the search queries. Each circle in the DNA string represents a piece of information visualized by the radius of the circle. The data includes year, materials, common categories, searches per day etc.

The application is interactive, allowing users to explore the data, but it can also stand alone. When the application has been running without user input for a significant amount of time, small animations appear in order to attract attention and add some "life".

As most of Redia's solutions this one is also very flexible in terms of styling. The libraries can add as many skins to the application as they wish. Each skin defines colors for all elements in the application and the application also supports videos (new StageVideo support) and images as backgrounds.

Visit one of the DEFF libraries to see it in action, or check out the online demo (change skin with your keys "1", "2", "3" etc.).

_Read more about DEFF

Wisdom Well is an interactive floor for social and collectice learning through physical play and movement. The floor is basically a (very) big touch screen, tracking the users position.

Interactive Spaces asked me to design and develop the frontend of a new game for the floor. The game is a classic memory game with up to 4 teams and 36 bricks.

The gameplay is simple: on each turn a clock counts down a few seconds. Then the selected bricks (bricks with people standing on them) turn around and display their content. The content is defined backend by the school teacher, the pupils or whoever has created the game. The bricks can handle videos, images, sounds and text. When all matches are found, the game is over and a winner is displayed.

On a technical note, I recommend visiting www.vidensbroend.dk for more details about the Wisdom Well.

I designed the game and developed/animated the Flash frontend.
The game is currently running on Møllevangskolen in Aarhus, Denmark.

_Read more about the Wisdom Well

The internationally renowned photographer Linda Suhr commisioned Henrik Kastenskov and me to create a website promoting her new book "A Passion for Wine & Surf".
The book is about South African surfers, winemakers, cooks and their lifestyle. It includes recipes, personal stories and beautiful photography.

Henrik created 3 inspirational videos for the themes "The Food", "The Wine" and "The People" and asked me to design and develop the website surrounding them.

The website is a colorful invitation, and features many of Linda's fantastic photos. Users can also read about the author, download wallpapers and of course purchase the book.

The website has a dynamic xml backend and a Paypal connection for selling the book.
The website was awarded by Irie and Designlicks among more.

Mobile Version
I always advise my clients to have a small (but good looking) mobile optimized version of their website.
The mobile version of this website was awarded "Mobile of the Day" by the The Favourite Website Award.

_Wine and Surf

Danish photographer Kaare Viemose asked me to design a simplistic and pixel-perfect website for his online portfolio. Kaare shoots amazing pictures and he wanted them to be presented in a clean and yet interesting way.

The different galleries are easy to navigate, and include slideshow functionality, keyboard navigation, easy overviews and much more. The structure of the galleries varies depending on the content - enabling Kaare to add series as wells as single pictures.

The entire website is dynamic (xml backend) and extremely flexible, allowing Kaare to add and remove entire sections of the site, as well as adding galleries etc. And of course every picture has a unique link.

_Kaare Viemose

Glenn Kristensen, the owner of design company Human Design, asked me to create his new company website. Human Design develops concepts and designs for stores, branding, houses and interior. The company profile and logo is simplistic but organic. I tried emphasizing those same keywords on the website.

The Human Design logo, with floating molecules, were used as key element and as the main menu. In each subpage, the website is created within a single molecule.

The website is extremely flexible and complex - but the trick was to make it seem simple! Each design area has various information and project lists, and each project has pictures, videos, google maps, descriptions etc.

The website supports as many languages as Human Design wishes to add, and of course the entire website is deeplink enabled, so Human Design can send direct links to specific pictures and specific projects.

Besides working on the organic animations and simplicity of the design, I also gave much attention to the project pages. Each gallery supports fullscreen viewing, simple keyboard navigation and much more.

The website also includes newsletter sign-up and a dynamic xml backend, making it easy to update the website.

_Human Design

The Dutch newspaper De Volkskrant commissioned Bombay Flying Club to create the first ever online version of the annual Observatorium edition. BFC asked me to design and develop the website, with them directing and editing the photography and video for the site.

The website is a beautiful online photo experience, combining photography, videos, inspiration, history, personal stories and a lot of data. All focussed around the theme "The First Time".

6 different stories are told through photography and video, and the last section of the website is a huge mosaic. Users can explore the unique and dynamic 5940 images mosaic, which represents the amount of images De Volkskrant handles each and every day!

_Observatorium (requires Flash)

Kenneth Elgaard is a young Danish artist. The design and concept for his website was created with his art and graphic style in mind. I wanted to create a small world with some of the same elements used in his art pieces. The style is fresh, simple and elegant - like his art.

The concept included different ways of interacting in each section of the website. All interaction was based around the idea of dragging with your mouse.

In the galleries you navigate through the paintings and art by dragging horizontally. By dragging vertically you can adjust the zoom (the size) of the images. In this easy and intuitive way, the user is given complete control over the experience.

In the Curriculum Vitae section of the website, the user can browse the exhibitions by rotating the content. And finally in the news section the interaction is horizontal dragging to see older news.

The website is created without any use of 3D frameworks/engines, only utilizing the Flash Player 10 native 3D options (for the interactive cube). This was a great performance trick, which also made scaling content easier and faster.

The website has a full Umbraco backend developed by Lemur. This enables Kenneth to update everything on the website.

The site was awarded "Site of the day" at The Favourite Website Award December 19 2009.

_Kenneth Elgaard (requires Flash)

I am often involved in campaigns, microsites and small websites. Some of them are for agencies looking for a Flash/HTML5 developer and animator, and others are looking for design and direction as well.
Here are a few examples of microsites.

Shine Jeans
Webdanmark asked me to help them create a fresh and cool site for the Shine Jeans brand. From the dialogue with Webdanmark I concepted, designed and developed a site that lets users explore the jeans in an inspiring and intuitive way.
The website was a huge succes and has improved the brand awareness and identity of Shine Jeans.

Diesel - Fresh & Bright
For Superheroes in Amsterdam I co-developed this HTML5 campaign for the new Fresh & Bright collection of underwear from Diesel. I developed the main (video) sections and Magic Bullet developed the overlays ("look & buy" and "about"). Check it out in any modern browser and your iPad.

Danfoss
Simpatico designed this microsite for Danfoss as a part of the counterfeit products campaign. The website compares real Danfoss products with fake copies. Users can also submit tips about fake copies to Danfoss.
I developed and animated the Flash website.

Humanic Alter Ego
Trojan Gorillas designed this Humanic campaign site, revealing what your "Alter Ego" shoe and celebrity is.
I developed and animated the microsite.

ID Denim
An old but good client of mine is ID Denim. I have designed and developed their last two websites, including the current version. Their site uses a traditional coverflow for the gallery, but also includes jeans guides, shops/distribution and more.

I-Sing
Good friend and vocal coach Stinne, asked me to help her create an online presence for her new company I-sing. The website is simple, but easy to remember and interact with. The identity, photography, design and development were all produced by me.

My Getaway In Audio
This is an old project, but still one of the websites I get most notice from. It's a band website for Danish act My Getaway In Audio. The band doesn't exist anymore (but the website is still online).
The site is build around the idea of the band drawing content for the user to see and interact with. Oh yeah, and I was the drummer in the band!

_Danfoss Counterfeit Products (requires Flash)

Below are some of the many lab/experiment posts I posted on my old blog, I cleaned them up a bit and have found source code for them all. Hope you like it :-)

3D Interactive Cube
For really simple 3D in Flash, it's sometimes nice to use the native Flash Player 3D instead of a large engine (like Papervision or Away). This is an example of the 3D cube I developed for Kenneth Elgaard's website, which received a FWA. It's very lightweight and it's easy to adjust shading etc.

Try the demo, and try resizing your browser, to see the cube scaling to fit.
Download source here

Perfect gradients in Flash
As most of you Flash developers probably have experienced, Flash (and Photoshop for that matter) doesn't create perfectly smoothed gradients!
The common trick is to apply a little noise to the image. But for runtime drawn graphics, this is obviously not so easy. So I created this simples class, to create gradient rectangles with less banding and without loading an image.
Obviously this is not always the better solution - sometimes you don't want noise in the image and sometimes there is no banding problems with your colors - but in some cases (especially large background gradients) this could be very useful.

The class only supports rectangle gradients with 2 colors - either in linear or radial gradient style, but feel free to extend it as you please.
Take a look at the demo (click to switch between different examples).
Every example has 3 PerfectGradients - 1 with only noise, 1 with both noise and blur, and 1 without any (clean gradient).

The banding issues are hard to see on small screen resolutions.
Download source here

Piecharts and circles
I have seen a lot of Flash developers struggling with the issue of drawing and animating piecharts. I recently developed this simple class to take care of this, so I hope it gives someone a helping hand.
It's really simple, just use a radius, start-angle and an end-angle. By tweening the end-angle value, you get an animated piechart - simple but nice!
Download source here

Distortion Engine version 1
Some time ago I developed some distortion classes in order to achieve an rgb split effect and some random perlin noise. I found out that a small "engine" for those purposes would sometimes be very useful (at least to me), so now I finally had time to wrap it up.
To call it an engine is maybe a bit overstated, actually it's just a quick way to set up different types of distortion and change the amount of distortion applied.

In the demos I have used it with TweenMax, and I have tweened the distortion value from 0 to 4 and back to 0 (you can apply any amount you want, 4 is just what I used).

The engine has 5 different distortion types: Cubic noise, Distort, Noise, Perlin noise and RGB distort (split effect).
Download source here

Small bending experiment
I have been looking for an easy way to use as3dmod to bend materials without using a large 3d engine. But as3dmod works only with the more advanced engines like Away3D and Papervision (and it works very well with them).

However I sometimes need (and wish for) a lighter version, which is easy to use in small projects, banners etc. and this is the purpose of my own "bend" modifier. It's really simple and can't do half of what as3dmod is capable of (it's not build with triangles but simply rows of squares!), so there's no twisting etc. but only a simple bend is possible.

The good thing from my point of view, and the reason I created this, is that it uses the native 3d in Flash Player. My demo is below 12 kb in size (including the TweenLite engine!).
Download source here

Webcam stream dynamically RGB splitted
I was inspired by a cool RGB splitting effect on an image I saw recently, but I figured it would look cool to have it be even more interactive. This led me to develop a small experiment.

It's a simple webcam stream which rgb splits the bitmapdata in 3d space according to the mouse position – just move around your mouse cursor and see.
Nothing crazy actionscript wise – but it looks cool, right?
Download source here

CurveTo experiment
This is my simple elastic line example. It's pretty basic, the trick is to use the curveTo function and to add the bounce/elastic feel which is all about math (of course).
Download source here

_