The Pythagorean theorem
The final topic we're going to cover in this chapter is the Pythagorean theorem. The theorem deals once again with the measurement of triangles, and looks like this Let's take another look at our right triangle, shown in Figure 6-32. An illustration of the theorem is shown in Figure 6-33. If you calculate the area of the squares on each leg of the triangle and add them together, you will get the area of the square on the hypotenuse. Figure 6-32. A triangle with sides labeled Figure 6-33. An...
Converting vectors to angles
To see this code in action, visit the vectorAngleConversion project. This is a simple project that sets up a Point object that contains a vector and a variable called angle private Point vectorLength new Point private double angle A value that represents a vector is assigned to the vectorLength variable, and the angle of the vector is calculated and output to a TextBlock vectorLength.X 5 vectorLength.Y 5 double radians Math.Atan2 vectorLength.Y, vectorLength.X angle Convert.ToIntl6 l80 Math.PI...
Microsoft Silverlight 3d Perspective Animation Solar System
About the About the Technical About the Cover Image Designer Introduction Chapter 1 What You Need to What you need to know about Microsoft Expression Blend Microsoft Expression Design Microsoft Visual Studio Silverlight Tools for Visual Studio 2008 What you need to know about XAML Using Blend to create The Canvas The Image The Rectangle The Path The Ellipse The TextBlock The Line element The controls elements More about XAML What you need to know about Anatomy of a Silverlight project PART 2...
What is trigonometry
Put simply, trigonometry is the study of how the angles and lengths of sides of triangles relate to one another. The word trigonometry means three-angle measure and was originally developed to help study astronomy. Today, the use of trigonometry is critical in science, technology, and programming Silverlight That doesn't sound too scary, does it We're going to take a nice, long look at trigonometry and trigonometric functions, and what they can do for us in Silverlight. However, since trig is...
Organic animations
One of the things I find really appealing about inverse kinematics is the organic-like quality you can apply to chains of objects they start acting like little creatures inside a Silverlight application. In the next example, I'm going to show you a way to set up a Chinese dragon that will cruise around the application on its own, occasionally changing direction and speed. As you'll see, I went pretty easy on the code that changes the direction of the dragon, but I'm sure when you get the...
Using clipping paths
In Silverlight, clipping paths allow you to take one shape and use it to clip another. The overlapping area remains visible, while the rest of the clipped object is hidden from view. I have found that a great way to make use of clipping paths is to apply them to a container object such as a Canvas. Then, as objects are added to the canvas, they can be positioned outside the boundaries of the canvas to keep them hidden, or inside to bring them into view. You can also position objects within a...
Linear collisions
A linear collision is one that occurs along a single axis. In this case, we'll be coding up a collision along the x axis between two ball objects. 1. Open the LinearCollisions project to code along with this example. One thing I've done in this and other collision projects that is a little unusual is give the ball a center point of sorts. Take a good look at the Ball.xaml file so you can see what I mean. The default size for the Ball user control is 50X50. The LayoutRoot element was made to be...
Collisions with angled surfaces
Earlier in the book, you saw how the law of reflection is used to create collisions with horizontal or vertical surfaces. The angle of incidence is equal to the angle of reflection, which means an object will bounce off of a flat surface at the same angle in which it hit the surface. But what about angled surfaces Bouncing objects off of angled surfaces is very similar to performing angular collisions, except that the angle of the collision is determined by the angle of the surface being hit....
Singleplayer paddle game
The classic paddle-and-ball game is a great example of how vectors can be used to move objects around the screen. It also demonstrates how you can begin putting different pieces together to create a more complete animation experience. In this section, I'll talk about how to create a simple singleplayer paddle game that uses drag-and-drop for the paddle, vectors for the movement of the ball, and boundary checking to keep the ball on the screen in front of the paddle. 1. Open the PaddleGame...
Microsoft Expression Blend
Blend, shown in Figure 1-2, is a great tool for developing Silverlight applications. It bridges the gap between designers and developers to speed application development time by providing a visual environment in which to create application interfaces. You can find a free trial version at www.microsoft. com expression . For the Silverlight 3 development described in this book, you'll want to use Blend 3 or above. Figure 1-2. The visual interface in Blend makes creating Silverlight interfaces...
The basics of detecting collisions
There are different techniques available for detecting collisions, but we're going to stick to simple methods that use bounding circles or rectangles. Why circles Most of the objects you will deal with can fit into a circle fairly well, circles are not expensive from a processing perspective, and they are easy to detect collisions on. Take the spaceship we used earlier as an example. Figure 8-1 shows the ship inside of a bounding circle. If we want to determine whether the ship in Figure 8-1...
The Ellipse element
Figure 1-16. The Ellipse element icon The Ellipse element is used to draw ellipse shapes in your Silverlight applications. Like the previous few examples, the Ellipse element also has properties such as Fill, Height, IsHitTestVisible, Left, Name, Opacity, Stroke, Tag, Top, Visibility, and Width. Click and hold the Rectangle icon in the toolbox to access the Ellipse icon. When the Shapes fly-out menu opens, as in Figure 1-16, select the Ellipse icon. The shortcut key to create an Ellipse is L....
Silverlight Tools for Visual Studio
This is a free add-on for Visual Studio specifically for developing Silverlight applications. You can find this download at Currently, this package includes a developer version of the Silverlight plug-in, the Silverlight 3 Software Development Kit SDK , Visual Basic and C project templates, XAML IntelliSense and code generators, debugging for Silverlight applications, web reference support, and integration with Blend. All this may sound very complicated, but in a nutshell, this add-on makes...
Animating control points
In addition to the transform and property animations available to you in Blend and Silverlight, you can also manipulate the individual points that make up an object. Technically speaking, you are simply manipulating the properties of the control points that make up a path, but it is broken out here to a separate section for the sake of clarity. Open the controlpointAnimation project from Chapter 2. This project contains a sunset ocean scene, as shown in Figure 2-26. We'll use the Direct...
Silverlight Storyboard Path Data
Like double and color animations, point animations also come in two flavors PointAnimation and PointAnimationUsingKeyFrames. From a code perspective, they also become significantly more complex to work with since you are now dealing with the individual points that sit along a path and form an object. Even simple objects can become complex when viewed in the context of point animations. Open the PointFromTo project for Chapter 3. This project contains a simple path that is in the shape of an...
Multiple forward kinematic chains
2. Open the KinematicSegment.xaml.es file for editing. Because the Tentacle object will be building the kinematic chain from the KinematicSegment user control, we need to push some of the functionality to the individual segments. We're going to make the segments responsible for tracking their own angles rather than doing it globally as we did with the walk cycle. To do this, add the following variable declarations before the KinematicSegment constructor. These variables should all be familiar...
For developers
1. Start in Blend with the freshly opened Truck project. 2. Select the Project tab to the left of the Properties tab, and expand the MainPage.xaml item so you can see the MainPage.xaml.es code-behind file. 3. Double-click the code-behind to edit it in Blend. When the file opens, you will be looking at the code-behind file for the XAML file from the Truck project. 4. Position the cursor at the end of the InitializeComponent code, and press Enter to move the cursor to a new line. You will be...
The Path element
Paths are series of connected lines and curves used to form shapes. Paths have properties such as Fill, Height, IsHitTestVisible, Left, Name, Opacity, Stroke, Tag, Top, Visibility, and Width. If you are familiar with the Pen tool and the way that Bezier paths work in programs such as Photoshop or Illustrator, you will find that creating a path in Blend works in a similar manner. By selecting the Pen tool from the toolbox, you can create a path by clicking the artboard. Each time you click, a...
Silverlight Coordinate Axis
As you are aware, the coordinate system in Silverlight has only x and y axes, where x is the horizontal axis and y is the vertical. To imagine a 3D coordinate system like the one shown in Figure 7-6, a z axis line is drawn straight into your computer screen. We're not going to be coding up a true 3D coordinate system instead, we'll fake the visual cues that make people see objects as being farther away using some of the trigonometry you learned in Chapter 6. Figure 7-6. The z axis for a 3D...
About The Technical Reviewer
Since the introduction of Silverlight 1.1, Rob Houweling has been developing applications and writing articles on his weblog http web-snippets.blogspot.com , as well as being an active member of the forums on the Silverlight.net website where he likes to help out people with their problems. Rob is also cofounder of the Silverlight and Expression User Group in the Netherlands. Currently, Rob is employed by Amercom B.V. in the Netherlands, where he develops many websites and applications in...
Angles
We touched on an important topic briefly in Chapter 5 degrees vs. radians for angular measurement. You're going to be seeing radians, or converting between radians and degrees, a lot in this chapter, so it's probably a good time to get a better idea of what they're all about. This is important, because while Blend XAML will take angular measurements in degrees, any rotations you do via trigonometric functions will give you radians, and you will get unexpected results if you forget to convert...
Angles in Silverlight
As you saw earlier when working through the transform types, rotational angles in Silverlight are expressed in degrees and can be additive or subtractive for example, both 720 degrees and -720 degrees will rotate an object around twice. The former will rotate an object clockwise, while the latter will rotate an object counterclockwise. As you have seen along the way, Rotate transforms are accessible through code. By adding an x Name property to an object's Rotate transform, you can easily...
Creating user controls
Before digging into the next two topics, I need to take a moment and talk about user controls. When I say user control, I'm not referring to elements such as buttons or check boxes specifically, though those are examples of user controls. I'm referring to them more as a general method we will be using to add objects to a project. To this point, the majority of projects we've looked at have had the object just added to the main XAML file in the project, called MainPage.xaml. Moving forward, what...
Y axis rotation
In this section, we're going to look at how we can go about emulating movement of an object around the y axis, as illustrated in Figure 7-12. Figure 7-12. Y axis rotation causes an object to move up and down, front to back. One of the biggest visual clues we have to tell how far we are from an object is scale. Objects closer to us are larger, and those farther away are smaller, as illustrated by Figure 7-13. Our brains are pretty good at comparing the relative sizes of objects we know, such as...
Ghosting effects
Ghosting is an effect that is used in a lot of interactive applications you click a button or an element, and a copy of the element scales up and fades out over a second or two. This lets users know that the action they took was recognized. The effect can also be used when an application first loads in order to draw attention to a particular part of the interface. To create this type of effect, a copy of an object is created and hidden. Event listeners on the original object are used to capture...
Angular collisions
Figure 8-5. A collision occurring along two axes Figure 8-5. A collision occurring along two axes Figure 8-6. The same collision rotated counterclockwise. The rotation is the opposite of the angle between the two objects. Figure 8-6. The same collision rotated counterclockwise. The rotation is the opposite of the angle between the two objects. Figure 8-7 shows the same collision, with each ball's travel vector split into its respective x and y velocities. The original travel vectors are...
Inverse kinematics
We've gotten a pretty good look at how we can apply forward kinematics to a chain of objects and the type of motion it will create. Now, we're going to take a look at inverse kinematics, where the free end of a kinematic chain determines what the rest of the objects in the chain do. A good example of this would be to imagine a section of chain laying on a surface. If you grab one end of the chain and pull, the links will follow. If you pull just a bit, only the links close to the link you're...
Orbiting
Let's take a look at an application of this concept that is fun to see in action. The project we're going to build will draw a moon object on the screen, and we will use the techniques that were just covered to make a small space capsule orbit the moon. 1. Open up the MoonOrbit project to code along with this example. 2. The MainPage.xaml file for this project has a black background and a storyboard timer. We're going to want to make the moon draggable, so I've already added the necessary...
Particle Systems
In this chapter, we're going to take a look at how to build particle systems in Silverlight. Particle systems are often used to model so-called fuzzy objects objects that do not have well-defined surfaces, such as smoke, fire, and water. Now, before you get too excited, you should know that we won't be doing those types of particle systems here. Instead, we're going to create a base system that you can augment based on other concepts you've learned in this book in order to move in that...
Programming storyboards and animations
This section of the chapter will be useful if you're interested in learning how to program storyboards. As you have seen, there is quite an array of information that goes into storyboards and the animations they contain. All the storyboards and animations you have worked through can be created entirely from code. While it is perfectly acceptable to create storyboards in XAML as you have done to this point, there may be times when you want a little more flexibility in creating animations that...
Triangles
Triangles are classified in one of two ways either by their sides or by their angles. When categorized by their sides, they can be scalene, isosceles, or equilateral, as shown in Figure 6-4. A scalene triangle has no sides that are equal, or congruent. An isosceles triangle has two congruent sides, and in an equilateral triangle, all three sides and therefore angles are congruent. Triangles are typically annotated with letters at each angle, and referred to by their letters. The triangles shown...
The Line element
The Line element is used to draw a straight line between two points. Lines are nothing more than simple path segments that contain only two points. As such, they share the same properties as the Path element. You can create Line elements by selecting the Line icon from the Shapes fly-out menu or by using the Backslash key on the keyboard. Clicking and dragging the mouse on the artboard will draw a line. Holding the Shift key will constrain the angle of the line to 15-degree multiples. XAML for...
VR object images
Getting content to use in your Silverlight VR SLVR -based applications is likely to be the most time-consuming part of the process. When it comes to getting images, you basically have three options. The first is to use a 3D program to render out an object. This may involve some expense and a learning curve if you don't know 3D, although you may be able to get a friend or neighbor to help out if you know someone who uses a 3D program. The second method for getting content is to photograph your...
The Rectangle element
Rectangle XAML elements are used, as you might expect, to render rectangular shapes. Rectangle elements have attributes such as Fill, Height, IsHitTestVisible, Left, Name, Opacity, RadiusX, RadiusY, Stroke, Tag, Top, Visibility, and Width. As with other XAML elements, Rectangles can be added by typing in the appropriate XAML or by using the Rectangle icon on the toolbox. Click the Rectangle icon or press the M key and then click and drag on the artboard to create a rectangle. Holding down the...
Explosions
The next type of particle system we'll take a look at is an explosion. We'll start out with a circular explosion similar to the type you see in games or movies when a spaceship explodes. Debris will move out from the center point in a circular pattern, the diameter of which will increase along with the life span of the explosion. Open the RingExplosions project to code along with this example. Since this particle system is built on the same base system as the earlier examples, I've already...
A horizontal carousel
This time, you're going to do almost all of the work. I've set up a base project so you can follow along, but to really understand how everything fits together, it will be of more value to you to work through the project from the very beginning. 1. Open the HorizontalCarousel project. The project currently contains only the main page XAML, which consists of a gradient background and a storyboard timer called Spin. 2. Right-click the HorizontalCarousel C project name in Visual Studio's Solution...
Random explosions
Of course, not every explosion is ring-shaped, so let's work through an example of a more randomized explosion. This time, we'll create an application that creates a random explosion at the location of a mouse click on the main canvas. To code along, open the RandomExplosions project. Once again, the main code for the particle system is in place, and we'll walk through what you need to add in to make the explosion happen. 1. Open the MainPage.xaml.es file for editing. Since we'll be using the...
Combining storyboard properties
Although we examined the storyboard properties individually in the previous exercises, you will often find yourself combining them to achieve different effects. Let's look at how to use multiple storyboard properties at once 1. Open the ControlPointAnimation project. In Blend, double-click the MainPage.xaml file on the Project tab to open the XAML. This is the same project used in Chapter 2 to animate some wave swells. This project already contains an animation called MoveWaves that moves the...
Arctangent Atan
Arctangent is similar to arcsine and arccosine you hand the function the ratio, and it will return the angle. Arctangent is utilized like this The full code wrapped in the RadiansToDegrees converter would therefore look like the following The Math.Atan function will return the arctangent of the number provided as a numeric value that is between -pi 2 and pi 2 radians, or in terms you can probably visualize a little more easily, -90 degrees to 90 degrees, as illustrated in Figure 6-9. Figure...
The TextBlock element
XAML currently offers three types of text elements PasswordBox, TextBox, and TextBlock. PasswordBox is a box that accepts input from a user but masks the input with bullet characters. A TextBox is an editable text box, just like you would find on an HTML form. In contrast to a TextBox, TextBlocks are used to display a static block of text that cannot be edited by a user. They are typically used for providing instructions or other information, though they can also be useful for debugging by...
Emitters
Emitters are just what their name implies objects that emit particles. The example project we just built didn't make use of a specific emitter for the particle, but emitters are relatively easy to implement. Let's take a look at how we can make use of an emitter. 1. Open the ParticleEmitters project. This project contains the same MainPage.xaml and particle as the last project did, but also includes an object called Emitter. The XAML for the Emitter object is shown following it's nothing more...
Summary Rax
In this chapter, we looked at some ways to detect collisions and make objects react when a collision has occurred. One of the most common methods for collision detection involves using bounding circles for objects. By checking the distance between objects and testing to see if the distance is less than the sum of the two radii, we can quickly tell if the two objects are hitting. Linear collisions occur along a single axis and are the easiest to resolve. Angular collisions occur along two axes,...
Creating custom animated cursors
We haven't talked much about cursors, so let's do a quick overview before looking at how to create custom animated cursors. All the objects used in your Silverlight applications currently have eight cursors to choose from, plus the ability to turn the cursor off altogether Arrow, Eraser, Hand, IBeam, None, SizeNS, SizeWE, Stylus, and Wait. In order to change the cursor that is displayed for an object, you simply add a Cursor property to the object, and specify the type of cursor you would like...
A basic particle system
Let's take a look at how we would go about building a basic particle system in Silverlight. 1. Open the BasicParticleSystem project. This project contains the base MainPage.xaml file with a Timer storyboard and an object called Particle.xaml. 2. Open the Particle.xaml file, and take a look at the XAML, which is shown following. The particle itself is a less-than-impressive gray ellipse with a black stroke, as shown in Figure 10-1. Items of note in the code are that both the Scale transform and...
Combining oscillations and rotations
Of course, you can get much fancier with the way you're applying the calculations to various properties on objects. Let's code up something a little more complex. The next project, which will create some falling leaves, will combine many of the concepts we've covered. The leaves will be randomized much like the snowflakes, but as they fall and drift, they will rotate as well. We'll also randomize the fill for the leaves to give the application a little more of a natural feel. We'll use the...
How does this relate to work youve done in Silverlight
So you're sitting there looking at all the trigonometry and related functions and wondering how in the world right triangles and circles have anything to do with anything you've done in Silverlight. Let's take an example vector like the one shown in Figure 6-12. Looks familiar, right A vector is the radius of a circle when it comes to doing calculations, and the start point of a vector or more accurately, the coordinates of an object traveling along the vector is the origin. Figure 6-13 shows...
Using the control multiplane
The bed was a nice example of a single-plane SLVR object. Let's take a look at how to set up a multiplane object. 1. Open the SLVRFigure project. This project contains the SLVR object but no image. I figured you might like a little practice adding images to a project. 2. Right-click the SLVRFigure item in Solution Explorer, and select Add gt New Folder. Name the folder images. 3. Right-click the images folder you just added, and select Add gt Existing Item. Navigate to the WoodenFigure folder...
Vector math
How you choose to store vectors for your objects is entirely up to you you can store vectors as individual x,y components in different variables, as in the previous examples, or you can use a Point object to store both vector components in a single variable. One caveat to be aware of is that if you attempt to store a vector as a Point property using a getter and setter, you will not be able to access the individual components of the point. However, using Point data types as shown here as public...
Drop shadows
Like the blur effect, drop shadows are added to objects from the Appearance pane in Blend. Drop shadows have been around forever, and everybody has seen this type of effect a button or an image has a drop shadow, and when the object is clicked, it looks like it is pressed because of the change between the object and shadow. When the mouse button is released, the image pops back up. The description I just gave should clue you in as to which events you will need to use MouseLeftButtonDown and...
Animation with the Visual State Manager
The next technique we'll look at for working with frame-based animations uses the Visual State Manager. This tool can be used very effectively for frame-based animations it provides a quick-and-easy visual tool with which you can quickly set up an animation cycle. The interface for the Visual State Manager available in Blend allows you to take a series of objects and create snapshots of their properties. Once the snapshots have been created, code can be used to flip through them, giving the...