The usage of mathematical tools Bezier curves in Flash game
Pasyeka M., Parada R., Tyahun D., Kosmirak V.
Department of Software of Automated Systems, Ivano-Frankivsk National Technical University of Oil and Gas, 15, Karpatska str.,
Ivano-Frankivsk, UKRAINE, E-mail: [email protected]
Abstract - In article rozhlyadayetsya game application
development using mathematical modeling based on Bezier
curves and Flash application. This mathematical model using
a random number generator provides a large variety of unique
trails. Filed algorithm gluing Bezier curve to obtain the game
trail. Conducted computer simulations using this algorithm.
Key words - Bezier curves, Flash RIA, geometric modeling,
CSIT2014, computer science, information technologies.
I.Introduction
In this century the development of civilization is
certainly accompanied by the development of various
technologies particular computer.
The computer market is constantly filled with new
sophisticated software. Processor speed and memory
capacity are rising. In this technological struggle there is
such a phenomenon as computer games.
In Ukraine the amount of people who buy computer
games is increasing every year. For gamers it is just a toy,
but for developers and distributors - quite profitable
business.
From the above it can be concluded that the computer
game is estimated in two ways, as one that teaches
violence(in case of violent games), or as something that
develops concentration and attention. No doubt that
computer games are the quintessential of modern
knowledge and technologies, but they provide more
emotional effect than intellectual.
Positive potential of computer games is not always
realized. This depends crucially not on the game itself,
but from the man who plays and from what motivates him
to play the game. Besides the main motive of
entertainment, game could also realize other motives.
Depending on these motives different skills can be
formed for different players. Due to a variety of reasons
the game can promote to clash the reality or to escape
from it.
Didactic games in higher education engaged
A.A.Verbytskyy [4], Zh.S.Haydarov, P.I.Pidkasystyy [5],
A.M.Smolkin [6], they consider the game as a focused
didactic organization of educational and entertaining
interactions of students during their modeling of
integrated professional specialist. These games have
become known in higher education in the form of
business games aimed at forming and developing specific
skills to operate in the real world, to search for
information, which lacks, to solve some problems that
arise in the learning process, outline courses of action to
take solutions in the rapidly changing environment.
II. Formulation of the problem
In computer graphics often use point approximation.
The function f(x) is generally unknown, and the
relationship between the parameters x and y is defined as
some table {xi,yi}.
This means that a discrete set of values {xi}
corresponds to a set of function values {yi}
(i=0,1...n). These values or the results of calculations or
experimental data. In practice (e.g., for visualization) can
take the values y and at other points other than the nodes
xi. However, to obtain these values is only possible
through a very complex calculations or conducting
expensive experiments.
In such cases, optimal, from the point of view of saving
time and money is to use the existing table data to
approximate the unknown parameter y for any value of
the determinant of the parameter x (within a certain
interval), because the exact relationship y=f(x) is
unknown, or use it in calculations difficult.
The entire history of the construction of parametric
splines is their coefficients Fig. 1.
Fig. 1. Hermite Specification
To satisfy the conditions of continuity of the first order
C1 must at least know the coordinates of the docking
points and the values derived for the parameter at these
points. The Hermite form and are defined by means of
two connecting points P(0) = p1 and P(1) = p2, as well as
the values of the first derivatives the curve at these points
P’(0)
=
▽p1
і
P’(1)
=
▽p2
(1)
Bezier curves were developed in the 60-ies of XX
century independently of each other by Pierre bézier
(Bézier) from carmakers Renault and Field de Castile (de
Casteljau) of the company "Citroen", which was used for
the design of car bodies. Despite the fact that the opening
of de Castella was made earlier Bezier (1959), his
research was not published and was hidden by the
company as a production secret until the end of 1960-X.
For the first time curves were presented to the public in
1962 by the French engineer Pierre bézier, who, having
developed independently of de Castella, used them for
computer-aided design of automobile bodies. Curves were
called by the name of Beziers, and the name de Castella
called developed a recursive method for determining
curves (algorithm de Castella).
The Hermite form is not very convenient for interactive
work, you must set the first derivative, and the
relationship between it and the shape of the curve changes
from the point of view of a man not quite expected.
Much easier to operate only in one point.
Bezier curves require only 2 endpoints and 2 additional
control points to determine the derivatives at the nodes of
the dock.
Bezier curves can be obtained from the Hermite matrix.
The shape of the Bezier curve is specified lengths (from
3 to ....). Unlike forms of Hermite, Bezier curve will
always lie inside the polygon defined by the points P1…
Fig. 2.
Fig. 2. Bezier Specification
In the General case derived by setting (in particular, t)
for points docking, can be expressed as:
The transition from Hermite forms to Bezier curves can
be carried out using the transition matrix:
Gn=
P1
P4
r1
r4
1
0
-3
0
0
0
3
0
0
0
0
-3
0
1
0
3
P1
P2
P3
P4
(2)
In matrix form: Q(t)= TMBP
The final shape of the curves:
Q(t)=t3 t2 t
(3)
1
Q(t)=(-t3 +3t2-3t +1)P0 +(3t3-t2+3t)P1+(-3t3+3t2)P2+3t3P3
(4)
The relationship curves Hermite and Bezier in the
General case derived by setting (in particular, t) for points
docking, can be expressed as:
dQ (1)
 n( pn  pn  1)
dt
(5)
dQ(0)
 n( p1  p 0)
dt
They are indicated by four points Fig. 3.
Fig. 3. Bezier curve
(6)
The expansion function Bezier curves. The expansion
function of the Bezier curves in the sum will always be
equal to 1 at any point of the curve (at t  [0,1] Fig. 4.
Fig. 4. Bezier Blending Function
BEZ0(t) = (1- t)3
(7)
(t) = 3t(t-1)2
(8)
BEZ1
BEZ2(t) = 3t2(1- t)
t3
(9)
(10)
BEZ3(t) =
The expansion function Bezier curves - BEZk,n(t) are
the Bernstein polynomials.
During the development of Flash game it was necessary
to create a smooth curve which would be the trajectory of
the car. Furthermore, this curve should ensure passability
of the vehicle on every part of the track. It should also be
mentioned that the curve must be generated randomly
(probability of creating two identical curves is close to
zero).
This Flash application was created based on physical
engine Box2D which allows to use rectangles, circles and
segments as primitive geometrical object, so those were
the only available objects. Segments are the least resource
intensive and they allow to build any curve [1].
When we want to build a complex curve, we have two
options:
• use a Bezier curve with a high degree;
• divide the curve into smaller segments, and use lowgrade Bezier curves for each segment.
The last type is called path Bezier curve. Bezier Paths
are usually more simple and efficient to use than the
curves of high degree, so this method is described here.
Implementation presented here is only one of many
possible. We define a class that creates a list of control
points of the Bezier curves that make up the Bezier path.
Since segments connected end-to-end, start and end
points adjacent curves coincide, so we can avoid
duplication of points.
Bezier curves were selected as mathematical tools. A
Bézier curve is a parametric curve frequently used in
computer graphics and related fields.
Bezier Curve is one of the most common types of
smooth parametric curves. These curves are widely used
in modern CAD systems. They also became an integral
part of Windows OS (for example, they are used to
display fonts) therefore function of building Bezier curves
is a standard feature of Windows GDI+. Bezier curves
are essentially a variation of Hermite curves.
Bezier curve is a parametric curve of the form Eq. 1:
(11)
Where — control points,
Bernstein basis polynomials of degree n Eq. 2:
(12)
Among the existing types of Bezier curves was chosen
cubic, characterized as follows: four points P0, P1, P2 and
P3 in the plane or in higher-dimensional space define a
cubic Bézier curve. The curve starts at P0 going toward
P1 and arrives at P3 coming from the direction of P2.
Usually, it will not pass through P1 or P2; these points are
only there to provide directional information [2]. It can be
defined as
(13)
Software implementation of this mathematical
apparatus using programming language ActionScript 3.0
[3,7].
/* This function calculates the coordinates of the point
which describes the distance from the starting point of the
curve to the desired point*/
private function calculateBezierPoint(
t:Number,
p0:b2Vec2,
// starting point of the curve
p1:b2Vec2,
// first(left) control point
p2:b2Vec2,
// second(right) control point
p3:b2Vec2,
// final point of the curve
p:b2Vec2
// desired point
):void
{ var u:Number=1-t;
var tt: Number=t*t;
var uu: Number=u*u;
var uuu: Number=uu*u;
var ttt: Number=tt*t;
p.x=uuu*p0.x;
p.y=uuu*p0.y;
//first step
p.x+=3*uu*t*p1.x; p.y+=3*uu*t*p1.y;
//second step
p.x+=3*u*tt*p2.x; p.y+=3*u*tt*p2.y;
//third step
p.x+=ttt*p3.x;
p.y+=ttt*p3.y}
//fourth step
private var shape: Shape=null;
/* graphic container for Bezier curves. This function
builds a Bezier curve based on the specified number of
segments to which this curve is broken (smooth curve is
directly proportional to the number of segments) */
private function createBezierCurve(
SEGMENT_COUNT:Number,
// number of segments
p0:b2Vec2,
// starting point of the curve
p1:b2Vec2,
// first(left) control point
p2:b2Vec2,
// second(right) control point
p3:b2Vec2
// desired point
):void
{
var t:Number;
// parameter
var point: b2Vec2 = new b2Vec2();
/* object(point) to contain found value. This cycle is
looking for SEGMENT_COUNT+1 points on the current
Bezier curve */
for (var i:int=0; i<=SEGMENT_COUNT; i++)
{
t=i/SEGMENT_COUNT;
// calculation of parameter t є [0; 1]
calculateBezierPoint(t, p0, p1, p2, p3, point);
// finding the point
this.lvl_xml+=<p x={ RTD(point.x / Main.meters)
}
y={ RTD(point.y / Main.meters) }/>;
/* representation of the point in XML-format and
saving of coordinates. If object shape is not already
created then create it, configure the style of drawing lines,
go to the point point */
if (!shape)
{ shape=new Shape();
stage.addChild(shape);
shape.graphics.lineStyle(2, 0);
shape.graphics.moveTo(point.x, point.y)
}
/* else draw the line from the current point into point
point on the Bezier curve which is found in the current
iteration */
else shape.graphics.lineTo(point.x, point.y)
}
}
/* This function creates a track based on Bezier curves
herewith providing smooth transition from the end of
previous curve to the beginning of the current curve.
Calling this function leads to the construction of the track
of length last_x_position_on_track */
private function createBezierTrack
(last_x_position_on_track:Number):void
{
var mini:Number=0;
var p0:b2Vec2=null,
// starting point of the curve
p1:b2Vec2=new b2Vec2(),
// first(left) control point
p2:b2Vec2=new b2Vec2(),
// second(right) control point
p3:b2Vec2=new b2Vec2(50, 400);
// ending point
var SEGMENT_COUNT:Number=15;
/* number of segments (15 by default)
var max_x:Number=50, maximum change of
coordinate х */
max_y:Number=50;
// maximum change of coordinates у
var is_convex:Boolean = true;
/* if true–bending up, else–bending down. This cycle
builds a track: every iteration creates Bezier curve, the
transition from previous Bezier curve to it is smooth; the
track is generated randomly(the coordinates are generated
by calling function Math.random()), so occurrence of two
identical tracks is almost impossible.*/
for (;p3.x<last_x_position_on_track; is_convex=!
is_convex) {
/* If starting point exists then create Bezier curve, else
create the starting point */
if (p0) createBezierCurve(SEGMENT_COUNT, p0, p1,
p2, p3);
else p0=new b2Vec2();
p0.x=p3.x;
p0.y=p3.y;
/* The ending point of the previous curve is the starting
point of the next curve */
var rnd = Math.random();
// random number between 0 and 1
p3.x+=(rnd+1.5)*max_x;
// changing of coordinate x by random value
p3.y+=(Math.random()>0.5?-1:1)
* (!is_convex? 1:-1)
*(rnd-0.5)*max_y
*(p3.x-p0.x)/max_x;
/* changing of coordinate y by random value depending
on convexity of the curve, maximum change of the
coordinate x, the coordinates of control points are
adjusted in a similar way considering some values */
p1.x=(p0.x+p3.x)/2+(Math.random()-0.95)
*0.9*(p3.x-p0.x);
p2.x=p1.x+(Math.random()*0.9)*(p3.x-p1.x);
p1.y=(p0.y+p3.y)/2+(is_convex?1:-1)
*(Math.random() +0.5) *max_x/15*(p3.x-p0.x)/max_y;
p2.y=p1.y+(is_convex?1:-1)*(Math.random()+0.5)
*max_x/15*(p3.x-p0.x)/max_x;
SEGMENT_COUNT=(p3.x-p0.x)/max_x*5+5;
/* change of the numbers of segments depending on the
curve length */
if (Math.random()>0.9) is_convex=!is_convex;
/* Convexity change, depending on the value of the
variable mini the amount of segments is changing by the
algorithm below: if mini<=0 then the amount of segments
remains the same but the maximum deltas of x and y
changes on bigger random values and also with
probability of 0.1 the ending point of the curve shifts, else
the amount of segments changes and maximum deltas of
x and y changes on lesser random values. Herewith
variable mini decreases in every cycle iteration. */
if (mini--<=0) {max_x=150+Math.random()*100;
max_y=50+(Math.random()-0.5)*50;
if (Math.random()>0.9) {
p3.x+=100+Math.random()*350;
p3.y+=(Math.random()-0.5)*500+100 }
if (Math.random()>0.3) mini=Math.random()*10+1 }
else { SEGMENT_COUNT=3+Math.random()*4;
max_x=50*Math.random()+50;
max_y=50*Math.random()+25}}
/* Zooming to reduce the graphic object-container to
display all track on one screen. */
shape.scaleX = shape.scaleY = 0.09
*last_x_posotion_on_track / 5500;
shape.y = 200 }
The result of the simulation game track using the
mathematical apparatus of Bezier curves is shown in
Fig. 5.
The track is built with a scale of 1:6,25.
Fig. 5 The model the game tracks
Use the simulated curve for the game tracks shown in
Fig. 6.
Fig. 6. Games track
Conclusion.
Therefore, in this study we demonstrated that it is
possible to use mathematical tools Bezier curves to
implement the algorithm of constructing smooth curve.
This curve was used as a track for a car in a Flash
game,so this curve was constructed in such a way as to
ensure the possibility of passing any part of it.
Development and modeling of computer games using
mathematical tools Bezier curves can increase motivation
and competence of university students in the disciplines
of modeling software, software engineering, etc., to
exercise more emotional background, which will facilitate
innovative solutions for solving this problem, and with
and this can improve quality of learning through the
development of students' search and creative thinking.
References
[1] http://redefy.net/tag/box2d/.
[2] D. Rogers, J. Adams. (2001). Matematycheskye
Fundamentals mashynnoy graphics. Moscow: Mir. with.
604 p. ISBN 5-03-002143-4.
[3] Colin Passion "ActionScript 3.0 for Flash.
Podrobnoe MANUAL".
[4] A. Verbitsky Methods of active learning in school
High society: Kontekstnыy approach. - Moscow, 1990
[5] Arstanov MJ, Pydkasystыy PI, Haydar ZH.S.
Problem-modelnoe Education: Issues of theory and
technology. - Alma-Ata, 1980 – 207p.
[6] Smolkyn AM Delovaja èãðà As a method of
training in preparation and Improving qualifications
rukovodyaschyh frames. - M .: Moscow Worker, 1978 p.11.
[7].http://help.adobe.com/en_US/FlashPlatform/referen
ce/actionscript/3/.