First off I scrapped and grabbed as much data on all the 44 Presidents that I could find. This included everything from their birthdays, religion, salaries to how they died and more. Pivot takes all this data after it has been neatly constructed in an XML file and outputs it as a visual interface. This interface allows you to cross reference the data to compare your subjects in a visually attractive manor.

I decided to wrap up both last years DeepZoom and this years Pivot experiment into one experience and host it on it’s own space at http://www.knowmypresidents.com.

The experience looks like this…

First choose which experience to view, you can flick between them at any point later on.

In the Pivot experiment you will see all 44 Presidents, you can zoom in and out of each President using the mouse wheel or the controls at the top right.

On the left are the options to filter and cross reference information. Selecting different data will automatically update the Presidents shown. You can also flick between grid view and bar graph views at the top right of the screen.

Zoom into each president by clicking on them, doing this will bring up lots of information on the right hand side. You can drag left, right, up and down to view other presidents, the information on the right will change as you drag around.

Switch between the Pivot and the DeepZoom examples by pressing the toggle button in the top left of the screen.

Zoom using the mouse wheel, clicking or using the navigation above. Each President has a picture frame near them that contains the image of the next President.

Keep zooming all the way down from Barack Obama to JFK.

You can read more about the Pivot control at http://www.microsoft.com/silverlight/pivotviewer/

You can read more about the DeepZoom control at http://www.microsoft.com/silverlight/deep-zoom/

This Photosynth was created from 42 photographs taken with a Cannon EOS 1000D. The images were then run through an application called Microsoft Image Composite Editor (MS ICE). ICE automatically stitches the images together to create a panoramic view. I then used the built in Photosynth export tool to publish my panoramic view to the Photosynth player.

Step by step

First of all make sure you have the required software, you will need to install the following:

Install Microsoft Photosynth
Install Microsoft Image Composite Editor

Next you need to take you photographs, you don’t need a fancy camera to do this part. I find the best results come from standing in a single position and taking a series of shots by turning around and looking up and down, this means you will keep a single line of perspective. Make sure all of your photos overlap a little so that they can be stitched together.

Once you have your collection of images, download them onto your computer. Now open up Microsoft ICE, once open, the top half of the application should have a large grey area asking you to add your images.

Now open up your folder of images. I had a total of 42 image to get the full 360 degree panoramic view, it involved taking pictures looking up and down as well as all around me.

Now simply select all your images and drag them into to large grey area of the Microsoft ICE application. The process may take a view minutes to complete before you can see the stitched result. Once complete you will see a single image composite created from your individual photographs.

At this point you may want to go back out and shoot more photos, sometimes you can add too many which will confuse the editor. Once you are happy with the result, Microsoft ICE will allow you export your composite in a number of formats, to output your creation to the Photosynth player simply click the large button on the right of the editor titled ‘Publish to Photosynth…’. This will now upload your composite image to the Photosynth servers, you will be asked to enter a few details like the title of your creation and some tags to help be found by other users.

Finally you can embed or share your Photosynth by clicking the relevant buttons below the player.

After playing with my first Photosynth: Create a 360 panorama using Microsoft Silverlight Photosynth, I wanted to try out how the tool would work focusing on a single object. This meant taking photographs around an object instead of taking pictures around myself.

As you can see in the above Silverlight example, compared to my previous Photosynth the feel of being in a 3d space is lost. However, the ability to zoom in and see the detail of each image is still pretty cool thanks to the Deep Zoom technology. And the ability to look around an object is still pretty smart. The tool feels like it is built to navigate around an environment instead of an object so the navigation controls don’t work as well, but you can still play the sequence in the order that you took the photos so all is not lost.

Below is another test I carried out, this time I moved the object around for each photograph instead of the camera. This didn’t work too well, as the Photosynth tool referenced the carpet as the common element instead of the object.

Next I want to test out a journey of photographs, maybe walking down a street in London would be cool.

Navigate the above example by one of the following:

• Move the mouse around until a white outline appears and click
• Use the mouse wheel or the zoom buttons to zoom in and out
• Click and drag to pan around the images
• Use the short-cut images on the right to jump to featured positions
• Use the directional tool at the bottom centre of the screen

Here is my first attempt at using Microsoft Photosynth. I have seen a few examples of Photosynth before but never got round to trying it out for myself.

Photosynth is a tool that uses Microsoft Silverlight to piece together photographs to map them in 3d space. The tool is really easy to use, once you have your photographs you upload them and the tool does the rest for you. Once your images are mapped out by the tool, you are given a Silverlight interface to add some further information if you choose. You can add tags to individual images, add a geolocation and a description.

This example involved me standing in one position and taking a series of photos by turning around to form a 360 mapping. The Photosynth tool managed to map 86% of the 31 photos I uploaded which works quite well. The tool picks up on key pixel configurations and matches them across the series of images to form the full 3d map.

As you can see my first example does not fully match up all the way around so in hindsight maybe I should have taken a few more extra pictures so the tool could complete the full 360 journey.

My next task will be to take a series of images around an object instead of from a single point.

Using the Line element and some Random math I have created a paint splatter brush effect. Use the color palette at the top of the example to change color and then draw using the mouse.

To create this effect, I plot lines one after the other using the Line element. Starting from the mouse co-ordinates and then using Random math to plot each further point. The length and size of each splatter is also set each time using Random math.

To create a line using the Line component:

To create a new line we perform the following

Create a new Line and call it Line1…

Line Line1 = new Line();

Set the start co-ordinates of the line…

Line1.X1 = 0;

Line1.Y1 = 0;

Set the end co-ordinates of the line…

Line1.X2 = 10;

Line1.Y2 = 10;

Add the line to the page…

LayoutRoot.Children.Add(Line1);

You can see another post I made on building a Paint Application here.

To get a Random number we use the following code in C#:

First define the variable…

private Random NextDouble = new Random();

Then each time you want a new Random number perform the following…

NextDouble.NextDouble();

This value will be of a double figure between 0 and 1. To get a specific range of random numbers we need to multiply this value.

To get a Random number between 0 and 100…

NextDouble.NextDouble() * 100;

To get a Random number between 50 and 100…

(NextDouble.NextDouble() * 50) + 50;

Grab the Source

As always, you can grab the source files to this post here.

In this example I have used the InkPresenter to capture the mouse and produce vector paths. I also have a basic interface to change the colour and path size. I then use that captured data to duplicate the vector path upon 16 faces each rotating around a common point using the Projection properties.

The Projection properties in this example have been created inside Expression Blend using a storyboard activated by behaviors.

The InkPresenter control is this example has been created inside Expression Blend, but we need to do a bit of work in the code behind file to record the data and convert it into a visual path. You can read more about this process in this MSDN article.

Grab the Source

As always, you can grab the source files to this post here.

You can enhance the 3D effect further by pressing the ‘Spin‘ button, this simply plays a storyboard to spin each circle on an additional axis.

To create this effect I have used the Projection Transform Rotation properties and used Easing on the animations inside Expression Blend 3 to help the inertia look right.

Grab the Source

As usual you can download the source files for this example here.

Metia (my employers) have just finished producing not only one of the first ever Silverlight banners for MSN, but the first banner to incorporate Deepzoom and Smooth Streaming and be expandable. View the Mass Effect Silverlight banner live on MSN.

The video also features a full screen view for the HD video.

The Smooth Streaming allows users to view the video at the highest quality possible based on their internet connection and CPU speed. If the users connection drops to a slower speed during the video, the Smooth Streaming seamlessly adapts to keep the video stream consistent and free of buffering.

The banner also features a Deepzoom component.

This part of the experience allows users to zoom in as close as to see the stubble on the characters face! The Deepzoom functionality lets you zoom into an image serving up only the part of the image you are looking at and thus not having to download megabytes of data.

This banner is running live on MSN right now, and is due to feature on the MSN home page this Saturday.

You can read more in the following posts:

Dean Gifford at Rocket Panda talks about a World first

Damon Serji talks about the first interactive Silverlight banner in the world

Metia official statement by Steve Ellis

Site features

• The site features a randomised layout so that every time you return the tile positioning should look different.
• The tiles make use of the new 3d projection properties in Silverlight 3.
• All the content is pulled through dynamically to allow updates to be made with ease.

Breakdown of effects

To create this effect I use the following transforms:

• Opacity at either end of the animation.
• Projection values to the X and Z axis to make each element loop to the foreground and background.
• Scale transform to enhance the size of each element at it’s nearest and furthest point.
• Easing on the above Scale transform to help the movement look more natural.
• Translate transform to move the elements from the left to right.

• I replaced the circle elements for images.
• I slowed down the storyboards using the SpeedRatio value, this allows you to speed up or slow down a storyboard without having to go through and reposition all the key frames.
• I added an additional projection transform to the Y axis to give the impression the spiral effect is along a curve.

Grab the source

As usual you can download the source files for both the above examples.

Silverlight spiral effect using 3d projection 1

Silverlight spiral effect using 3d projection 2