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.

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

Break down of effects.

Each element (circle) has it’s own storyboard that uses the projection properties to spin it around in a 360 degree fashion on it’s X axis. By increasing the centre point value of the Z axis we get a larger radius.

On top of that each element is offset by 30 degrees on it’s Y axis, this allows all the elements to form an imaginary sphere. I have also set the storyboard durations to different lengths to allow a chaotic feel to the animation.

Finally I have performed a rotate animation on all of the elements. The was no code needed to create this example, everything was done inside Expression Blend 3.

Grab the source

As usual you can grab the source here:

Projection example 1

Projection example 2

One way to optimize your Silverlight application is to check that it is not having to render objects that are not being used or seen. If a storyboard is animating an object then that object is redrawn each frame even if it is out of view or behind another object. By stopping these animations or collapsing them until we need them will help keep down the processor requirements.

By using the ‘EnableRedrawRegions‘ property we can see every part of the screen that is being redrawn each frame.

Below is an example of an animation and the ability to move an object on top to hide it.

The ‘how to’ bit

To turn on the EnableRedrawRegions property we need to add the following code in the HTML page hosting the Silverlight:

<param name=“enableRedrawRegions” value=“true” />

Add it after the ‘object‘ tag with the other default ‘param‘ tags created by Visual Studio.

Silverlight has a number of ‘out the box’ controls which I will touch on further along this tutorial series, but one of the most used and helpful controls is the button. The button control does exactly what it says, it scales to what ever size you want, can display text within it, and has animations set out for rollover and mouse click actions. There are also pre-set states for when the button is disabled and also selected using the tab key.

All the above actions have a default styling ready for use and looks like the below example…

Now you can click and draw your button on the Design area.

Using the default styling

If you are happy to use the default styling then you can change the size of the button to fit your requirements. You can also change the text within the button by going to the ‘Properties‘ tab and scrolling down to the ‘Common Properties‘ section. Enter the text you want displayed in your button in the ‘Content‘ field. To change the font size or font type, scroll down to the ‘Text‘ section. To change the text color or the tint color of the button, scroll back up to the ‘Brushes‘ section. The ‘Background‘ color changes the tint of the button and the ‘Foreground‘ color changes the text color.

Customizing the button style

If you want to add your own design to the Button control then you need to create a new ‘Style‘. To do this first select the button you have drawn, now you should see that just above the top left of the Design area the button’s name is displayed with an arrow to the right. Click the arrow and select ‘Edit Template‘ and then ‘Edit a Copy‘…

Now a popup will appear asking you to name your new Style. Once you click OK, you will notice that you are automatically taken inside the new Style. Under the ‘Objects and Timeline‘ tab you will now see the assets that make the button control up, you can add, edit or remove these at your will. Under the ‘States‘ tab you will now see several pre-set actions taken for different scenarios, they are…

• Base - This is your buttons default styling

Common States

• Normal - This is your buttons return styling after it has been interacted with
• MouseOver – This is your buttons rollover animation
• Pressed - This is your buttons click animation
• Disabled - This is your buttons style when set to disabled

FocusStates

• Unfocused - This is your buttons styling when not set to focused (Through tabbing)
• Focused - This is your buttons styling when set to focused (Through tabbing)

To edit one of these ‘States‘, select the state and then make your changes to the button assets. You will notice that when you select a State, a red recording light will appear to its left just like when editing a storyboard.

To make changes to the button assets make sure you have ‘Base‘ selected or it will be recording your changes as a Storyboard does. You can read more about how Storyboards work in this tutorial.

The ‘Canvas‘ element can be used to group other elements up, including other ‘Canvasses‘. A ‘Canvas‘ has properties like any other element, it can be moved around, have a set height and width, have transforms including projection applied, have a background color, have it’s Opacity set and even have Pixel Shaders applied. All items inside that ‘Canvas’ will be affected by these properties as a unit.

To draw a Canvas, first go to your tool panel, click and hold on the Grid (shown by default) icon and select ‘Canvas‘. Now draw the area you want to have as a ‘Canvas‘.

To group elements into a ‘Canvas‘, first select all the elements you want to group, then right click on them and select ‘Group into‘ and then click on ‘Canvas‘.

This can have some interesting benefits. When using Opacity Masks and Pixel Shaders on a Canvas, the effect is treated to the contents inside as one unit. For example, Opacity will not show shapes underneath other shapes like they would if treated individually (See below).

1. (Top): No opacity.
2. (Middle): Opacity applied to Canvas containing elements.
3. (Bottom): Opacity applied to individual elements.

The DropShadow Pixel Shader effect works the same way.

1. (Top): No shadow.
2. (Middle): Shadow applied to Canvas containing elements.
3. (Bottom): Shadow applied to individual elements.

Elements inside a Canvas are positioned by two values.

• Left = The ‘X’ value.
• Top = The ‘Y’ value.

The position 0,0 is set to the Canvas’ most top left point.

Grouping elements into a ‘Canvas‘ is a good thing to do if you want to move multiple elements in the same way with animation. The Canvas is used often when making games in Silverlight as they can act and be controlled independantly from the rest of the stage.

There is no limit to having multiple Canvasses inside Canvasses.