# Animating/Drawing a Path

• ### Question

• I have a Path that contains several ArcSegments (which do not have the same width & height, so they are not circles). What I want to do is animate these on the screen (as if somebody were drawing them). I know how to use storyboards and timers, but because of all the complex math involved with ArcSegments, determining what the values of the properties of each ArcSegment should be each time is much more complex than it is for LineSegments or even an ArcSegment with the same width & height. I have found equations to calculate points on an arc given the center, width, height, and either x or y. This would be great, except for the fact that incrementing x or y by a constant would cause one part of the ArcSegment to be drawn much faster than another. To put it simply, I basically need functions that can do the following (or something similar):

1. Calculate the center of the arc using the information specified for an ArcSegment

2. Calculate the point on an arc given a start point, sweep direction, and distance (and, of course, the data necessary to define the arc, such as center, width, and height)

Even though I was one of the best calculus students in my high school (although that was over 15 years ago, so I have basically forgotten most of it) and have been using .NET for about 10 years, I have always had trouble using ArcSegment, mostly because it is so hard to calculate the data to define it. For example, in many cases I just know a start point, end point, start angle, and end angle when I am trying to connect 2 LineSegments that are at certain angles. I have sometimes considered simply resorting to using only circular arcs so that I could calculate everything I needed, but this would be much less visually appealing. Does anybody have any ideas on how to animate an ArcSegment or calculate the center of an arc defined by ArcSegment?

Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

Monday, May 5, 2014 8:08 PM

### All replies

• Can you post one of your arcsegments as an example that you want animated?

Matt Small - Microsoft Escalation Engineer - Forum Moderator

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Tuesday, May 6, 2014 12:32 PM
• There is nothing special about my ArcSegments, they are just normal ArcSegments in a Path, but here is an example (the ArcSegment is created using the Data property, but it could have been done using individual XAML tags):
`<Path Data="M 220 56 A 50 75 0 0 0 170 131"/>`

Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

Tuesday, May 6, 2014 3:24 PM
• OK I understand your dilemma now.

First, this is an elliptical arc segment, so you will be able to calculate the points once you have the equation for the overall ellipse.

The ellipse you've shown is a quarter of the entire ellipse.  This is important because it's easy to find the major axis and minor axis of the ellipse - width = 2 * absolute value of (x1-x2), height = 2* absolute value of (y1 - y2). The greater value is the major axis, the lesser is the minor axis.

Using this information, you can get the correct general formula from here:

http://www.mathwarehouse.com/ellipse/equation-of-ellipse.php

Once you have the formula, you can create a storyboard using a doubleanimation which does a range over the x-values, calculates the y-value from the x-value using the formula, and then you can populate each pixel as it's generated.

I hope this makes sense.

Matt Small - Microsoft Escalation Engineer - Forum Moderator