Canvas implements a higher-order besell curve (N-order besell curve generator), canvas besell

Canvas implements a higher-order besell curve (N-order besell curve generator), canvas besell

Preface

Since the native Canvas only supports a third-level beiser curve, what should I do if I want to add multiple control points? (Even if most of the complex curves can be simulated with Step 3 besell) at the same time, it is difficult for us to intuitively understand the location of the besell control point to determine the number of control points that can form the desired curve. In line with the above two pain points, the Community does not seem to have a level-N solution (js version), so this time the author is very serious about open-source bezierMaker. js!

BezierMaker. js theoretically supports the generation of N-order beiser curves. It also provides a test site for developers to add and Drag Control Points to generate a set of drawing animations. It intuitively allows developers to know the different generated curves corresponding to the control points at different locations.

If you like this work, welcome Star. After all, star is hard to come ..

Project address: here✨✨✨

Why do we need a test site?

You cannot know the exact position of the desired curve control point when drawing a complex higher-order besell curve. Simulate in the test site to obtain the coordinate value of the control point in real time, and convert the obtained coordinate to an object array and pass it to the BezierMaker class to generate the target curve.

 
 

Function

1. [X] any number of control points can be added to the test site
2. [X] The test site supports the creation of animated curves.
3. [X] control points can be freely dragged
4. [X] display the tangent of the beiser curve Forming Process
5. [X] native APIs are used to plot the Layer 3 and lower besell curves.

Introduction

<script src="./bezierMaker.js"></script>

Draw

The above is the test site. After you obtain the exact coordinates of the control point through the test site, you can call bezierMaker. js to draw the curve directly.

/*** Dom object of canvas * bezierCtrlNodesArr Control Point array, including x and y coordinates * color curve color */var canvas = document. getElementById ('canvas ') // use the native method to implement var arr0 = [{x: 70, y: 25}, {x: 24, y: 51}] var arr1 = [{x: 233, y: 225}, {x: 170, y: 279}, {x: 240, y: 51}] var arr2 = [{x: 23, y: 225}, {x: 70, y: 79}, {x: 40, y: 51}, {x: 300, y: 44}] var arr3 = [{x: 333, y: 15}, {x: 70, y: 79}, {x: 40, y: 551 },{ x: 170, y: 279 },{ x: 17, y: 239}] var arr4 = [{x: 53, y: 85}, {x: 170, y: 279}, {x: 240, y: 551}, {x: 70, y: 79}, {x: 40, y: 551}, {x: 170, y: 279}] var bezier0 = new BezierMaker (canvas, arr0, 'black') var bezier1 = new BezierMaker (canvas, arr1, 'red ') var bezier2 = new BezierMaker (canvas, arr2, 'blue') var bezier3 = new BezierMaker (canvas, arr3, 'yellow') var bezier4 = new BezierMaker (canvas, arr4, 'green') bezier0.drawbezr () bezier1.drawbezr () bezier2.drawbezr () bezier3.drawbezr () bezier4.drawbezr ()

Draw Results

When there are less than three control points, the native API is used. When there are more than two control points, we can plot the points by using our own functions.

Core Principles

Plot the besell Curve

The core point of drawing the besell curve is the use of the besell formula:
 

 
 

The P0-Pn in this formula represents various power operations of each point and proportion t from the start point to each control point to the end point.

BezierMaker. prototype. besuppliers = function (t) {// call var x = 0, y = 0, bezierCtrlNodesArr = this in the besell formula. bezierCtrlNodesArr, // Control Point array n = bezierCtrlNodesArr. length-1, self = this bezierCtrlNodesArr. forEach (function (item, index) {if (! Index) {x + = item. x * Math. pow (1-t), n-index) * Math. pow (t, index) y + = item. y * Math. pow (1-t), n-index) * Math. pow (t, index)} else {// factorial is the factorial function x + = self. factorial (n)/self. factorial (index)/self. factorial (n-index) * item. x * Math. pow (1-t), n-index) * Math. pow (t, index) y + = self. factorial (n)/self. factorial (index)/self. factorial (n-index) * item. y * Math. pow (1-t), n-index) * Math. pow (t, index) }}) return {x: x, y: y }}

Traverse all vertices and calculate the coordinate x and y of the current point on the besell Curve Based on the current proportion t value (0 <= t <= 1. The author divides the value of t into 1000 parts, that is, t + = 0.01 each operation. In this case, the calculated x and y represent a point after the beiser curve is divided into 1000 portions. When the tvalue ranges from 0 ~ 1. After traversing 1000 times, the system generates 1000 x and y coordinates, and draw lines in sequence to simulate the high-order besell curve.

The author will explain the derivation of the besell formula in the subsequent articles. Now you only need to know That we calculated the actual besell curve into 1000 points through the besell formula, the class curve can be simulated after each point is connected in a straight line.

Implementation of animation generated by simulating the beiser curve of a field

For more information about this part of code, see here.

The overall idea is to use a recursive method to calculate the control points of each layer as the first-order besell function and connect them to the next layer. The logic author will explain the Animation Generation Principle of the test site in depth when explaining the theory of the besell curve formula ~

Summary

The author has always wanted to open up some open-source things (but there is nothing to write about the dishes). However, what he usually uses is written by people, and there is no other person who writes well in recreating the wheel. This time we found a blank area. Therefore, we solemnly decided to open source. Most of the advanced applications of besell are implemented by Android in gayhub. There are still many places in the front-end field to be discussed ~ A lot of criticism!

Last

Project address: here✨✨

Test site address: Be sure to join✨✨✨

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.