Theme: The simplest introduction to Bezier curves ever
Well, this is my first tutorial and it will be some kind of simple introduction to programming flash games.
Let's start it with the explanation what we would like to get at the end of the series of these tutorials.
In fact, the problem we want to solve is simple: we have a starting point of the ball defined by (X1, Y1)
coordinate and want to implement a ball trajectory to an ending point defined by (X2, Y2) coordinate.
We will ignore gravity, wind and other similar physical parameters which could be influence to the ball moving in the reality.
The image below shows the whole problem:
One of the way to solve this problem could be implementing an algorithm for computing points of Bezier curve
so I will try to use it in this tutorial series. The basis for this algorithm is a control polygon defined by at least three control points
(depending on desired degree of a Bezier curve). For our problem, it is enough to compute a curve of second degree
what means that we must define three control points (P0, P1 and P2).
The principle of algorithm is constructing a segment curve from the defined control polygon by repeated linear interpolations.
See image below:
P0, P1, P2 - defined points of control polygon
B1, B2, B3, B4 - computed points of bezier curve by repeated linear interpolation
So first thing we must implement is to define starting (P0) and ending point (P2) of the control polygon by mouse clicking. A middle point (P1) will be later calculated by the program as a point that lies between chosen starting and ending point.
At the beginning of the program we will define some global variables:
Here is the source code to select and draw (X1,Y1) and (X2,Y2) points by mouse:
And we get this:
Well as you see, we get nothing special, but maybe it is a good start for the first tutorial.
Or maybe not? Anyway, please don't despair because in the next part we will be more creative and implement the algorithm for calculating and displaying points of Bezier curve.