Welcome guest, here you can read the whole selected article.

The website with source code tutorials for programming flash games.
If you are looking for a fun, you can also play my online games.

Home | Tutorials | Games | Others | About »  Sign Up | Log In  « 



Creating a ball trajectory to look like a moving ball in 3D perspective - Part 1

Posted on 14-Mar-2008, 13:24:39
All parts of this tutorial series: 1 2 3 4

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:

Bezier Curves

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:

Bezier CurvesP0, 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.

Complete source code you can download here!







No comments yet!



Please login if you wish to post your comments!

Games





Recent articles





Copyright 2009 © Ask For Game Task. All rights reserved.