Silverlight Circular Collision Animation
May 14, 2008 @ 12:34 pm in Microsoft, Silverlight
Building on the sample I created on Circular Motion, in this example I add a concept of collision. In physics, deflection is the event that occurs where an object collides and bounces off of another surface. In my example, two spheres collide at a given X/Y causing each ball to reverse direction and maintains its current speed and angle.
Just as in my previous example I use a single DispatcherTimer and a generic collection of UserConrols. To keep track of the direction that each ball is traveling I added a boolean property to my “Ball” user control to determine if it was rotating clockwise.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | void _timer_Tick(object sender, EventArgs e)
{
foreach (Ball ball in _balls)
{
double x = 0.0;
double y = 0.0;
double angle = ball.Rotate.Angle;
CalculatePosition(ball.Clockwise, ref x, ref y, ref angle, 1);
//update the position of the ball
ball.Rotate.Angle = angle;
ball.Translate.X = x;
ball.Translate.Y = y;
//check to see if a collision has occured
if (ball.CollisionType == Ball.CollisionTypes.Deflect)
{
foreach (Ball ball2 in _balls)
{
if (!ball.Equals(ball2))
{
double b2X = 0.0;
double b2Y = 0.0;
double b2A = ball2.Rotate.Angle;
//if we wait until the two balls are at the same X/Y then the balls
//will have overlapped. Instead, predict by looking 5 degrees ahead
//then switching direction.
CalculatePosition(ball2.Clockwise, ref b2X, ref b2Y, ref b2A, 5);
if (Math.Ceiling(x).Equals(Math.Ceiling(b2X))
&& Math.Ceiling(y).Equals(Math.Ceiling(b2Y)))
{
ball.Clockwise = !ball.Clockwise;
ball2.Clockwise = !ball2.Clockwise;
//ball.sound.Position = TimeSpan.FromMilliseconds(0);
//ball.sound.Play();
break;
}
}
}
}
}
} |
As you can see in the code above, I am doing a quick check to see if my rotating ball is defined to deflect upon collision. In this example, this is the only type of collision supported. In the future, I might add things like exploding on impact or magnetism upon the collision.
The first step in the circular rotation is to move each ball to its new X/Y position. Once moved, I check to see if any other balls overlap its current X/Y location. To make the collision more realistic (no overlap), I predict where each additional ball will exist 5 degrees forward of its current angle. This allows me to simulate the ball just touching each other before reversing directions.
Code: CircularCollision.zip
Tagged as animation, Circular Rotation, code, Collision, Deflection, DispatcherTimer, RotateTransform, Silverlight, TranslateTransform
May 16th, 2008 at 7:00 am
[...] Silverlight Circular Collision Animation – another physics based silverlight animation from Joel. Step-by-step explanation of the example and source code is available. [...]