Cubic Bezier Curve
Draws a smooth cubic bezier curve passing through a set of points. This is an easy way of smoothening a polygon.
Dont worry, you dont have to input control points. It will automatically calculate them for you.
All you have to input is the points that you want to draw the curve through and the line tension.
You can change all the basic properties like stroke and fill.
Input the points in the order in which they are to be drawn.
Syntax
new cubicbezier(points, fill, fill_opacity, stroke, stroke_width, line_tension,close);
Parameters
| points | 2D Array : Array of x and y co-ordinates of the edges of the polygon. ex: [[x1,y1],[x2,y2],[x3,y3]] |
| fill | Color : fill color of the polygon |
| fill_opacity | Number [0 to 1] or percentage: fill opacity of the polygon |
| stroke | Color : stroke color of the polygon |
| stroke_width | Number : stroke width of the polygon |
| line_tension | Number [0 to 1] or percentage: tension of the curve |
| close | Boolean : whether to close the curve or not |
Example
new cubicbezier([[50,50],[100,100],[150,120],[200,60],[250,120],[300,90]], "#695fe6", 0, "#44d", 2, 0.3);
var t=0;
function draw(){
clearCanvas();
new cubicbezier([[50,150],[100,100],[150,120],[200,60],[250,120],[300,90] ], "#695fe6", 0, "#44d", 2, 1*abs(sin(t)));
t+=0.001;
requestAnimationFrame(draw);
};