Moving Beziers

This morning I was on my computer and playing around with the Graphics class in C#, and with this you can draw objects to the screen or a Bitmap object. This was quite good fun, however after a while it got a little dull, so I started to experiment with how I could get a Bezier curve to move as if it had been animated in a program like Flash, i.e. it was tweening between each point.

At first I thought it was going to be quite hard to calculate the positions, using trigonometry to calculate new positions between starting and end points, however I discovered it was as simple as increasing the X and Y coordinates by the correct amount.

The end result was a simple C# program that uses Background Worker (so it doesn't crash) to render 1000 frames. The program only randomly generates 10 different curves and simply calculates the other 990 that fall in between those points, gradually moving them.

In terms of animation software like Flash, this is a linear animation, i.e. the tween it uses between points is always the same speed, however other effects can be produced:

Linear

Quadratic

Square root

There are more many more options other the graphs like these, many animation programs offer a bounce effect where the graph quickly gets to the top before moving itself back a little before going back to the final position. I doubt it would be particularly difficult to extend my program to be able to cope with such graphs.

Currently the application has no real interface other than a button the kickstarts the render process. At some point I plan to extend the application so that there is some sort of animation interface, perhaps using WPF rather than WinForms, so that the user can create simple animations with tweens in.

I eventually intend to code something that will use Ribbon + WPF that will be a little like programs such as Pivot Stickfigure Animator that allow the user to animate a stickman, except that my program will have tweening between frames, allowing animation to be more fluid and natural.