Theory and Drawing Method of the besserl curve (B & #233; giscurve ),

Theory and Method of Drawing the bé-Z curve

Demo address

Formulas are very important in mathematics. Let's look at the formulas first.

Linear formula

For the numbers P0 and P1 at the specified point, the linear Beitz curve is just a straight line between two points. This line is shown below:

B (t) = P0 + (P1-P0) t = (1-t) P0 + tP1, t 0, 1]

It is equivalent to linear interpolation.

Quadratic formula

The path of the bizz curve is traced by function B (t) of the given point P0, P1, and P2:

The TrueType shape uses a quadratic Beitz curve composed of the Bez spline.

Cubic Formula

P0, P1, P2, and P3 point on a plane or in a three-dimensional space, a cubic Beitz curve is defined. The curve starts from P0 to P1 and starts from P2 to P3. It generally does not pass through P1 or P2; these two points only provide direction information there. The spacing between P0 and P1 determines the "length" of the curve toward P2 before it is switched to P3 ".
The curve parameters are as follows:

Modern imaging systems, such as PostScript, Asymptote, and Metafont, use a cubic Beitz curve composed of a Bez spline to describe the Curve Contour.

General parameter formula

The Order Beitz curve can be inferred as follows. To point P0, P1 ,... , Pn, The Beitz curve is:

The above formula can be recursively expressed as follows ,... , Pn.
In general, the first-order Beitz curve is the interpolation between the two-order Beitz curves.

Formula description

1. The curve that begins with P0 and ends with Pn, that is, the so-called endpoint interpolation method attribute.
2. A curve is a sufficient and necessary condition for a straight line. All control points are placed on the curve. Likewise, the necessary condition for a beiser curve to be a straight line is that the control points are collocated.
3. The starting point (End Point) of the curve is tangent to the first section (last section) of the besell polygon ).
4. A curve can be cut into two or any number of curves at any point of interest, and each curve is still a besell curve.
5. some seemingly simple curves (such as circles) cannot be accurately described using the besell curve, or segmented into the besell curve (although each internal control point is divided into four sections of the Beitz curve when the distance between the external control points on the unit circle is horizontal or vertical, it can be less than 1‰ of the maximum radius error is close to the circle ).
6. A curve located at a fixed offset (derived from a given besell curve), also known as an offset curve (false parallel to the original curve, such as the offset between two rails) cannot be precisely formed by the Beitz curve (except for some zookeeper instances ). In any case, the existing heuristic method can generally give an approximate value for the actual use.

Conversion matrix

Well, we generally use the third-order besell curve.
The formula above can be written as a matrix (linear algebra, commonly used in graphic programming.

T is equivalent to t in Formula 3, which is an independent variable. P represents a vertex, 0-3 represents four vertices, and x and y represent coordinates respectively. Therefore, given the coordinates of the four points, when t is transformed, there will be countless point coordinates, which are drawn by the point coordinates, that is, the besell curve.

Js Code reference:

Obite-bezier.js

Var matrix = function (config) {this. _ init (config)}; matrix. prototype = {_ init: function (config) {if (config & config. data) this. data = config. data;},/*** matrix multiplication * @ param {matrix} m multiplied matrix */mul: function (m) {var r = [], s = this. data, m = m. data, p = s [0]. length // the number of times each operation adds if (m. length! = S [0]. length) {T. trace ("Matrix cannot be multiplied")} for (var I = 0; I <s. length; I ++) {r [I] = [] for (var n = 0; n <m [0]. length; n ++) {r [I] [n] = 0; for (var l = 0; l <p; l ++) {r [I] [n] + = s [I] [l] * m [l] [n] ;}} this. data = r; return this;}, set: function (data) {this. data = data ;}, get: function () {return this. data}, toString: function () {return this. data. to_s () }}; var cubicbezr = function (config) {this. _ init (config)}; cubicbezr. prototype = {_ init: function (config) {var p = this. points = config. points; this. m1 = new obite. matrix (); this. m2 = new obite. matrix ({data: [1, 0, 0, 0], [-3, 3, 0, 0], [3,-6, 3, 0], [-1, 3,-3, 1]}); this. m3 = new matrix ({data: [p. optional toarray (), p. p1.toArray (), p. p2.toArray (), p. p3.toArray ()]}); this. m = null},/*** get the coordinate value calculated from a certain time point. The timeline cannot be controlled by this type */get: function (t) {/* this. m1.set ([[1, t * t]); */this. m1.set ([[1, t, t * t, t * t]); this. m = this. m1.mul (this. m2 ). mul (this. m3) return new obite. vector (this. m. get () [0] [0], this. m. get () [0] [1]) ;}}; var vector = function (x, y) {this. _ init (x, y) ;}; vector. prototype = {_ init: function (x, y) {this. x = x; this. y = y ;}, toArray: function () {return [this. x, this. y] ;}}; function drawPoint2d (canvas, vector) {if (typeof canvas === 'string') {canvas = document. getElementById (canvas);} var canvasContext = canvas. getContext ('2d '); // draw a vertex with (canvasContext) {beginPath (); lineWidth = 0.5; moveTo (vector. x, vector. y); lineTo (vector. x + 1, vector. y + 1); strokeStyle = "green"; stroke () ;}}var obite = function () {}; obite. extend = function (json) {for (var I in json) {obite [I] = json [I] ;}}; obite. extend ({matrix: matrix, cubicbeier: cubicbeier, vector: vector, drawPoint2d: drawPoint2d}); window. o = obite;

Points. js

Var points = {p0: new o. vector (100, 10), p1: new o. vector (1000,300), p2: new o. vector (500, 33), p3: new o. vector (5,400)}; var cb = new o. cubes ({points: points}); var p; var t = 0; var inter = setInterval (function () {t + = 0.001; if (t> 1) {end ()} p = cb. get (t) // draw point o according to the coordinate of p. drawPoint2d (canvas, p) ;}, 10); function end () {clearInterval (inter );}

Bezier.html

<!doctype html>

Reference: 1. Baidu Encyclopedia: http://baike.baidu.com/view/60154.htm
2. http://bbs.9ria.com/thread-71296-1-1.html

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.