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.

In my previous 3 posts I played with the projection property as the primary effect. In this example I wanted to show how the projection property can be used as a more subtle effect, in this case a shadow based on the users mouse position. To view the previous 3 posts on projection please view the links below:

Controlling Projection in Silverlight 3

Using projection to build a 3D carousel in Silverlight 3

Creating a 3D cube with images in Silverlight 3

The ‘how to’ bit

There are two effects that I create in the above example. The first is the lighting and the second is the shadow.

The first step is to run an event everytime the mouse is moved. Then to create the lighting effect, I first take the mouse position value and I use a small equation to give me a value that I can apply to a radial gradient’s ‘GradientOrigin‘ value. To control this i place an x:Name in the XAML called “lightAngle“:

<RadialGradientBrush x:Name=”LightAngle” GradientOrigin=”0.258,0.253″>

To create the shadow effect I use the  new projection properties given to us in Silverlight 3. I have drawn an ellipse with a radial gradient fill that goes from black to transparency. I then use the projection values in Blend to make the ellipse look like it is the shadow of the orignial red ball graphic. To animate the shadow I first take the mouse position value and use a series of equations to convert the values to apply to the projection globalOffest values of  LocalOffsetX and LocalOffsetY.

The tricky bit

To get the shadow to lie in the correct position we need to tell the LocalOffsetX value to point in the opposite direction to the mouse position. To do this we have to reverse the original value taken from the mouse. We can do this using the following equation:

Mouse X position = A

A = (A – (A * 2)) + 1

or in my example (where Mouse X = pt.X)

pt.X -= (pt.X * 2);

pt.X += 1;

Grab the code

As always you can grab the source here.

The ‘how to’ bit

You can read more about using the new Projection properties in my 2 previous posts here:

Controlling Projection in Silverlight 3
Using projection to build a 3D carousel in Silverlight 3

I use the same process with the 3D cube to control the movement dependant on the mouse position. To get the cube to work correctly I have had to use all three dimensions (X, Y and Z) of the projection properties. The more complicated the shape the harder it is to get all angles to move together. In the above example I have had to manipulate 12 projection values to get the cube to move correctly.

Moving forward

This example is still a fairly simple example of interaction, there is no reason that the images could not be updated dynamically or video be used instead. Also each image face could have it’s own navigation interface to spin to the next face.

Grab the code

As always you can grab the code for the example in this post here.

The ‘how to’ bit

To start with I have placed 6 images inside Blend and used the projection properties to offset them against each other to form a 3 dimensional hexagon. I do this by changing 2 projection properties:

CenterOfRotationZ=”-173″

RotationY=”60″

I use the ‘CenterOfRotationZ’ value to move the center point away from each image plane. This value needs to be the same on each of the 6 images I use in order to get them to match up at the edges. I then use the ‘RotationY’ value to change the angle of each image, as I have 6 images each image is rotated by a factor of 60 degrees (6 x 60 = 360 degrees).

I then place an x:Name on each images projection tag as seen in the below example:

<PlaneProjection x:Name=”Image1Projection” CenterOfRotationZ=”-173″ RotationZ=”0″/>

This will allow me to easily change the angle of each image dynamically in the C#.

In the C# I set up a listener to monitor the mouse movement and store the values in ‘pt’:

void LayoutRoot_MouseMove(object sender, MouseEventArgs e)

{

pt = e.GetPosition(LayoutRoot);

}

Next I set up a CompositionTarget.Rendering function so that I can update my 3 dimensional carousel constantly. I use the mouse X co-ordinates to change the speed and direction of the carousel and the mouse Y value to change the opacity:

void CompositionTarget_Rendering(object sender, EventArgs e)

{

Image1Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;

Image2Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;

Image3Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;

Image4Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;

Image5Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;

Image6Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;

image1.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;

image2.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;

image3.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;

image4.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;

image5.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;

image6.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;

}

Grab the code

As always you can grab the code source here.

]]> http://www.silverlightbuzz.com/2009/06/12/using-projection-to-build-a-3d-carousel-in-silverlight-3/feed/ 9 http://www.silverlightbuzz.com/2009/06/10/controlling-projection-in-silverlight-3/ http://www.silverlightbuzz.com/2009/06/10/controlling-projection-in-silverlight-3/#comments Wed, 10 Jun 2009 21:06:37 +0000 Gavin Wignall http://www.silverlightbuzz.com/?p=224 In the below example I use the new Projection control to create a 3d effect based on the users mouse position.

In Silverlight 3 we have 2 new variables to give us the ability to show perspective. We can use this effect on any item, including Images and Text. These 2 new variables are:

RotationY
RotationX

Step by step

Firstly, I place an x:Name called ‘ProjectionFactor’ in the XAML. This gets placed in the ‘PlaneProjection’ tag of the object I want to control:

<Image Source=”images/sbLogo.png” Stretch=”Fill”>
<Image.Projection>
<PlaneProjection x:Name=”ProjectionFactor” RotationY=”0″ RotationX=”0″/>
</Image.Projection>
</Image>

I then set up a listener in the C# to capture when the mouse is moved. Everytime the mouse is moved I capture the mouse co-ordinates and use the values in the below equations to get the desired effect:

Grab the code

I have written the code to adapt to the size of the scrollable area, you can see this by clicking on the ‘+’ and ‘-’ buttons. These will add / remove the items inside the scrollable area. If you remove enough items so that the area taken up is less than that of the screen, the items are positioned in the middle.

To carry out this effect I need to keep track of the mouse position, the width of the screen and the width of the Stack panel containing the items. Each of these values need to be updated when ever they are changed.

I then position the movable area based on the following equations;

Where:
a = Mouse X position
b = Width of Screen area
c = Width of area to be moved
if movable area is bigger than screen area:
moveable area X position = (a/b)*(b-c)
if moveable area is smaller than screen area:
moveable area X position = (b-c)/2

This equation is run every time a frame is rendered.

The User Experience bit

It is an important interaction that when working with scrolling content like this, especially when the content is a menu, to make sure that the direction of new content approaches the movement of the mouse.

Get the code

As always you can download the example files here.

using System.Windows.Browser;

To then listen for the Mouse wheel interaction I set events in the browser using the following piece of C#;

HtmlPage.Window.AttachEvent(“DOMMouseScroll”, OnMouseWheel);
HtmlPage.Window.AttachEvent(“onmousewheel”, OnMouseWheel);
HtmlPage.Document.AttachEvent(“onmousewheel”, OnMouseWheel);

I can then check for a value to see if the mouse wheel is being moved forward or backward using the following Method;

private void OnMouseWheel(object sender, HtmlEventArgs args)
{
double mouseDelta = 0;
ScriptObject e = args.EventObject;

// Mozilla and Safari
if (e.GetProperty(“detail”) != null)
{
mouseDelta = ((double)e.GetProperty(“detail”));
}
// IE and Opera
else if (e.GetProperty(“wheelDelta”) != null)
mouseDelta = ((double)e.GetProperty(“wheelDelta”));
mouseDelta = Math.Sign(mouseDelta);
}

This now gives me a value in the form of ‘mouseDelta’ which can be applied to what ever you want your interaction to be. In this case we are controlling the scale factor of a canvas.

To limit the scale factor I run a check to see if the scale value has gone under 1 or over 10 and if so reset the value to the minimum or maximum amount;

if (ScaleFactor.ScaleX < 1)
{
ScaleFactor.ScaleX = 1;
ScaleFactor.ScaleY = 1;
}

if (ScaleFactor.ScaleX > 10)
{
ScaleFactor.ScaleX = 10;
ScaleFactor.ScaleY = 10;
}

I also check where the mouse cursor is and focus the zoom in / out on that position. I do this by storing the mouse co-ordinates everytime the user moves their mouse and then changing the ‘RenderTransformOrigin’ value;

//get mouse co-ordinates
void zoomArea_MouseMove(object sender, MouseEventArgs e)
{
pt = e.GetPosition(zoomArea);
}

//change the RenderTransformOrigin
zoomArea.RenderTransformOrigin = new Point(pt.X / zoomArea.Width, pt.Y / zoomArea.Height);

Get the code

You can download the above example here.

if (e.Key == Key.Left)
{
tankRotate.Angle -= 1;
}
if (e.Key == Key.Right)
{
tankRotate.Angle += 1;
}

To get the object to move forward in the direction it is facing is going to require our old friend ‘Trig’ to take center stage. We can use the following formulae to calculate how far to move our object by its X and Y co-ordinates:

Move X by: Math.Cos(Angle) * Speed

Move Y by: Math.Sin(Angle) * Speed

Where Angle is in radians.

Radians

1 radian is equal to 57.29577 degrees of a full circle. So if our object is turned at an angle of 57.29577 degrees it is equal to 1 radian. To work out the value of our angle in radians we can use the following formula:

Radians = Angle / 360 * 2 * Pi

Working out how much to move our object

i.e. if our object is turned to 45 degrees and our required movement speed is 2.

X += Math.Cos(45 / 360 * 2 * 3.14159) * 2;

Y += Math.Sin(45 / 360 * 2 * 3.14159) * 2;

Applying this formula to the C#

So to return to the example at the begining of this post. I use the below calculations to work out how much to increase or decrease the X and Y positions of my object:

if (e.Key == Key.Up) 

{

        tankMovement.X += Math.Cos(tankRotate.Angle / 360 * 2 * 3.14159) * 1;

        tankMovement.Y += Math.Sin(tankRotate.Angle / 360 * 2 * 3.14159) * 1;

}

Get the code

Feel free to grab the code here and start playing!

Upon recognition of a key assigned to a direction, an increase (or decrease depending on direction) is made to a variable that is then applied to the the Helicopters ‘Canvas.setTop‘ or ‘Canvas.setLeft‘.

The ‘Space bar’ or Numeric ’5′ key will level the Helicopter out and stop it moving in any direction. This is done by reducing or increasing the movement in all directions until all values equal zero.

I constantly repeat 2 storyboards to animate the helicopter blades and make visible/collapse one of 5 graphics to display the helicopter facing in the relevant direction that it is moving in. Finally I constantly run a calculation to tilt (RotateTransform) the helicopter in the direction it is moving and making it level when not moving.

To save the user from loosing sight of the helicopter in the above example I have put in a collision check to make sure the helicopter can not fly outside of the viewable area. If the user controls the helicopter to fly past any boundary then the helicopters movement in that direction will be reset to zero.

Next steps

I would like to add a winch that can be dropped down below the helicopter. The winch could then be made to pick objects up and drop them on command.

Get the code

Feel free to grab the code here and start playing!