PROJECT
MAKE A KINECT
WEATHER MAP
INTERMEDIATE
Use depth data (including the
player index) to replace the video
background behind a subject
without using a green screen.
Here’s an application that replaces the video
background behind a subject with a weather
map, the way TV meteorologists use green
screens — except with Kinect, you don’t need
a green screen. You can easily adapt this technique to other backgrounds and uses.
1. Get image and depth data
from Kinect.
First we need to start getting data out of
Kinect. Plug Kinect’s USB plug into your
computer and its power plug to an outlet
(Figure E). If the SDK is installed properly,
Kinect’s LED indicator should blink, and a
Windows pop-up may also indicate that
the Kinect device is ready.
To verify communication to the PC, go to
the Start menu under Microsoft Kinect 1.0
Beta2 SDK, and run the SkeletalViewer or
ShapeGame samples. A zip file with source
code for these samples can be found in the
same location in the Start menu.
To create the project, launch your IDE
(either Visual Studio 2010 Express or Visual
Studio 2010) and select File → New →
Project, then choose the WPF Application
project template under Visual C# → Windows.
E
(WPF, or Windows Presentation Foundation, is
an interface framework that can encompass
Component Name header to sort by name.)
Now we’re ready to write some code.
XAML elements with C# code-behind, as with
our project.) Enter “Kinect WeatherMap” for
the project name, select a directory if you
don’t like the default one, then press OK.
This creates a blank WPF application.
Gregory Hayes
To tell your app to access the Kinect SDK,
find the Solution Explorer (or select it from
the View menu), right-click on References,
and click Add Reference. Click the .NET tab
in the popup, then find and select Microsoft.
Research.Kinect and press OK. (To help
find Microsoft.Research.Kinect, click the
Double-click on Main Window.xaml. This is
auto-generated XAML code for the default first
window that opens when you run the application. The file defines what visuals and controls
are displayed in that window, and defines
names for use in the code-behind class. The
file already includes a Window tag and a Grid
tag, and we’ll add 2 Image tags to define the
frames that will hold the Kinect camera image
and the background weather image (Figure F,
following page). To do this, replace the contents of Main Window.xaml with:
129 Follow us @make
