p5bezier 0.2.7 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -5
- package/lib/p5.bezier.min.js +3 -1
- package/lib/p5.bezier.min.js.LICENSE.txt +10 -0
- package/lib/p5.bezier.min.js.map +1 -0
- package/package.json +14 -9
- package/.eslintrc.json +0 -16
- package/.github/workflows/npm-publish.yml +0 -33
- package/.husky/pre-commit +0 -4
- package/.prettierignore +0 -5
- package/.prettierrc +0 -6
- package/.vscode/settings.json +0 -3
- package/examples/basic/index.html +0 -13
- package/examples/basic/sketch.js +0 -23
- package/examples/basic/style.css +0 -17
- package/examples/basic_object/index.html +0 -13
- package/examples/basic_object/sketch.js +0 -27
- package/examples/basic_object/style.css +0 -17
- package/examples/control_points/index.html +0 -13
- package/examples/control_points/sketch.js +0 -92
- package/examples/control_points/style.css +0 -17
- package/examples/fidelity/index.html +0 -13
- package/examples/fidelity/sketch.js +0 -48
- package/examples/fidelity/style.css +0 -17
- package/examples/package.json +0 -14
- package/examples/server.js +0 -16
- package/examples/shortest_point/index.html +0 -13
- package/examples/shortest_point/sketch.js +0 -41
- package/examples/shortest_point/style.css +0 -17
- package/img/cover.jpg +0 -0
- package/img/p5bezier.jpg +0 -0
- package/src/p5.bezier.js +0 -395
- package/webpack.config.js +0 -11
package/README.md
CHANGED
|
@@ -2,9 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|

|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://npmjs.org/package/p5bezier)
|
|
6
|
+
[](https://github.com/peilingjiang/p5.bezier/blob/main/LICENSE)
|
|
7
|
+
[](https://www.jsdelivr.com/package/npm/p5bezier)
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
Let **p5.bezier**, a [p5.js](https://p5js.org) library, help you draw the smoothest curves like never before. You can regard the library as an advanced version of the original p5.js `bezier()` function which takes no less or more than 4 points while cannot draw higher level curves. The p5.bezier library allows you to draw continuous and closed Bézier curves easily.
|
|
10
|
+
|
|
11
|
+
<!-- [**Try it now on p5.js Web Editor!**](https://editor.p5js.org/peilingjiang/sketches/7Z2pRG-TB) -->
|
|
12
|
+
[**Try it now on p5.js Web Editor!**](https://editor.p5js.org/peilingjiang/sketches/mVXzWEJbT)
|
|
8
13
|
|
|
9
14
|
**0.2.0 NEW** The library is now independent of p5.js so that you can use it for a wider range of projects (untested). However, an extra `initBezier(canvas)` line is needed before the drawings.
|
|
10
15
|
|
|
@@ -26,7 +31,7 @@ A Bézier curve is a parametric curve used in computer graphics and related fiel
|
|
|
26
31
|
|
|
27
32
|
## Getting Started
|
|
28
33
|
|
|
29
|
-
To use p5.bezier library, download [p5.bezier.min.js](https://raw.githubusercontent.com/peilingjiang/p5.bezier/
|
|
34
|
+
To use p5.bezier library, download [p5.bezier.min.js](https://raw.githubusercontent.com/peilingjiang/p5.bezier/main/lib/p5.bezier.min.js) file into your project directory and add the following line into the your HTML file:
|
|
30
35
|
|
|
31
36
|
```HTML
|
|
32
37
|
<script src="p5.bezier.min.js"></script>
|
|
@@ -51,7 +56,7 @@ The library is still a work-in-progress project. Therefore, code tends to change
|
|
|
51
56
|
You can also install using the package manager NPM (recommended):
|
|
52
57
|
|
|
53
58
|
```
|
|
54
|
-
npm install
|
|
59
|
+
npm install p5bezier
|
|
55
60
|
```
|
|
56
61
|
|
|
57
62
|
And then import the modules into your project:
|
|
@@ -89,7 +94,7 @@ Takes a string, either `"OPEN"` or `"CLOSE"`. If you want the curve to close its
|
|
|
89
94
|
|
|
90
95
|
**fidelity** (Optional)
|
|
91
96
|
|
|
92
|
-
Takes an integer from `0` to `10`, as default is `
|
|
97
|
+
Takes an integer from `0` to `10`, as default is `6`. How accurate you want the Bézier curve to be. The more inner vertices used to draw the curve, the more accurate it would be, however, the more computation would also be cost.
|
|
93
98
|
|
|
94
99
|
## Create a Bézier Object
|
|
95
100
|
|
|
@@ -148,17 +153,21 @@ For instance, if you want to run the example _basic_, simply type `node server.j
|
|
|
148
153
|
Currently available examples:
|
|
149
154
|
|
|
150
155
|
- **basic** draws a simple Bézier curve with 5 control points across the canvas.
|
|
156
|
+
- **basic_object** create a simple Bézier object with 5 control points across the canvas.
|
|
151
157
|
- **control_points** draws a curve and it's control points, which can be dragged around.
|
|
152
158
|
- **fidelity** draws curves with different fidelities.
|
|
153
159
|
- **basic_object** is similar to basic, while drew with Bézier object.
|
|
154
160
|
- **shortest_point** draws the shortest line from mouse to curve.
|
|
155
161
|
|
|
162
|
+
- **perlin** Use Perlin Noise (from p5.js) to control moving Bézier curves.
|
|
163
|
+
|
|
156
164
|
More complex examples to be updated.
|
|
157
165
|
|
|
158
166
|
### Projects and Live Demo
|
|
159
167
|
|
|
160
168
|
- [**Hair**](https://no-loss.netlify.app/), a visualization. See the source code here: https://github.com/peilingjiang/hair.
|
|
161
169
|
- *p5.bezier Example - Basic* on [CodePen](https://codepen.io/peilingjiang/pen/ZEOLVPx).
|
|
170
|
+
- *p5.bezier Example - Perlin* on [CodePen](https://codepen.io/peilingjiang/pen/eYMRJax).
|
|
162
171
|
|
|
163
172
|
Share your ideas and projects using the library!
|
|
164
173
|
|
package/lib/p5.bezier.min.js
CHANGED
|
@@ -1 +1,3 @@
|
|
|
1
|
-
|
|
1
|
+
/*! For license information please see p5.bezier.min.js.LICENSE.txt */
|
|
2
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.p5bezier=t():e.p5bezier=t()}(self,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var i in r)e.o(r,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:r[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{initBezier:()=>f,newBezier:()=>d,newBezierObj:()=>u});const r=[.2,.1,.05,.04,.02,.01,.008,.002,.001,5e-4,1e-4];let i,o,n,s,h,l,a,p,c;function f(e,t=!1){if(i=e,o=i.drawingContext,p5&&e instanceof p5.Graphics)h=!0,n="WebGLRenderingContext"===o.constructor.name?3:2,l=i.beginShape,a=i.vertex,p=i.vertex,c=i.endShape;else{if(!(p5&&e instanceof p5.Renderer||e.drawingContext))throw new Error("[p5.bezier] Canvas is not supported.");p5&&(!p5||e instanceof p5.Renderer)?n="WebGLRenderingContext"===o.constructor.name?3:2:(window.console.warn("[p5.bezier] Support for non-p5 canvas is not tested."),n=e.isP3D?3:2),h=!1,n="WebGLRenderingContext"===o.constructor.name?3:2,l=o.beginPath.bind(o),a=o.moveTo.bind(o),p=o.lineTo.bind(o),c=o.closePath.bind(o)}s=t}function d(e,t="OPEN",i=6){if(s&&!Array.isArray(e))throw new Error(`[p5.bezier] newBezier() function expects an array, got ${typeof e}.`);const o=r[i];if(0===n);else{if(s)for(let t of e)if(!Array.isArray(e)||t.length!==n)throw new Error("[p5.bezier] One or more points in the array are not input correctly.");"CLOSE"===t&&e.push(e[0]);let r=e.length-1;if(l(),a(...e[0]),2===n){let t,i,n,s;for(n=0;n<=1;n+=o){for(t=0,i=0,s=0;s<=r;s++)t+=w(r)/(w(s)*w(r-s))*Math.pow(1-n,r-s)*Math.pow(n,s)*e[s][0],i+=w(r)/(w(s)*w(r-s))*Math.pow(1-n,r-s)*Math.pow(n,s)*e[s][1];p(t,i)}p(...e.slice(-1)[0])}else if(3===n){let t,i,n,s=[0,0,0];for(t=0;t<=1;t+=o){for(s=[0,0,0],i=0;i<=r;i++)for(n=0;n<3;n++)s[n]+=w(r)/(w(i)*w(r-i))*Math.pow(1-t,r-i)*Math.pow(t,i)*e[i][n];p(...s)}p(...e.slice(-1)[0])}if(h)c(t);else if("CLOSE"===t)c();else if(s&&"OPEN"!==t)throw new Error("[p5.bezier] Close type error. A bezier curve can only be either OPEN or CLOSE.");x()}}function u(e,t="OPEN",i=6){const o=r[i];if(s&&!Array.isArray(e))throw new Error(`[p5.bezier] newBezierObj() function expects an array, got ${typeof e}.`);if(s)for(let t of e)if(!Array.isArray(e)||t.length!==n)throw new Error("[p5.bezier] One or more points in the array are not input correctly.");return new b(e,t,o,n)}function w(e){return e>1?e*w(e-1):1}function y(){return 4===arguments.length?Math.hypot(arguments[0]-arguments[2],arguments[1]-arguments[3]):6===arguments.length?Math.hypot(arguments[0]-arguments[3],arguments[1]-arguments[4],arguments[2]-arguments[5]):0}function x(){i._doFill&&o.fill(),i._doStroke&&o.stroke()}class b{constructor(e,t,r,i,o=null){if(s&&2!==i&&3!==i)throw new Error(`Dimension error. The bezier curve is ${i}-dimensional and doesn't belong to our world.`);if(this.controlPoints=e,"CLOSE"===t)this.controlPoints.push(e[0]),this.closeType="CLOSE";else{if("OPEN"!==t)throw new Error("[p5.bezier] Close type error. A bezier curve can only be either OPEN or CLOSE.");this.closeType="OPEN"}this.dimension=i,this.increment=r,this.vertexList=[],this.vertexListLen=0,this.p=this.controlPoints.length,this.n=this.p-1,null===o?this._buildVertexList():(this.vertexList=o,this.vertexListLen=this.vertexList.length)}_buildVertexList(){if(this.vertexList=[],2===this.dimension){let e,t,r,i;for(r=0;r<=1;r+=this.increment){for(e=0,t=0,i=0;i<=this.n;i++)e+=w(this.n)/(w(i)*w(this.n-i))*Math.pow(1-r,this.n-i)*Math.pow(r,i)*this.controlPoints[i][0],t+=w(this.n)/(w(i)*w(this.n-i))*Math.pow(1-r,this.n-i)*Math.pow(r,i)*this.controlPoints[i][1];this.vertexList.push([e,t])}}else if(3===this.dimension){let e,t,r,i=[0,0,0];for(e=0;e<=1;e+=this.increment){for(i[0]=0,i[1]=0,i[2]=0,t=0;t<=this.n;t++)for(r=0;r<3;r++)i[r]+=w(this.n)/(w(t)*w(this.n-t))*Math.pow(1-e,this.n-t)*Math.pow(e,t)*this.controlPoints[t][r];this.vertexList.push(i)}}return this._addVertex(this.controlPoints.slice(-1)[0]),this.dimension=this.vertexList[0].length,this.vertexListLen=this.vertexList.length,this.vertexList}_addVertex(e){if(2!==this.dimension&&3!==this.dimension)throw new Error("Vertices can only be in 2D or 3D space.");p(...e)}_distVertex(e,t){return 2===this.dimension?y(e[0],e[1],t[0],t[1]):3===this.dimension?y(e[0],e[1],e[2],t[0],t[1],t[2]):void 0}draw(e){if(e){if(!(Array.isArray(e)&&2===e.length&&this.increment<=.008))throw this.increment>.008?new Error("Fidelity is too low for a dash line. It should be at least 6."):new Error("Your dash array input is not valid. Make sure it's an array of two numbers.");{let t=Math.abs(e[0]),r=t+Math.abs(e[1]),i=0,n=0,s=this.vertexList[0],h=!0;o.save(),o.fillStyle="rgba(0, 0, 0, 0)",l(),a(...this.vertexList[0]);for(let e=1;e<this.vertexListLen;e++)i+=this._distVertex(s,this.vertexList[e]),n=i%r,n<=t&&h?this._addVertex(this.vertexList[e]):n>t&&n<=r&&h?h=!1:n<=t&&!h&&(a(...this.vertexList[e]),h=!0),s=this.vertexList[e];x(),o.restore()}}else{l();for(let e of this.vertexList)this._addVertex(e);"CLOSE"===this.closeType&&o.closePath(),h?c(this.closeType):"CLOSE"===this.closeType&&c(),x()}}update(e){if(e.length!==this.controlPoints.length)throw new Error("The number of points changed. (Keep the length of the point array the same.)");L(this.controlPoints,e)||(this.controlPoints=e,this._buildVertexList())}move(e,t,r=null,i=!0,o=0){if(null===r&&3===this.dimension)throw new Error("To move a 3D curve, please specify (x, y, z).");{let n=[e,t];null!==r&&n.push(r);let s=[];for(let e=0;e<this.vertexListLen;e++)s.push(this.vertexList[e].slice());let h=new b(this.controlPoints,this.closeType,this.increment,this.dimension,s);for(let e=0;e<h.vertexListLen;e++)for(let t=0;t<h.dimension;t++)h.vertexList[e][t]+=n[t];return i&&h.draw(o),h}}shortest(e,t,r=0){let i,o=-1,n=0;for(let s of this.vertexList)-1===o?(o=this._distVertex(s,[e,t,r]),i=s):(n=this._distVertex(s,[e,t,r]),o>n&&(o=n,i=s));return i}}const L=(e,t)=>e.length===t.length&&e.every(((e,r)=>e===t[r]));return t})()));
|
|
3
|
+
//# sourceMappingURL=p5.bezier.min.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"p5.bezier.min.js","mappings":"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","sources":["webpack://p5bezier/webpack/universalModuleDefinition","webpack://p5bezier/webpack/bootstrap","webpack://p5bezier/webpack/runtime/define property getters","webpack://p5bezier/webpack/runtime/hasOwnProperty shorthand","webpack://p5bezier/webpack/runtime/make namespace object","webpack://p5bezier/./src/p5.bezier.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"p5bezier\"] = factory();\n\telse\n\t\troot[\"p5bezier\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","/*\np5.bezier library by Peiling Jiang\n2020\n*/\n\nconst p5bezierAccuracyListAll = [\n 0.2, 0.1, 0.05, 0.04, 0.02, 0.01, 0.008, 0.002, 0.001, 0.0005, 0.0001,\n]\n\nlet _canvas,\n _ctx,\n _dimension,\n _strict,\n _useP5,\n _beginPath,\n _moveTo,\n _lineTo,\n _closePath\n\nexport function initBezier(canvas, strictMode = false) {\n _canvas = canvas\n _ctx = _canvas.drawingContext\n\n // eslint-disable-next-line no-undef\n if (p5 && canvas instanceof p5.Graphics) {\n // p5 graphics\n _useP5 = true\n _dimension = _ctx.constructor.name === 'WebGLRenderingContext' ? 3 : 2\n\n _beginPath = _canvas.beginShape\n _moveTo = _canvas.vertex\n _lineTo = _canvas.vertex\n _closePath = _canvas.endShape\n // eslint-disable-next-line no-undef\n } else if ((p5 && canvas instanceof p5.Renderer) || canvas.drawingContext) {\n // p5 canvas or other canvas\n // eslint-disable-next-line no-undef\n if (!p5 || (p5 && !(canvas instanceof p5.Renderer))) {\n window.console.warn(\n '[p5.bezier] Support for non-p5 canvas is not tested.'\n )\n _dimension = canvas.isP3D ? 3 : 2\n } else {\n _dimension = _ctx.constructor.name === 'WebGLRenderingContext' ? 3 : 2\n }\n _useP5 = false\n _dimension = _ctx.constructor.name === 'WebGLRenderingContext' ? 3 : 2\n\n _beginPath = _ctx.beginPath.bind(_ctx)\n _moveTo = _ctx.moveTo.bind(_ctx)\n _lineTo = _ctx.lineTo.bind(_ctx)\n _closePath = _ctx.closePath.bind(_ctx)\n } else {\n throw new Error('[p5.bezier] Canvas is not supported.')\n }\n\n _strict = strictMode // Always check and throw errors or not\n}\n\nexport function newBezier(pointList, closeType = 'OPEN', accuracy = 6) {\n if (_strict && !Array.isArray(pointList))\n throw new Error(\n `[p5.bezier] newBezier() function expects an array, got ${typeof pointList}.`\n )\n\n // Define the increment of t based on accuracy\n const tIncrement = p5bezierAccuracyListAll[accuracy]\n\n if (_dimension !== 0) {\n // Check if all points are valid\n if (_strict)\n for (let point of pointList)\n if (!Array.isArray(pointList) || point.length !== _dimension)\n throw new Error(\n '[p5.bezier] One or more points in the array are not input correctly.'\n )\n\n // Add the first point as the last point to close the curve\n if (closeType === 'CLOSE') pointList.push(pointList[0])\n let p = pointList.length // pointList has p points for (p - 1) degree curves\n let n = p - 1\n\n _beginPath()\n _moveTo(...pointList[0])\n // Are we drawing 2D or 3D curves\n if (_dimension === 2) {\n // 2-Dimensional bezier curve\n let x, y, t, i\n for (t = 0; t <= 1; t += tIncrement) {\n x = 0\n y = 0\n for (i = 0; i <= n; i++) {\n // i point in pointList\n x +=\n (_helper_factorial(n) /\n (_helper_factorial(i) * _helper_factorial(n - i))) *\n Math.pow(1 - t, n - i) *\n Math.pow(t, i) *\n pointList[i][0]\n y +=\n (_helper_factorial(n) /\n (_helper_factorial(i) * _helper_factorial(n - i))) *\n Math.pow(1 - t, n - i) *\n Math.pow(t, i) *\n pointList[i][1]\n }\n _lineTo(x, y)\n }\n _lineTo(...pointList.slice(-1)[0])\n } else if (_dimension === 3) {\n // 3-Dimensional bezier curve\n let xyz = [0, 0, 0],\n t,\n i,\n d\n for (t = 0; t <= 1; t += tIncrement) {\n xyz = [0, 0, 0]\n for (i = 0; i <= n; i++) {\n for (d = 0; d < 3; d++) {\n xyz[d] +=\n (_helper_factorial(n) /\n (_helper_factorial(i) * _helper_factorial(n - i))) *\n Math.pow(1 - t, n - i) *\n Math.pow(t, i) *\n pointList[i][d]\n }\n }\n _lineTo(...xyz)\n }\n _lineTo(...pointList.slice(-1)[0])\n }\n\n if (_useP5) _closePath(closeType)\n else if (closeType === 'CLOSE') _closePath()\n else if (_strict && closeType !== 'OPEN')\n throw new Error(\n '[p5.bezier] Close type error. A bezier curve can only be either OPEN or CLOSE.'\n )\n\n _helper_style()\n\n return\n }\n}\n\nexport function newBezierObj(pointList, closeType = 'OPEN', accuracy = 6) {\n // Define the increment of t based on accuracy\n const tIncrement = p5bezierAccuracyListAll[accuracy]\n\n if (_strict && !Array.isArray(pointList))\n throw new Error(\n `[p5.bezier] newBezierObj() function expects an array, got ${typeof pointList}.`\n )\n\n // Check if all points are valid\n if (_strict)\n for (let point of pointList)\n if (!Array.isArray(pointList) || point.length !== _dimension)\n throw new Error(\n '[p5.bezier] One or more points in the array are not input correctly.'\n )\n\n // All checks done\n let bObj = new BezierCurve(pointList, closeType, tIncrement, _dimension)\n return bObj\n}\n\nfunction _helper_factorial(a) {\n // Factorial function for binomial coefficient calculation\n return a > 1 ? a * _helper_factorial(a - 1) : 1\n}\n\nfunction _helper_dist() {\n if (arguments.length === 4)\n return Math.hypot(arguments[0] - arguments[2], arguments[1] - arguments[3])\n else if (arguments.length === 6)\n return Math.hypot(\n arguments[0] - arguments[3],\n arguments[1] - arguments[4],\n arguments[2] - arguments[5]\n )\n return 0\n}\n\nfunction _helper_style() {\n if (_canvas._doFill) _ctx.fill()\n if (_canvas._doStroke) _ctx.stroke()\n}\n\nclass BezierCurve {\n // Take pointList, closeType, tIncrement, bezierDimension into constructor\n constructor(pL, closeT, tI, bD, vL = null) {\n if (_strict && bD !== 2 && bD !== 3)\n throw new Error(\n `Dimension error. The bezier curve is ${bD}-dimensional and doesn't belong to our world.`\n )\n\n this.controlPoints = pL\n\n if (closeT === 'CLOSE') {\n this.controlPoints.push(pL[0])\n this.closeType = 'CLOSE'\n } else if (closeT === 'OPEN') {\n this.closeType = 'OPEN'\n } else {\n throw new Error(\n '[p5.bezier] Close type error. A bezier curve can only be either OPEN or CLOSE.'\n )\n }\n\n this.dimension = bD\n this.increment = tI\n this.vertexList = []\n this.vertexListLen = 0\n this.p = this.controlPoints.length // Has p points for (p - 1) degree curves\n this.n = this.p - 1 // Degree\n // Calculate thr vertex\n if (vL === null) {\n this._buildVertexList()\n } else {\n this.vertexList = vL\n this.vertexListLen = this.vertexList.length\n }\n }\n\n _buildVertexList() {\n /*\n Return vertexList\n */\n this.vertexList = []\n if (this.dimension === 2) {\n // 2-Dimensional bezier curve\n let x, y, t, i\n for (t = 0; t <= 1; t += this.increment) {\n x = 0\n y = 0\n for (i = 0; i <= this.n; i++) {\n // i point in pointList\n x +=\n (_helper_factorial(this.n) /\n (_helper_factorial(i) * _helper_factorial(this.n - i))) *\n Math.pow(1 - t, this.n - i) *\n Math.pow(t, i) *\n this.controlPoints[i][0]\n y +=\n (_helper_factorial(this.n) /\n (_helper_factorial(i) * _helper_factorial(this.n - i))) *\n Math.pow(1 - t, this.n - i) *\n Math.pow(t, i) *\n this.controlPoints[i][1]\n }\n this.vertexList.push([x, y])\n }\n } else if (this.dimension === 3) {\n // 3-Dimensional bezier curve\n let xyz = [0, 0, 0],\n t,\n i,\n d\n for (t = 0; t <= 1; t += this.increment) {\n xyz[0] = 0\n xyz[1] = 0\n xyz[2] = 0\n for (i = 0; i <= this.n; i++) {\n for (d = 0; d < 3; d++) {\n xyz[d] +=\n (_helper_factorial(this.n) /\n (_helper_factorial(i) * _helper_factorial(this.n - i))) *\n Math.pow(1 - t, this.n - i) *\n Math.pow(t, i) *\n this.controlPoints[i][d]\n }\n }\n this.vertexList.push(xyz)\n }\n }\n // Ending fix\n this._addVertex(this.controlPoints.slice(-1)[0])\n\n this.dimension = this.vertexList[0].length // Update dimension\n this.vertexListLen = this.vertexList.length // Update vertexListLen\n return this.vertexList\n }\n\n _addVertex(vArray) {\n // vArray is an array of [x, y] position or [x, y, z] position\n if (this.dimension === 2 || this.dimension === 3) _lineTo(...vArray)\n else throw new Error('Vertices can only be in 2D or 3D space.')\n }\n\n _distVertex(vArray1, vArray2) {\n // Calculate the distance between\n // vertex_array_1 and vertex_array_2\n if (this.dimension === 2) {\n return _helper_dist(vArray1[0], vArray1[1], vArray2[0], vArray2[1])\n } else if (this.dimension === 3) {\n return _helper_dist(\n vArray1[0],\n vArray1[1],\n vArray1[2],\n vArray2[0],\n vArray2[1],\n vArray2[2]\n )\n }\n }\n\n draw(dash) {\n if (!dash) {\n _beginPath()\n for (let v of this.vertexList) {\n this._addVertex(v)\n }\n\n if (this.closeType === 'CLOSE') _ctx.closePath()\n\n if (_useP5) _closePath(this.closeType)\n else if (this.closeType === 'CLOSE') _closePath()\n\n _helper_style()\n } else if (\n Array.isArray(dash) &&\n dash.length === 2 &&\n this.increment <= 0.008\n ) {\n // Draw a dash curve\n let solidPart = Math.abs(dash[0]) // Length of one solid part\n let onePart = solidPart + Math.abs(dash[1]),\n nowLen = 0,\n modOnePart = 0\n let lastVertex = this.vertexList[0]\n let solid = true // true draw, false break\n\n _ctx.save() // push\n _ctx.fillStyle = 'rgba(0, 0, 0, 0)' // TODO: Enable fill\n _beginPath()\n _moveTo(...this.vertexList[0])\n for (let v = 1; v < this.vertexListLen; v++) {\n nowLen += this._distVertex(lastVertex, this.vertexList[v])\n modOnePart = nowLen % onePart\n if (modOnePart <= solidPart && solid) {\n this._addVertex(this.vertexList[v])\n } else if (modOnePart > solidPart && modOnePart <= onePart && solid) {\n // endShape()\n solid = false\n } else if (modOnePart <= solidPart && !solid) {\n _moveTo(...this.vertexList[v])\n solid = true\n }\n lastVertex = this.vertexList[v]\n }\n // if (solid) {\n // // Shape didn't end\n // endShape()\n // }\n _helper_style()\n _ctx.restore()\n } else if (this.increment > 0.008)\n throw new Error(\n 'Fidelity is too low for a dash line. It should be at least 6.'\n )\n else\n throw new Error(\n \"Your dash array input is not valid. Make sure it's an array of two numbers.\"\n )\n }\n\n update(newControlList) {\n /*\n Update the vertexList when control points change\n */\n if (newControlList.length !== this.controlPoints.length) {\n throw new Error(\n 'The number of points changed. (Keep the length of the point array the same.)'\n )\n } else if (equalArrays(this.controlPoints, newControlList)) {\n // Do we really need to update? No.\n // return ;\n } else {\n this.controlPoints = newControlList\n this._buildVertexList()\n }\n }\n\n move(x, y, z = null, toDraw = true, dash = 0) {\n /*\n Move the curve to another place\n Return a new object\n */\n if (z === null && this.dimension === 3) {\n // A 3D curve treated as 2D error\n throw new Error('To move a 3D curve, please specify (x, y, z).')\n } else {\n let toMove = [x, y]\n if (z !== null) toMove.push(z)\n // Copy to a new object\n let newCurveV = []\n for (let i = 0; i < this.vertexListLen; i++)\n newCurveV.push(this.vertexList[i].slice())\n let newCurveObj = new BezierCurve(\n this.controlPoints,\n this.closeType,\n this.increment,\n this.dimension,\n newCurveV\n )\n // Move\n for (let i = 0; i < newCurveObj.vertexListLen; i++) {\n for (let j = 0; j < newCurveObj.dimension; j++) {\n newCurveObj.vertexList[i][j] += toMove[j]\n }\n }\n if (toDraw) {\n newCurveObj.draw(dash)\n }\n return newCurveObj\n }\n }\n\n shortest(pX, pY, pZ = 0) {\n // Return the point on curve that is closest to the point outside\n // Always return array length of 3\n // Last position (z) be 0 for all 2D calculation\n let dMin = -1,\n nowMin = 0\n let minVertex\n for (let v of this.vertexList) {\n if (dMin === -1) {\n dMin = this._distVertex(v, [pX, pY, pZ])\n minVertex = v\n } else {\n nowMin = this._distVertex(v, [pX, pY, pZ])\n if (dMin > nowMin) {\n dMin = nowMin\n minVertex = v\n }\n }\n }\n return minVertex // An array of vertex position\n }\n}\n\n/* --------------------------------- HELPERS -------------------------------- */\n\n// https://www.30secondsofcode.org/blog/s/javascript-array-comparison\nconst equalArrays = (a, b) =>\n a.length === b.length && a.every((v, i) => v === b[i])\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","p5bezierAccuracyListAll","_canvas","_ctx","_dimension","_strict","_useP5","_beginPath","_moveTo","_lineTo","_closePath","initBezier","canvas","strictMode","drawingContext","p5","Graphics","constructor","name","beginShape","vertex","endShape","Renderer","Error","window","console","warn","isP3D","beginPath","bind","moveTo","lineTo","closePath","newBezier","pointList","closeType","accuracy","Array","isArray","tIncrement","point","length","push","n","x","y","t","i","_helper_factorial","Math","pow","slice","d","xyz","_helper_style","newBezierObj","BezierCurve","a","_helper_dist","arguments","hypot","_doFill","fill","_doStroke","stroke","pL","closeT","tI","bD","vL","this","controlPoints","dimension","increment","vertexList","vertexListLen","p","_buildVertexList","_addVertex","vArray","_distVertex","vArray1","vArray2","draw","dash","solidPart","abs","onePart","nowLen","modOnePart","lastVertex","solid","save","fillStyle","v","restore","update","newControlList","equalArrays","move","z","toDraw","toMove","newCurveV","newCurveObj","j","shortest","pX","pY","pZ","minVertex","dMin","nowMin","b","every"],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "p5bezier",
|
|
3
|
-
"version": "0.2
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.3.2",
|
|
4
|
+
"description": "Bezier library for canvas-based graphics on the web, built to work with p5.js.",
|
|
5
5
|
"main": "lib/p5.bezier.min.js",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"p5.js",
|
|
@@ -19,20 +19,25 @@
|
|
|
19
19
|
},
|
|
20
20
|
"homepage": "https://github.com/peilingjiang/p5.bezier#readme",
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"eslint": "^
|
|
23
|
-
"husky": "^
|
|
24
|
-
"lint-staged": "^
|
|
25
|
-
"prettier": "^2.1
|
|
26
|
-
"webpack": "^5.
|
|
27
|
-
"webpack
|
|
22
|
+
"eslint": "^8.20.0",
|
|
23
|
+
"husky": "^8.0.1",
|
|
24
|
+
"lint-staged": "^13.0.3",
|
|
25
|
+
"prettier": "^2.7.1",
|
|
26
|
+
"terser-webpack-plugin": "^5.3.3",
|
|
27
|
+
"webpack": "^5.73.0",
|
|
28
|
+
"webpack-cli": "^4.10.0"
|
|
28
29
|
},
|
|
29
30
|
"scripts": {
|
|
30
31
|
"format": "prettier --write \"**/*.{js,json,md,html,css}\"",
|
|
32
|
+
"start": "webpack --env=development",
|
|
31
33
|
"build": "webpack --env=production",
|
|
32
34
|
"prepare": "husky install"
|
|
33
35
|
},
|
|
34
36
|
"lint-staged": {
|
|
35
37
|
"*.js": "eslint --cache --fix",
|
|
36
38
|
"*.{js,json,md,html,css}": "prettier --write"
|
|
37
|
-
}
|
|
39
|
+
},
|
|
40
|
+
"files": [
|
|
41
|
+
"lib"
|
|
42
|
+
]
|
|
38
43
|
}
|
package/.eslintrc.json
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"env": {
|
|
3
|
-
"browser": true,
|
|
4
|
-
"es2021": true
|
|
5
|
-
},
|
|
6
|
-
"extends": "eslint:recommended",
|
|
7
|
-
"parserOptions": {
|
|
8
|
-
"ecmaVersion": 12,
|
|
9
|
-
"sourceType": "module"
|
|
10
|
-
},
|
|
11
|
-
"rules": {
|
|
12
|
-
"eqeqeq": "warn",
|
|
13
|
-
"no-unused-vars": "warn"
|
|
14
|
-
},
|
|
15
|
-
"ignorePatterns": ["examples/*", "*.min.js", "*.config.js"]
|
|
16
|
-
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
|
|
2
|
-
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
|
|
3
|
-
|
|
4
|
-
name: Publish
|
|
5
|
-
|
|
6
|
-
on:
|
|
7
|
-
release:
|
|
8
|
-
types: [created]
|
|
9
|
-
|
|
10
|
-
jobs:
|
|
11
|
-
build:
|
|
12
|
-
runs-on: ubuntu-latest
|
|
13
|
-
steps:
|
|
14
|
-
- uses: actions/checkout@v2
|
|
15
|
-
- uses: actions/setup-node@v1
|
|
16
|
-
with:
|
|
17
|
-
node-version: 12
|
|
18
|
-
- run: npm ci
|
|
19
|
-
- run: npm test
|
|
20
|
-
|
|
21
|
-
publish-npm:
|
|
22
|
-
needs: build
|
|
23
|
-
runs-on: ubuntu-latest
|
|
24
|
-
steps:
|
|
25
|
-
- uses: actions/checkout@v2
|
|
26
|
-
- uses: actions/setup-node@v1
|
|
27
|
-
with:
|
|
28
|
-
node-version: 12
|
|
29
|
-
registry-url: https://registry.npmjs.org/
|
|
30
|
-
- run: npm ci
|
|
31
|
-
- run: npm publish
|
|
32
|
-
env:
|
|
33
|
-
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
|
package/.husky/pre-commit
DELETED
package/.prettierignore
DELETED
package/.prettierrc
DELETED
package/.vscode/settings.json
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
|
|
5
|
-
<script src="https://cdn.jsdelivr.net/npm/p5bezier@latest/lib/p5.bezier.min.js"></script>
|
|
6
|
-
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
7
|
-
<meta charset="utf-8" />
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body>
|
|
11
|
-
<script src="sketch.js"></script>
|
|
12
|
-
</body>
|
|
13
|
-
</html>
|
package/examples/basic/sketch.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
p5.bezier.js basic example
|
|
3
|
-
Peiling Jiang
|
|
4
|
-
NYU ITP/IMA 2020
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
function setup() {
|
|
8
|
-
let c = createCanvas(500, 500)
|
|
9
|
-
p5bezier.initBezier(c)
|
|
10
|
-
noFill()
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
function draw() {
|
|
14
|
-
background(235)
|
|
15
|
-
strokeWeight(2)
|
|
16
|
-
p5bezier.newBezier([
|
|
17
|
-
[10, 10],
|
|
18
|
-
[100, 700],
|
|
19
|
-
[500, -800],
|
|
20
|
-
[800, 1000],
|
|
21
|
-
[10, 300],
|
|
22
|
-
])
|
|
23
|
-
}
|
package/examples/basic/style.css
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/* style.css for all examples */
|
|
2
|
-
|
|
3
|
-
html,
|
|
4
|
-
body {
|
|
5
|
-
height: 100%;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
body {
|
|
9
|
-
margin: 0;
|
|
10
|
-
display: flex;
|
|
11
|
-
|
|
12
|
-
/* This centers our sketch horizontally. */
|
|
13
|
-
justify-content: center;
|
|
14
|
-
|
|
15
|
-
/* This centers our sketch vertically. */
|
|
16
|
-
align-items: center;
|
|
17
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
|
|
5
|
-
<script src="https://cdn.jsdelivr.net/npm/p5bezier@latest/lib/p5.bezier.min.js"></script>
|
|
6
|
-
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
7
|
-
<meta charset="utf-8" />
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body>
|
|
11
|
-
<script src="sketch.js"></script>
|
|
12
|
-
</body>
|
|
13
|
-
</html>
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
p5.bezier.js basic_object example
|
|
3
|
-
Peiling Jiang
|
|
4
|
-
NYU ITP/IMA 2020
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
let bezierObject
|
|
8
|
-
|
|
9
|
-
function setup() {
|
|
10
|
-
let c = createCanvas(500, 500)
|
|
11
|
-
p5bezier.initBezier(c)
|
|
12
|
-
bezierObject = p5bezier.newBezierObj([
|
|
13
|
-
[10, 10],
|
|
14
|
-
[100, 700],
|
|
15
|
-
[500, -800],
|
|
16
|
-
[800, 1000],
|
|
17
|
-
[10, 300],
|
|
18
|
-
])
|
|
19
|
-
console.log(bezierObject)
|
|
20
|
-
noFill()
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
function draw() {
|
|
24
|
-
background(235)
|
|
25
|
-
strokeWeight(2)
|
|
26
|
-
bezierObject.draw()
|
|
27
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/* style.css for all examples */
|
|
2
|
-
|
|
3
|
-
html,
|
|
4
|
-
body {
|
|
5
|
-
height: 100%;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
body {
|
|
9
|
-
margin: 0;
|
|
10
|
-
display: flex;
|
|
11
|
-
|
|
12
|
-
/* This centers our sketch horizontally. */
|
|
13
|
-
justify-content: center;
|
|
14
|
-
|
|
15
|
-
/* This centers our sketch vertically. */
|
|
16
|
-
align-items: center;
|
|
17
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
|
|
5
|
-
<script src="https://cdn.jsdelivr.net/npm/p5bezier@latest/lib/p5.bezier.min.js"></script>
|
|
6
|
-
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
7
|
-
<meta charset="utf-8" />
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body>
|
|
11
|
-
<script src="sketch.js"></script>
|
|
12
|
-
</body>
|
|
13
|
-
</html>
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
p5.bezier.js control_points example
|
|
3
|
-
Peiling Jiang
|
|
4
|
-
NYU ITP/IMA 2020
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
// DRAG THE POINTS AROUND!
|
|
8
|
-
|
|
9
|
-
let pa // a PointArray object
|
|
10
|
-
|
|
11
|
-
function setup() {
|
|
12
|
-
let c = createCanvas(windowWidth, windowHeight)
|
|
13
|
-
p5bezier.initBezier(c)
|
|
14
|
-
noFill()
|
|
15
|
-
|
|
16
|
-
pa = new PointArray()
|
|
17
|
-
pa.add(100, 100)
|
|
18
|
-
pa.add(400, 600)
|
|
19
|
-
pa.add(500, 400)
|
|
20
|
-
pa.add(600, 600)
|
|
21
|
-
pa.add(900, 100)
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function draw() {
|
|
25
|
-
background(255)
|
|
26
|
-
stroke(color('#FD5E53'))
|
|
27
|
-
strokeWeight(3)
|
|
28
|
-
// Draw an open Bezier curve with fidelity of 9 (highest)
|
|
29
|
-
p5bezier.newBezier(pa.get(), 'OPEN', 9)
|
|
30
|
-
pa.display()
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
function mouseDragged() {
|
|
34
|
-
pa.update(mouseX, mouseY)
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
class PointArray {
|
|
38
|
-
constructor() {
|
|
39
|
-
this.pointArray = []
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
add(pX, pY) {
|
|
43
|
-
this.pointArray.push(new Point(pX, pY))
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
display() {
|
|
47
|
-
for (let point of this.pointArray) point.display()
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
update(mX, mY) {
|
|
51
|
-
for (let point of this.pointArray) {
|
|
52
|
-
if (dist(mX, mY, point.position[0], point.position[1]) < 60)
|
|
53
|
-
point.update(mX, mY)
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
get() {
|
|
58
|
-
// Return an array of array
|
|
59
|
-
// for p5bezier.newBezier function to use
|
|
60
|
-
let positionArray = []
|
|
61
|
-
// point is a Point object
|
|
62
|
-
for (let point of this.pointArray) positionArray.push(point.position)
|
|
63
|
-
return positionArray
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
class Point {
|
|
68
|
-
constructor(x, y) {
|
|
69
|
-
this.position = [x, y]
|
|
70
|
-
this.r = 10
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
display() {
|
|
74
|
-
push()
|
|
75
|
-
fill(255)
|
|
76
|
-
stroke(0)
|
|
77
|
-
strokeWeight(2)
|
|
78
|
-
ellipse(this.position[0], this.position[1], 2 * this.r, 2 * this.r)
|
|
79
|
-
fill(0)
|
|
80
|
-
noStroke()
|
|
81
|
-
text(
|
|
82
|
-
'(' + this.position[0] + ', ' + this.position[1] + ')',
|
|
83
|
-
this.position[0] + 10,
|
|
84
|
-
this.position[1] - 10
|
|
85
|
-
)
|
|
86
|
-
pop()
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
update(mX, mY) {
|
|
90
|
-
this.position = [mX, mY]
|
|
91
|
-
}
|
|
92
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/* style.css for all examples */
|
|
2
|
-
|
|
3
|
-
html,
|
|
4
|
-
body {
|
|
5
|
-
height: 100%;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
body {
|
|
9
|
-
margin: 0;
|
|
10
|
-
display: flex;
|
|
11
|
-
|
|
12
|
-
/* This centers our sketch horizontally. */
|
|
13
|
-
justify-content: center;
|
|
14
|
-
|
|
15
|
-
/* This centers our sketch vertically. */
|
|
16
|
-
align-items: center;
|
|
17
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
|
|
5
|
-
<script src="https://cdn.jsdelivr.net/npm/p5bezier@latest/lib/p5.bezier.min.js"></script>
|
|
6
|
-
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
7
|
-
<meta charset="utf-8" />
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body>
|
|
11
|
-
<script src="sketch.js"></script>
|
|
12
|
-
</body>
|
|
13
|
-
</html>
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
p5.bezier.js fidelity example
|
|
3
|
-
Peiling Jiang
|
|
4
|
-
NYU ITP/IMA 2020
|
|
5
|
-
|
|
6
|
-
Color templet from colorhunt.co
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
let points = [
|
|
10
|
-
[0, 0],
|
|
11
|
-
[100, 1100],
|
|
12
|
-
[1500, -2200],
|
|
13
|
-
[1500, 2800],
|
|
14
|
-
[100, -500],
|
|
15
|
-
[0, 600],
|
|
16
|
-
]
|
|
17
|
-
|
|
18
|
-
function setup() {
|
|
19
|
-
let c = createCanvas(1000, 600)
|
|
20
|
-
p5bezier.initBezier(c)
|
|
21
|
-
noFill()
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function draw() {
|
|
25
|
-
background(235)
|
|
26
|
-
strokeWeight(2)
|
|
27
|
-
stroke(color('#FFB99A'))
|
|
28
|
-
p5bezier.newBezier(points, 'OPEN', 0)
|
|
29
|
-
stroke(color('#FF6464'))
|
|
30
|
-
p5bezier.newBezier(points, 'OPEN', 1)
|
|
31
|
-
stroke(color('#DB3056'))
|
|
32
|
-
p5bezier.newBezier(points, 'OPEN', 3)
|
|
33
|
-
stroke(color('#851D41'))
|
|
34
|
-
p5bezier.newBezier(points, 'OPEN', 9)
|
|
35
|
-
|
|
36
|
-
// Caption
|
|
37
|
-
push()
|
|
38
|
-
noStroke()
|
|
39
|
-
fill(color('#FFB99A'))
|
|
40
|
-
text('Fidelity 0', 935, 540)
|
|
41
|
-
fill(color('#FF6464'))
|
|
42
|
-
text('Fidelity 1', 935, 555)
|
|
43
|
-
fill(color('#DB3056'))
|
|
44
|
-
text('Fidelity 3', 935, 570)
|
|
45
|
-
fill(color('#851D41'))
|
|
46
|
-
text('Fidelity 9', 935, 585)
|
|
47
|
-
pop()
|
|
48
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/* style.css for all examples */
|
|
2
|
-
|
|
3
|
-
html,
|
|
4
|
-
body {
|
|
5
|
-
height: 100%;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
body {
|
|
9
|
-
margin: 0;
|
|
10
|
-
display: flex;
|
|
11
|
-
|
|
12
|
-
/* This centers our sketch horizontally. */
|
|
13
|
-
justify-content: center;
|
|
14
|
-
|
|
15
|
-
/* This centers our sketch vertically. */
|
|
16
|
-
align-items: center;
|
|
17
|
-
}
|
package/examples/package.json
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "examples",
|
|
3
|
-
"version": "1.0.0",
|
|
4
|
-
"description": "Examples made to demonstrate p5.bezier library.",
|
|
5
|
-
"main": "server.js",
|
|
6
|
-
"keywords": [
|
|
7
|
-
"p5.js"
|
|
8
|
-
],
|
|
9
|
-
"author": "Peiling Jiang",
|
|
10
|
-
"license": "MIT",
|
|
11
|
-
"dependencies": {
|
|
12
|
-
"express": "^4.17.1"
|
|
13
|
-
}
|
|
14
|
-
}
|
package/examples/server.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
// Peiling Jiang
|
|
2
|
-
// NYU ITP/IMA 2020
|
|
3
|
-
|
|
4
|
-
// Create server
|
|
5
|
-
let port = process.env.PORT || 8000
|
|
6
|
-
let express = require('express')
|
|
7
|
-
let app = express()
|
|
8
|
-
let server = require('http')
|
|
9
|
-
.createServer(app)
|
|
10
|
-
.listen(port, function () {
|
|
11
|
-
console.log('Server listening at port: ', port)
|
|
12
|
-
})
|
|
13
|
-
|
|
14
|
-
// Take argv and process into address
|
|
15
|
-
var myArgs = process.argv.slice(2)
|
|
16
|
-
app.use(express.static(myArgs[0]))
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
|
|
5
|
-
<script src="https://cdn.jsdelivr.net/npm/p5bezier@latest/lib/p5.bezier.min.js"></script>
|
|
6
|
-
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
7
|
-
<meta charset="utf-8" />
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body>
|
|
11
|
-
<script src="sketch.js"></script>
|
|
12
|
-
</body>
|
|
13
|
-
</html>
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
p5.bezier.js shortest_point example
|
|
3
|
-
Peiling Jiang
|
|
4
|
-
NYU ITP/IMA 2020
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
let points = [
|
|
8
|
-
[0, 0],
|
|
9
|
-
[100, 1100],
|
|
10
|
-
[1500, -2200],
|
|
11
|
-
[1500, 2800],
|
|
12
|
-
[100, -500],
|
|
13
|
-
[0, 600],
|
|
14
|
-
]
|
|
15
|
-
let bezierObject
|
|
16
|
-
|
|
17
|
-
function setup() {
|
|
18
|
-
let c = createCanvas(1000, 600)
|
|
19
|
-
p5bezier.initBezier(c)
|
|
20
|
-
noFill()
|
|
21
|
-
strokeWeight(2)
|
|
22
|
-
|
|
23
|
-
bezierObject = new p5bezier.newBezierObj(points, 'OPEN', 9)
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function draw() {
|
|
27
|
-
background(235)
|
|
28
|
-
// Draw the dash Bezier curve
|
|
29
|
-
bezierObject.draw([20, 5])
|
|
30
|
-
// Find the closest point and the shortest distance
|
|
31
|
-
let pointOnCurve = bezierObject.shortest(mouseX, mouseY)
|
|
32
|
-
let r = dist(mouseX, mouseY, pointOnCurve[0], pointOnCurve[1])
|
|
33
|
-
|
|
34
|
-
// Draw the line and ellipse from mouse to point
|
|
35
|
-
line(mouseX, mouseY, pointOnCurve[0], pointOnCurve[1])
|
|
36
|
-
push()
|
|
37
|
-
strokeWeight(1)
|
|
38
|
-
stroke(color('#F0134D'))
|
|
39
|
-
ellipse(mouseX, mouseY, 2 * r, 2 * r)
|
|
40
|
-
pop()
|
|
41
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/* style.css for all examples */
|
|
2
|
-
|
|
3
|
-
html,
|
|
4
|
-
body {
|
|
5
|
-
height: 100%;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
body {
|
|
9
|
-
margin: 0;
|
|
10
|
-
display: flex;
|
|
11
|
-
|
|
12
|
-
/* This centers our sketch horizontally. */
|
|
13
|
-
justify-content: center;
|
|
14
|
-
|
|
15
|
-
/* This centers our sketch vertically. */
|
|
16
|
-
align-items: center;
|
|
17
|
-
}
|
package/img/cover.jpg
DELETED
|
Binary file
|
package/img/p5bezier.jpg
DELETED
|
Binary file
|
package/src/p5.bezier.js
DELETED
|
@@ -1,395 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
p5.bezier library by Peiling Jiang
|
|
3
|
-
2020
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
const p5bezierAccuracyListAll = [
|
|
7
|
-
0.2,
|
|
8
|
-
0.1,
|
|
9
|
-
0.05,
|
|
10
|
-
0.04,
|
|
11
|
-
0.02,
|
|
12
|
-
0.01,
|
|
13
|
-
0.008,
|
|
14
|
-
0.002,
|
|
15
|
-
0.001,
|
|
16
|
-
0.0005,
|
|
17
|
-
0.0001,
|
|
18
|
-
]
|
|
19
|
-
|
|
20
|
-
let _canvas, _ctx, _dimension, _strict
|
|
21
|
-
|
|
22
|
-
export function initBezier(canvas, strictMode = false) {
|
|
23
|
-
_canvas = canvas
|
|
24
|
-
_ctx = _canvas.drawingContext
|
|
25
|
-
_dimension = canvas.isP3D ? 3 : 2
|
|
26
|
-
_strict = strictMode // Always check and throw errors or not
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export function newBezier(pointList, closeType = 'OPEN', accuracy = 7) {
|
|
30
|
-
if (_strict && !Array.isArray(pointList))
|
|
31
|
-
throw ('newBezier() function expects an array, got %s.', typeof pointList)
|
|
32
|
-
|
|
33
|
-
// Define the increment of t based on accuracy
|
|
34
|
-
const tIncrement = p5bezierAccuracyListAll[accuracy]
|
|
35
|
-
|
|
36
|
-
if (_dimension !== 0) {
|
|
37
|
-
// Check if all points are valid
|
|
38
|
-
if (_strict)
|
|
39
|
-
for (let point of pointList)
|
|
40
|
-
if (!Array.isArray(pointList) || point.length !== _dimension)
|
|
41
|
-
throw 'One or more points in the array are not input correctly.'
|
|
42
|
-
|
|
43
|
-
// Add the first point as the last point to close the curve
|
|
44
|
-
if (closeType === 'CLOSE') pointList.push(pointList[0])
|
|
45
|
-
let p = pointList.length // pointList has p points for (p - 1) degree curves
|
|
46
|
-
let n = p - 1
|
|
47
|
-
|
|
48
|
-
_ctx.beginPath()
|
|
49
|
-
_ctx.moveTo(...pointList[0])
|
|
50
|
-
// Are we drawing 2D or 3D curves
|
|
51
|
-
if (_dimension === 2) {
|
|
52
|
-
// 2-Dimensional bezier curve
|
|
53
|
-
let x, y, t, i
|
|
54
|
-
for (t = 0; t <= 1; t += tIncrement) {
|
|
55
|
-
x = 0
|
|
56
|
-
y = 0
|
|
57
|
-
for (i = 0; i <= n; i++) {
|
|
58
|
-
// i point in pointList
|
|
59
|
-
x +=
|
|
60
|
-
(_helper_factorial(n) /
|
|
61
|
-
(_helper_factorial(i) * _helper_factorial(n - i))) *
|
|
62
|
-
Math.pow(1 - t, n - i) *
|
|
63
|
-
Math.pow(t, i) *
|
|
64
|
-
pointList[i][0]
|
|
65
|
-
y +=
|
|
66
|
-
(_helper_factorial(n) /
|
|
67
|
-
(_helper_factorial(i) * _helper_factorial(n - i))) *
|
|
68
|
-
Math.pow(1 - t, n - i) *
|
|
69
|
-
Math.pow(t, i) *
|
|
70
|
-
pointList[i][1]
|
|
71
|
-
}
|
|
72
|
-
_ctx.lineTo(x, y)
|
|
73
|
-
}
|
|
74
|
-
_ctx.lineTo(...pointList.slice(-1)[0])
|
|
75
|
-
} else if (_dimension === 3) {
|
|
76
|
-
// 3-Dimensional bezier curve
|
|
77
|
-
let xyz = [0, 0, 0],
|
|
78
|
-
t,
|
|
79
|
-
i,
|
|
80
|
-
d
|
|
81
|
-
for (t = 0; t <= 1; t += tIncrement) {
|
|
82
|
-
xyz = [0, 0, 0]
|
|
83
|
-
for (i = 0; i <= n; i++) {
|
|
84
|
-
for (d = 0; d < 3; d++) {
|
|
85
|
-
xyz[d] +=
|
|
86
|
-
(_helper_factorial(n) /
|
|
87
|
-
(_helper_factorial(i) * _helper_factorial(n - i))) *
|
|
88
|
-
Math.pow(1 - t, n - i) *
|
|
89
|
-
Math.pow(t, i) *
|
|
90
|
-
pointList[i][d]
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
_ctx.lineTo(...xyz)
|
|
94
|
-
}
|
|
95
|
-
_ctx.lineTo(...pointList.slice(-1)[0])
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
if (closeType === 'CLOSE') _ctx.closePath()
|
|
99
|
-
else if (_strict && closeType !== 'OPEN')
|
|
100
|
-
throw 'Close Type Error. A bezier curve can only be either OPEN or CLOSE.'
|
|
101
|
-
|
|
102
|
-
_helper_style()
|
|
103
|
-
|
|
104
|
-
return
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
export function newBezierObj(pointList, closeType = 'OPEN', accuracy = 7) {
|
|
109
|
-
// Define the increment of t based on accuracy
|
|
110
|
-
const tIncrement = p5bezierAccuracyListAll[accuracy]
|
|
111
|
-
|
|
112
|
-
if (_strict && !Array.isArray(pointList))
|
|
113
|
-
throw ('newBezier() function expects an array, got %s.', typeof pointList)
|
|
114
|
-
|
|
115
|
-
// Check if all points are valid
|
|
116
|
-
if (_strict)
|
|
117
|
-
for (let point of pointList)
|
|
118
|
-
if (!Array.isArray(pointList) || point.length !== _dimension)
|
|
119
|
-
throw 'One or more points in the array are not input correctly.'
|
|
120
|
-
|
|
121
|
-
// All checks done
|
|
122
|
-
let bObj = new BezierCurve(pointList, closeType, tIncrement, _dimension)
|
|
123
|
-
return bObj
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
function _helper_factorial(a) {
|
|
127
|
-
// Factorial function for binomial coefficient calculation
|
|
128
|
-
return a > 1 ? a * _helper_factorial(a - 1) : 1
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
function _helper_dist() {
|
|
132
|
-
if (arguments.length === 4)
|
|
133
|
-
return Math.hypot(arguments[0] - arguments[2], arguments[1] - arguments[3])
|
|
134
|
-
else if (arguments.length === 6)
|
|
135
|
-
return Math.hypot(
|
|
136
|
-
arguments[0] - arguments[3],
|
|
137
|
-
arguments[1] - arguments[4],
|
|
138
|
-
arguments[2] - arguments[5]
|
|
139
|
-
)
|
|
140
|
-
return 0
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
function _helper_style() {
|
|
144
|
-
if (_canvas._doFill) _ctx.fill()
|
|
145
|
-
if (_canvas._doStroke) _ctx.stroke()
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
class BezierCurve {
|
|
149
|
-
// Take pointList, closeType, tIncrement, bezierDimension into constructor
|
|
150
|
-
constructor(pL, closeT, tI, bD, vL = null) {
|
|
151
|
-
if (_strict && bD !== 2 && bD !== 3) {
|
|
152
|
-
throw (
|
|
153
|
-
("Dimension Error. The bezier curve is %d-dimensional and doesn't belong to our world.",
|
|
154
|
-
bD)
|
|
155
|
-
)
|
|
156
|
-
}
|
|
157
|
-
this.controlPoints = pL
|
|
158
|
-
|
|
159
|
-
if (closeT === 'CLOSE') {
|
|
160
|
-
this.controlPoints.push(pL[0])
|
|
161
|
-
this.closeType = 'CLOSE'
|
|
162
|
-
} else if (closeT === 'OPEN') {
|
|
163
|
-
this.closeType = 'OPEN'
|
|
164
|
-
} else {
|
|
165
|
-
throw 'Close Type Error. A bezier curve can only be either OPEN or CLOSE.'
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
this.dimension = bD
|
|
169
|
-
this.increment = tI
|
|
170
|
-
this.vertexList = []
|
|
171
|
-
this.vertexListLen = 0
|
|
172
|
-
this.p = this.controlPoints.length // Has p points for (p - 1) degree curves
|
|
173
|
-
this.n = this.p - 1 // Degree
|
|
174
|
-
// Calculate thr vertex
|
|
175
|
-
if (vL === null) {
|
|
176
|
-
this._buildVertexList()
|
|
177
|
-
} else {
|
|
178
|
-
this.vertexList = vL
|
|
179
|
-
this.vertexListLen = this.vertexList.length
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
_buildVertexList() {
|
|
184
|
-
/*
|
|
185
|
-
Return vertexList
|
|
186
|
-
*/
|
|
187
|
-
this.vertexList = []
|
|
188
|
-
if (this.dimension === 2) {
|
|
189
|
-
// 2-Dimensional bezier curve
|
|
190
|
-
let x, y, t, i
|
|
191
|
-
for (t = 0; t <= 1; t += this.increment) {
|
|
192
|
-
x = 0
|
|
193
|
-
y = 0
|
|
194
|
-
for (i = 0; i <= this.n; i++) {
|
|
195
|
-
// i point in pointList
|
|
196
|
-
x +=
|
|
197
|
-
(_helper_factorial(this.n) /
|
|
198
|
-
(_helper_factorial(i) * _helper_factorial(this.n - i))) *
|
|
199
|
-
Math.pow(1 - t, this.n - i) *
|
|
200
|
-
Math.pow(t, i) *
|
|
201
|
-
this.controlPoints[i][0]
|
|
202
|
-
y +=
|
|
203
|
-
(_helper_factorial(this.n) /
|
|
204
|
-
(_helper_factorial(i) * _helper_factorial(this.n - i))) *
|
|
205
|
-
Math.pow(1 - t, this.n - i) *
|
|
206
|
-
Math.pow(t, i) *
|
|
207
|
-
this.controlPoints[i][1]
|
|
208
|
-
}
|
|
209
|
-
this.vertexList.push([x, y])
|
|
210
|
-
}
|
|
211
|
-
} else if (this.dimension === 3) {
|
|
212
|
-
// 3-Dimensional bezier curve
|
|
213
|
-
let xyz = [0, 0, 0],
|
|
214
|
-
t,
|
|
215
|
-
i,
|
|
216
|
-
d
|
|
217
|
-
for (t = 0; t <= 1; t += this.increment) {
|
|
218
|
-
xyz[0] = 0
|
|
219
|
-
xyz[1] = 0
|
|
220
|
-
xyz[2] = 0
|
|
221
|
-
for (i = 0; i <= this.n; i++) {
|
|
222
|
-
for (d = 0; d < 3; d++) {
|
|
223
|
-
xyz[d] +=
|
|
224
|
-
(_helper_factorial(this.n) /
|
|
225
|
-
(_helper_factorial(i) * _helper_factorial(this.n - i))) *
|
|
226
|
-
Math.pow(1 - t, this.n - i) *
|
|
227
|
-
Math.pow(t, i) *
|
|
228
|
-
this.controlPoints[i][d]
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
this.vertexList.push(xyz)
|
|
232
|
-
}
|
|
233
|
-
}
|
|
234
|
-
// Ending fix
|
|
235
|
-
this._addVertex(this.controlPoints.slice(-1)[0])
|
|
236
|
-
|
|
237
|
-
this.dimension = this.vertexList[0].length // Update dimension
|
|
238
|
-
this.vertexListLen = this.vertexList.length // Update vertexListLen
|
|
239
|
-
return this.vertexList
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
_addVertex(vArray) {
|
|
243
|
-
// vArray is an array of [x, y] position or [x, y, z] position
|
|
244
|
-
if (this.dimension === 2 || this.dimension === 3) _ctx.lineTo(...vArray)
|
|
245
|
-
else throw 'Vertices can only be in 2D or 3D space.'
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
_distVertex(vArray1, vArray2) {
|
|
249
|
-
// Calculate the distance between
|
|
250
|
-
// vertex_array_1 and vertex_array_2
|
|
251
|
-
if (this.dimension === 2) {
|
|
252
|
-
return _helper_dist(vArray1[0], vArray1[1], vArray2[0], vArray2[1])
|
|
253
|
-
} else if (this.dimension === 3) {
|
|
254
|
-
return _helper_dist(
|
|
255
|
-
vArray1[0],
|
|
256
|
-
vArray1[1],
|
|
257
|
-
vArray1[2],
|
|
258
|
-
vArray2[0],
|
|
259
|
-
vArray2[1],
|
|
260
|
-
vArray2[2]
|
|
261
|
-
)
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
draw(dash) {
|
|
266
|
-
if (!dash) {
|
|
267
|
-
_ctx.beginPath()
|
|
268
|
-
for (let v of this.vertexList) {
|
|
269
|
-
this._addVertex(v)
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
if (this.closeType === 'CLOSE') _ctx.closePath()
|
|
273
|
-
_helper_style()
|
|
274
|
-
} else if (
|
|
275
|
-
Array.isArray(dash) &&
|
|
276
|
-
dash.length === 2 &&
|
|
277
|
-
this.increment <= 0.008
|
|
278
|
-
) {
|
|
279
|
-
// Draw a dash curve
|
|
280
|
-
let solidPart = Math.abs(dash[0]) // Length of one solid part
|
|
281
|
-
let onePart = solidPart + Math.abs(dash[1]),
|
|
282
|
-
nowLen = 0,
|
|
283
|
-
modOnePart = 0
|
|
284
|
-
let lastVertex = this.vertexList[0]
|
|
285
|
-
let solid = true // true draw, false break
|
|
286
|
-
|
|
287
|
-
_ctx.save() // push
|
|
288
|
-
_ctx.fillStyle = 'rgba(0, 0, 0, 0)' // TODO: Enable fill
|
|
289
|
-
_ctx.beginPath()
|
|
290
|
-
_ctx.moveTo(...this.vertexList[0])
|
|
291
|
-
for (let v = 1; v < this.vertexListLen; v++) {
|
|
292
|
-
nowLen += this._distVertex(lastVertex, this.vertexList[v])
|
|
293
|
-
modOnePart = nowLen % onePart
|
|
294
|
-
if (modOnePart <= solidPart && solid) {
|
|
295
|
-
this._addVertex(this.vertexList[v])
|
|
296
|
-
} else if (modOnePart > solidPart && modOnePart <= onePart && solid) {
|
|
297
|
-
// endShape()
|
|
298
|
-
solid = false
|
|
299
|
-
} else if (modOnePart <= solidPart && !solid) {
|
|
300
|
-
_ctx.moveTo(...this.vertexList[v])
|
|
301
|
-
solid = true
|
|
302
|
-
}
|
|
303
|
-
lastVertex = this.vertexList[v]
|
|
304
|
-
}
|
|
305
|
-
// if (solid) {
|
|
306
|
-
// // Shape didn't end
|
|
307
|
-
// endShape()
|
|
308
|
-
// }
|
|
309
|
-
_helper_style()
|
|
310
|
-
_ctx.restore()
|
|
311
|
-
} else if (this.increment > 0.008) {
|
|
312
|
-
throw 'Fidelity is too low for a dash line. It should be at least 6.'
|
|
313
|
-
} else {
|
|
314
|
-
throw "Your dash array input is not valid. Make sure it's an array of two numbers."
|
|
315
|
-
}
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
update(newControlList) {
|
|
319
|
-
/*
|
|
320
|
-
Update the vertexList when control points change
|
|
321
|
-
*/
|
|
322
|
-
if (newControlList.length !== this.controlPoints.length) {
|
|
323
|
-
throw 'The number of points changed. (Keep the point array length the same.)'
|
|
324
|
-
} else if (equalArrays(this.controlPoints, newControlList)) {
|
|
325
|
-
// Do we really need to update? No.
|
|
326
|
-
// return ;
|
|
327
|
-
} else {
|
|
328
|
-
this.controlPoints = newControlList
|
|
329
|
-
this._buildVertexList()
|
|
330
|
-
}
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
move(x, y, z = null, toDraw = true, dash = 0) {
|
|
334
|
-
/*
|
|
335
|
-
Move the curve to another place
|
|
336
|
-
Return a new object
|
|
337
|
-
*/
|
|
338
|
-
if (z === null && this.dimension === 3) {
|
|
339
|
-
// A 3D curve treated as 2D error
|
|
340
|
-
throw 'To move a 3D curve, please specify (x, y, z).'
|
|
341
|
-
} else {
|
|
342
|
-
let toMove = [x, y]
|
|
343
|
-
if (z !== null) toMove.push(z)
|
|
344
|
-
// Copy to a new object
|
|
345
|
-
let newCurveV = []
|
|
346
|
-
for (let i = 0; i < this.vertexListLen; i++)
|
|
347
|
-
newCurveV.push(this.vertexList[i].slice())
|
|
348
|
-
let newCurveObj = new BezierCurve(
|
|
349
|
-
this.controlPoints,
|
|
350
|
-
this.closeType,
|
|
351
|
-
this.increment,
|
|
352
|
-
this.dimension,
|
|
353
|
-
newCurveV
|
|
354
|
-
)
|
|
355
|
-
// Move
|
|
356
|
-
for (let i = 0; i < newCurveObj.vertexListLen; i++) {
|
|
357
|
-
for (let j = 0; j < newCurveObj.dimension; j++) {
|
|
358
|
-
newCurveObj.vertexList[i][j] += toMove[j]
|
|
359
|
-
}
|
|
360
|
-
}
|
|
361
|
-
if (toDraw) {
|
|
362
|
-
newCurveObj.draw(dash)
|
|
363
|
-
}
|
|
364
|
-
return newCurveObj
|
|
365
|
-
}
|
|
366
|
-
}
|
|
367
|
-
|
|
368
|
-
shortest(pX, pY, pZ = 0) {
|
|
369
|
-
// Return the point on curve that is closest to the point outside
|
|
370
|
-
// Always return array length of 3
|
|
371
|
-
// Last position (z) be 0 for all 2D calculation
|
|
372
|
-
let dMin = -1,
|
|
373
|
-
nowMin = 0
|
|
374
|
-
let minVertex
|
|
375
|
-
for (let v of this.vertexList) {
|
|
376
|
-
if (dMin === -1) {
|
|
377
|
-
dMin = this._distVertex(v, [pX, pY, pZ])
|
|
378
|
-
minVertex = v
|
|
379
|
-
} else {
|
|
380
|
-
nowMin = this._distVertex(v, [pX, pY, pZ])
|
|
381
|
-
if (dMin > nowMin) {
|
|
382
|
-
dMin = nowMin
|
|
383
|
-
minVertex = v
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
|
-
}
|
|
387
|
-
return minVertex // An array of vertex position
|
|
388
|
-
}
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
/* --------------------------------- HELPERS -------------------------------- */
|
|
392
|
-
|
|
393
|
-
// https://www.30secondsofcode.org/blog/s/javascript-array-comparison
|
|
394
|
-
const equalArrays = (a, b) =>
|
|
395
|
-
a.length === b.length && a.every((v, i) => v === b[i])
|