Graphics Evolutionary Computations in Higher Order Parametric Bezier Curves

This work demonstrates in practical terms the evolutionary concepts and computational applications of Parametric Curves. Specific cases were drawn from higher order parametric Bezier curves of degrees 2 and above. Bezier curves find real life applications in diverse areas of Engineering and Computer Science, such as computer graphics, robotics, animations, virtual reality, among others. Some of the evolutionary issues explored in this work are in the areas of parametric equations derivations, proof of related theorems, first and second order calculus related computations, among others. A Practical case is demonstrated using a graphical design, physical hand sketching, and programmatic implementation of two opposite-faced handless cups, all evolved using quadratic Bezier curves. The actual drawing was realized using web graphics canvas programming based on HTML 5 and JavaScript. This work will no doubt find relevance in computational researches in the areas of graphics, web programming, automated theorem proofs, robotic motions, among others.


Introduction
The importance of parametric curves in Computer Graphics [1], Computer Aided Design (CAD), Animation, Robotics and a number of other areas of computing cannot be overemphasized. The focus of this research is on a special parametric curve known as Bezier Curves [2]. The concept of Bezier Curves originated from the works of Pirerre Biezier [3] who is renowned to have applied it in design of car chassis. A Bezier curve is a smooth parametric curve, controlled by the shape of a defining polygon. The

Parametric Exploration
The general parametric equation of a Bezier curve is given by Eq. (1).
where, Z(x) is any point on the curve, P k is the kth Control point of the Bezier Curve, J N,K (x) is the Bernstein or Blending function, N is the degree of the Bezier Curve in question. The Blending function is the control function, also referred to in a of number previous researches as the Bezier basis functions. The components of Z(x) are further defined as follows: It can be deduced from the "Eqs. (1)-(4)" that the Parametric equation Z(x) is the sum of the products of Blending functions J and the corresponding control points P.

Blending Function Derivation
It is necessary at this stage to demonstrate the derivation of higher order blending functions. A 5th order will be used as a case study.
Given a Bezier Curve of 5th Order, one important task is to derive all the blending functions [14]. Since the Order of a Bezier Curve is same as the number of control points, it implies that a Bezier curve of 5th order has a total of five (5) control points. The relationship between the Order and the Degree of a curve is given by Eq. (5): Thus, for a 5th order case, the degree is N = 5 -1, which is 4. The Blending functions are therefore computed as follows: Therefore, Therefore, Therefore: Therefore: Therefore: Substituting all the Blending Functions into the general Eq. (1), the exact Parametric equation for a 4degree Bezier Curve is therefore given by: Therefore, 4 Derivation of Bezier Matrix The Bezier Matrix derivation will be demonstrated using a 4th degree case. First, the Blending functions are written in full polynomial format, and then converted to twisted coefficient formats as follows: In twisted coefficient format, this gives In twisted coefficient format, this gives: In twisted coefficient format, this gives: In twisted coefficient format, this gives: In twisted coefficient format, this gives: The Bezier Matrix (BEZMAT) is generated by collating all the twisted coefficients of the Blending Functions as shown in Fig. 1:

Thus, the Parametric Equation in
Bezier Matrix format is given by: where, BEZMAT is the Bezier Matrix.

Bezier Curve Sketching
Suppose a Bezier Curve has four Control Points given by B0 [1,1], B1 [4,4], B2 [7,3] and B3 [6, 1]. The first computational task is to determine six points lying in the curve. The second task is to sketch the curve. Since there are four control points, it implies that the curve is of Order = 4, and thus, of Degree = 3, which is a Cubic Bezier Curve. The Parametric Equation is given by: To determine the points lying on the curve, first we select six random points (RANPO) which satisfy the inclusion condition 0 << k << 1.
Substituting the values of the Control Points B0, B1, B2, B3 and B4 in the Parametric equation, we have: For Parameter k = 0: For Parameter k = 0.2: The sketch of the curve is shown in Fig. 2. The control points are B 0 , B 1 , B 2 , and B 3 . The curve is shown in red colour, and the six points estimated to lie on the curve are E 0 , E 1 , E 2 , E 3 , E 4 and E 5 . The enclosure B 0 B 1 B 2 B 3 B 0 constitutes the convex hall.

Curve Join Condition
In a number of scientific applications, there are cases where two or more parametric curves need to be joined to form a single one. This process is tagged curve continuity [15]. Imagine two separate Bezier Curves P and Q shown in the left-hand side (LHS) of Fig. 3, with P0 and Q0 as starting points of the curves, and P1 and Q1 as the end points respectively. The two separate curves are joined to form a single curve shown in the right-hand side (RHS) of the figure.
For curve continuity to hold, some computational conditions must be met. These are known as zeroorder, first order, and third order parametric continuities respectively as will be discussed next.  First and foremost, for any two curves to P and Q to be joined, such that P is followed by Q, then the end point of curve P must be the beginning point of curve Q. This is known as the zero-order parametric continuity condition [16] as demonstrated in the RHS of Fig. 3. The equation is given by Secondly, suppose the two curves P and Q are of degree N, then for the join to be smooth, the first-order parametric condition must hold. The conditional equation is a derivative [17] given by: Thus, the first-order parametric continuity condition [18] ensures the smoothness of a joint curve. The implication of this rule is that the tangent at the end point of first curve P is the same as the tangent at the first point of the second curve Q. As earlier proved in this research, the first derivatives of P at end points are given by the equations: Finally, second order parametric continuity condition [19] states that second derivates at the end point of the first curve P is the same as that of the beginning point of second curve Q. Mathematically: Again, the formula for the second derivatives at the beginning and end points are given by: Research has shown that whenever a curve satisfies the second order parametric continuity, it also automatically satisfies the first order continuity [20].

Foundational Proofs
A number of foundational theorems of Bezier Curves are of key applications to Computer Graphics. Two of these theorems to be proved in this work are the partition of unity theorem and the symmetry theorem respectively.

Partition of Unity Theorem
The partition of unity theorem [21] states that the sum of the Bernstein Polynomial of degree N is equal to unity. Mathematically: Proof: Obviously, the trivial statement [(1 − t) + t] = 1 is always true for every parameter t. Substituting this statement into a general Binomial Eq. (29), we have: which completes the proof.

Bernstein Symmetry Theorem
The Bernstein Symmetry Theorem [22] states that every Berstein Polynomial follows the mathematical symmetry as follows: Expanding the LHS of the symmetry Eq. (30) gives: Expanding the RHS of the symmetry Eq. (30) gives: By simple comparison, it is clear that "Eqs. (31) and (32)" are same. Thus, the theorem is proved.

Derivation of Derivatives
Derivatives of parametric curves is of key importance, due to its application in Computer Graphics and other areas of computing. Research has shown that the derivative of Bezier Curve is also in itself, another Bezier curve [23]. An unambiguous demonstration of the derivation process beginning with product rule of Calculus is as follows: which is the formula for first derivative.
9 System Implementation Before concluding this work, it is necessary to demonstrate the generation of Bezier Curves and applications in computer graphics in programmatic terms. A number of programming languages have application programming interface (API) or re-usable modules [24] specifically available for Bezier Curves related graphical designs and implementations. For instance, in Python the Bezier module is installed using the command pip install Bezier [25], and can be invoked into the programming environment using the command import Bezier [26].
However, Python versions 3.7 to 3.8 may bring "DLL Load Failed while importing _Speedup" error message in attempt to import Bezier as shown in Fig. 4, especially due to failure in pip installation process.
This anomaly is common in a number of Python integrated development environment (IDEs) such as Spider, Jupyter and Pycham used within Anaconda [27].
One very feasible alternative is the use of Canvas tools [28] in web graphics. The hypertext markup language (HTML) canvas can be used in conjunction with JavaScript [29] to build complex graphical objects in a bottom-up approach, beginning from simple parametric Bezier curves as components. The canvas element is a graphical container, which is driven by Javascripts to generate graphical kernels such as paths, boxes, circles, text, images, images, and many others.
By its nature, a canvas is borderless and empty until it is enabled with Javascript. This is achieved by specifying an <id attribute> tag to refer it in a script. Furthermore, the width and height attributes are used to define the size of the canvas, and then the style attribute is used to add a border. The sample code snippet shown in Fig. 5 was saved as a HTML file called canvas.html and executed in a browser to give the output on the right-hand side. The syntax for creating a quadratic Bezier is quadraticCurveTo (ctx, cty, a, b); where (ctx, cty) represent the coordinate of the control point, (a, b) is the coordinate of the end point, whereas the current point is achieved using the moveTo command.
In a similar way, since the cubic Bezier has two control points, the syntax for creating it is given by bezierCurveTo (ctx1, cty1, ctx2, cty2, a, b); where (ctx1, cty1) and (ctx2, cty2) represent the coordinates of the two control points.
The practical demonstration in this work uses HTML 5 Canvas in conjunction with Javascript for programming to implement the physical design shown in Fig. 6. The curve implementation is limited to use of quadratic Bezier curves only. The aim is to use quadratic Bezier curves to create handless twincups. One of the cups is standing up, while the second is turned upside down.
<! DOCTYPE html> <html> <body> <canvas id="Sample Canvas" width="300" height="300" style="border:2px solid #110011;" > </canvas> <body> <html>  The upper cup is ABF while the lower cup turned up-side down is CFD. Both have been sketched using a handheld pencil, all of which are to be generated using Bezier curves. Both cups touch at point F. The program output is shown in Fig. 7, while the canvas program source code is shown in Section 9.1.

Conclusion
This research has presented a very unambiguous study of Bezier Parametric curves. It lays theoretical foundation of Bezier curves, and presents relevant theorems and corresponding proofs. The importance of Bezier curves in Computer Graphics, and in other fields of computing was touched. The work was concluded by showing how Bezier curves could be programmed using HTML 5 canvas and Java Script.
While Bezier parametric curves have a lot of possibilities, there are however some limitations. One limitation is the obvious computational complexity, especially for handling higher order cases [30]. This is why a number of applications tend to focus their interests on cubic and quadratic cases. Secondly, it is also difficult to get exact points on the curve. This issue however, has been resolved using a number of algorithms, for instance de Casteljau [31,32].
As a means of evaluation, it is necessary to mention other works or tools that could be comparable to the use of canvas technology, as this current study. The Open GL has been successfully explored in Bezier curves implementations in a research by [33]. However, the focus was limited to cubic cases.
A number of other comparable works are [34], which is uses Adobe Illustrator, [35] which is uses 3D Maya, based on animation techniques, both of which are mainly used for drawing the required objects. On the other hands, [36] is a computational work, though the main focus was on the control points of Bezier curves, unlike this research which covered evolutionary computational issues, as well as the programmatical implementation.
Funding Statement: The authors received no specific funding for this study.