Bezier Curves are frequently used in computer graphics to produce curves which appear reasonably smooth at all scales as opposed to polygonal lines, which cannot scale as smoothly. Bezier curve have made programmers' lives easier because it is easy to use and above all they are pretty to look at.
They are the most fundamental curves for image processing and for generating computer graphics. They are used mainly to represent points, in approximations, curve fitting and for interpolation. Interpolation means Bezier curves are used to connect points together to form a smoother graphic. They are also used because they are easy to compute and they can be stitched together to form any shape that is wanted.
Most of the time, using conventional/procedural graphic techniques are the best way to make game features that give more control and make it outstanding. Here is a simple example of an animated river using Bezier curve in Unity3D, to give an idea about what type of graphical implementations we can produce using Bezier curves.
Animated River using Bezier curve (Unity Web Player Link) :-
Applications
Bezier curves are used in Games, Computer Graphics, Animations and Fonts. Here are some more details:-
- Games and Computer Graphics
- The Bezier curve is essential in allowing engineers, graphic designers, and architects to create images to represent the items they are making. Without the Bezier curve, it would be more difficult to draw or generate images with a computer.
- In all the games, we are using bezier curves directly or indirectly for many different things. It can describe paths and different shapes. For example fonts, vehicle design, drawing paths for various AI in games, dynamic rivers, roads etc.
- Vector graphics programs like Adobe Illustrator, Corel and Inskcape.
- Graphics Editing Softwares like Adobe Photoshop, GIMP, Pizap, Microsoft Publisher, Picasa
- 3D Modelling tools like Blender, Maya, 3DSMax many more
- Animation
- In Animation applications like Adobe Flash and Synfig
- In 3D tools like Blender, Maya, 3DSMax,Unity3D to define 3D paths as well as 2D curves for keyframe interpolation.
- Fonts
- Creating fonts or images is fairly simple with the aid of Bezier curves.
- Font engines like FreeType, draw the font's curves on pixelated surface in a process of font rasterization.
- Modern imaging systems like PostScript, Asymptote, Metafont aand SVG
- TrueType and OpenType fonts use these for different kinds of the fonts and flavours.
Understanding Bezier curves better
We all know what a curve is. Below are some examples of the curves in the diagram. Generally speaking, they are objects similar to a line but not necessarily straight.
Bezier Curve Definition
Bezier curve is a type of curve that is easy to use, and can form many shapes.Mathematically, Bezier curve can be defined by set of control points P0, P1, P2 through Pn, where n is called its order.
n = 1 for linear
n = 2 for quadratic
and so on.
In Bezier curves start point and end point are the main points.
The intermediate points generally do not lie on the curve, and the first and the last control points are always a part of the Bezier curve.
Here are some examples of valid Bezier curves:-
- Curve without inflection and loop
- Curve with inflection and without loop
- Curve with loop
- Curve with cusp
- Curve with straight lines
- Curve with parallel control points
So Bezier curve can be defined for any degree of n. So you can write a function to draw curve from 1 to infinity. Based on the order of curve or number of anchor points we can term curves by names like:-
Linear Bezier:
![Animation of a linear Bézier curve, t in [0,1]](http://en.wikipedia.org/wiki/File:Bezier_1_big.gif)
Quadratic Bezier:
![Animation of a quadratic Bézier curve, t in [0,1]](http://en.wikipedia.org/wiki/File:Bezier_2_big.gif)
Cubic Bezier:
![Animation of a cubic Bézier curve, t in [0,1]](http://en.wikipedia.org/wiki/File:Bezier_3_big.gif)
5th Order Bezier
and so on...
When we're talking about Bezier curves, we're talking about the things that you can see in the following graphics. They run from some start point to some end point, with their curvature being influenced by one or more "intermediate" control points.
The P0 and P2 are the startpoint and endpoint of the curve, and P1 is the control point of the Bezier curve. This curve does not pass through the control points. Here is a function that can be used to find the intermediate control point.
1
2
3
4
5
| // Calculate the control point from two points
private Vector3 FindControlPoint(Vector3 P0, Vector3 P1)
{
return new Vector3((p1.x + p2.x)/2,(p1.y + p2.y)/2);
}
|
This function above is the basic building block of Bezier curves.
Here's the code to generate the points from the definition of the curve:
1
2
3
4
5
6
7
| // Calculate point from quadratic Bezier expression
private Vector3 QuadraticBezier(Vector3 P0, Vector3 P1, Vector3 C, float t)
{
float x = (1 - t) * (1 - t) * P0.x + (2 - 2 * t) * t * C.x + t * t * P1.x;
float y = (1 - t) * (1 - t) * P0.y + (2 - 2 * t) * t * C.y + t * t * P1.y;
return new Vector3(x, y);
}
|
While implementing Bezier paths or creating Bezier curves you can speed up the development process by understanding the mathematical equations and then you can create your algorithm based on that. It is always suggested to draw the points, tangents or curves to debug the implementation.
Conclusion
These were the basics for the Bezier curve, In next blog we will dive into the code and implementation part, I will present Unity3D tutorial for using Bezier curve for 2D games like flight control and later on, we will proceed create a 3D example. I hope you got some ideas about Bezier applications area and implementation.
No comments:
Post a Comment