@tsparticles/shape-polygon 4.0.0-alpha.8 → 4.0.0-beta.1

package/125.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_polygon=this.webpackChunk_tsparticles_shape_polygon||[]).push([[125],{125(t,e,n){n.d(e,{PolygonDrawer:()=>o});var a=n(788);class o extends a.L{getSidesData(t,e){let{sides:n}=t;return{count:{denominator:1,numerator:n},length:2.66*e/(n/3)}}}},788(t,e,n){n.d(e,{L:()=>l});var a=n(303);let o=new Map;class l{draw(t){let{particle:e,radius:n}=t;!function(t,e){let{context:n,radius:l}=t,s=function(t){let e=o.get(t);if(e)return e;let n=a.doublePI/t,l=(-Math.PI+(t%a.double?0:n))*a.half,s=[];for(let e=0;e<t;e++){let t=l+e*n;s[e]={x:Math.cos(t),y:Math.sin(t)}}return o.set(t,s),s}(e.count.numerator/e.count.denominator);n.beginPath();for(let t=0;t<s.length;t++){let e=s[t];if(!e)continue;let a=e.x*l,o=e.y*l;t?n.lineTo(a,o):n.moveTo(a,o)}n.closePath()}(t,this.getSidesData(e,n))}getSidesCount(t){let e=t.shapeData;return Math.round((0,a.getRangeValue)(e?.sides??5))}}}}]);

package/761.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_polygon=this.webpackChunk_tsparticles_shape_polygon||[]).push([[761],{788(e,t,n){n.d(t,{L:()=>r});var a=n(303);let o=new Map;class r{draw(e){let{particle:t,radius:n}=e;!function(e,t){let{context:n,radius:r}=e,s=function(e){let t=o.get(e);if(t)return t;let n=a.doublePI/e,r=(-Math.PI+(e%a.double?0:n))*a.half,s=[];for(let t=0;t<e;t++){let e=r+t*n;s[t]={x:Math.cos(e),y:Math.sin(e)}}return o.set(e,s),s}(t.count.numerator/t.count.denominator);n.beginPath();for(let e=0;e<s.length;e++){let t=s[e];if(!t)continue;let a=t.x*r,o=t.y*r;e?n.lineTo(a,o):n.moveTo(a,o)}n.closePath()}(e,this.getSidesData(t,n))}getSidesCount(e){let t=e.shapeData;return Math.round((0,a.getRangeValue)(t?.sides??5))}}},761(e,t,n){n.d(t,{TriangleDrawer:()=>o});var a=n(788);class o extends a.L{getSidesCount(){return 3}getSidesData(e,t){return{count:{denominator:1,numerator:3},length:2.66*t/1}}}}}]);

package/browser/PolygonDrawer.js

@@ -1,18 +1,8 @@
 import { PolygonDrawerBase } from "./PolygonDrawerBase.js";
-const sidesCenterFactor = 3.5, yFactor = 2.66, sidesFactor = 3;
+const yFactor = 2.66, sidesFactor = 3;
 export class PolygonDrawer extends PolygonDrawerBase {
-    constructor() {
-        super(...arguments);
-        this.validTypes = ["polygon"];
-    }
-    getCenter(particle, radius) {
-        return {
-            x: -radius / (particle.sides / sidesCenterFactor),
-            y: -radius / (yFactor / sidesCenterFactor),
-        };
-    }
     getSidesData(particle, radius) {
-        const sides = particle.sides;
+        const { sides } = particle;
         return {
             count: {
                 denominator: 1,

package/browser/PolygonDrawerBase.js

@@ -1,10 +1,10 @@
-import { getRangeValue, } from "@tsparticles/engine";
+import { getRangeValue } from "@tsparticles/engine";
 import { drawPolygon } from "./Utils.js";
 const defaultSides = 5;
 export class PolygonDrawerBase {
     draw(data) {
-        const { particle, radius } = data, start = this.getCenter(particle, radius), side = this.getSidesData(particle, radius);
-        drawPolygon(data, start, side);
+        const { particle, radius } = data, side = this.getSidesData(particle, radius);
+        drawPolygon(data, side);
     }
     getSidesCount(particle) {
         const polygon = particle.shapeData;

package/browser/TriangleDrawer.js

@@ -1,28 +1,16 @@
-import { double } from "@tsparticles/engine";
 import { PolygonDrawerBase } from "./PolygonDrawerBase.js";
-const yFactor = 1.66, sides = 3;
+const sides = 3, yFactor = 2.66, sidesFactor = 3;
 export class TriangleDrawer extends PolygonDrawerBase {
-    constructor() {
-        super(...arguments);
-        this.validTypes = ["triangle"];
-    }
-    getCenter(_particle, radius) {
-        return {
-            x: -radius,
-            y: radius / yFactor,
-        };
-    }
     getSidesCount() {
         return sides;
     }
     getSidesData(_particle, radius) {
-        const diameter = radius * double;
         return {
             count: {
-                denominator: 2,
-                numerator: 3,
+                denominator: 1,
+                numerator: sides,
             },
-            length: diameter,
+            length: (radius * yFactor) / (sides / sidesFactor),
         };
     }
 }

package/browser/Utils.js

@@ -1,13 +1,36 @@
-import { degToRad } from "@tsparticles/engine";
-const piDeg = 180, origin = { x: 0, y: 0 }, sidesOffset = 2;
-export function drawPolygon(data, start, side) {
-    const { context } = data, sideCount = side.count.numerator * side.count.denominator, decimalSides = side.count.numerator / side.count.denominator, interiorAngleDegrees = (piDeg * (decimalSides - sidesOffset)) / decimalSides, interiorAngle = Math.PI - degToRad(interiorAngleDegrees);
+import { double, doublePI, half } from "@tsparticles/engine";
+const polygonCache = new Map(), noOffset = 0;
+function getUnitPolygon(sides) {
+    const cached = polygonCache.get(sides);
+    if (cached) {
+        return cached;
+    }
+    const step = doublePI / sides, isOdd = !!(sides % double), baseAngle = (-Math.PI + (isOdd ? noOffset : step)) * half, verts = [];
+    for (let i = 0; i < sides; i++) {
+        const angle = baseAngle + i * step;
+        verts[i] = {
+            x: Math.cos(angle),
+            y: Math.sin(angle),
+        };
+    }
+    polygonCache.set(sides, verts);
+    return verts;
+}
+export function drawPolygon(data, side) {
+    const { context, radius } = data, sides = side.count.numerator / side.count.denominator, verts = getUnitPolygon(sides);
     context.beginPath();
-    context.translate(start.x, start.y);
-    context.moveTo(origin.x, origin.y);
-    for (let i = 0; i < sideCount; i++) {
-        context.lineTo(side.length, origin.y);
-        context.translate(side.length, origin.y);
-        context.rotate(interiorAngle);
+    for (let i = 0; i < verts.length; i++) {
+        const vert = verts[i];
+        if (!vert) {
+            continue;
+        }
+        const x = vert.x * radius, y = vert.y * radius;
+        if (i) {
+            context.lineTo(x, y);
+        }
+        else {
+            context.moveTo(x, y);
+        }
     }
+    context.closePath();
 }

package/browser/index.js

@@ -1,21 +1,25 @@
 export async function loadGenericPolygonShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { PolygonDrawer } = await import("./PolygonDrawer.js");
-        e.addShape(new PolygonDrawer());
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addShape(["polygon"], async () => {
+            const { PolygonDrawer } = await import("./PolygonDrawer.js");
+            return new PolygonDrawer();
+        });
     });
 }
 export async function loadTriangleShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { TriangleDrawer } = await import("./TriangleDrawer.js");
-        e.addShape(new TriangleDrawer());
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addShape(["triangle"], async () => {
+            const { TriangleDrawer } = await import("./TriangleDrawer.js");
+            return new TriangleDrawer();
+        });
     });
 }
 export async function loadPolygonShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        await loadGenericPolygonShape(e);
-        await loadTriangleShape(e);
-    });
+    engine.checkVersion("4.0.0-beta.1");
+    await Promise.all([
+        loadGenericPolygonShape(engine),
+        loadTriangleShape(engine),
+    ]);
 }

package/cjs/PolygonDrawer.js

@@ -1,18 +1,8 @@
 import { PolygonDrawerBase } from "./PolygonDrawerBase.js";
-const sidesCenterFactor = 3.5, yFactor = 2.66, sidesFactor = 3;
+const yFactor = 2.66, sidesFactor = 3;
 export class PolygonDrawer extends PolygonDrawerBase {
-    constructor() {
-        super(...arguments);
-        this.validTypes = ["polygon"];
-    }
-    getCenter(particle, radius) {
-        return {
-            x: -radius / (particle.sides / sidesCenterFactor),
-            y: -radius / (yFactor / sidesCenterFactor),
-        };
-    }
     getSidesData(particle, radius) {
-        const sides = particle.sides;
+        const { sides } = particle;
         return {
             count: {
                 denominator: 1,

package/cjs/PolygonDrawerBase.js

@@ -1,10 +1,10 @@
-import { getRangeValue, } from "@tsparticles/engine";
+import { getRangeValue } from "@tsparticles/engine";
 import { drawPolygon } from "./Utils.js";
 const defaultSides = 5;
 export class PolygonDrawerBase {
     draw(data) {
-        const { particle, radius } = data, start = this.getCenter(particle, radius), side = this.getSidesData(particle, radius);
-        drawPolygon(data, start, side);
+        const { particle, radius } = data, side = this.getSidesData(particle, radius);
+        drawPolygon(data, side);
     }
     getSidesCount(particle) {
         const polygon = particle.shapeData;

package/cjs/TriangleDrawer.js

@@ -1,28 +1,16 @@
-import { double } from "@tsparticles/engine";
 import { PolygonDrawerBase } from "./PolygonDrawerBase.js";
-const yFactor = 1.66, sides = 3;
+const sides = 3, yFactor = 2.66, sidesFactor = 3;
 export class TriangleDrawer extends PolygonDrawerBase {
-    constructor() {
-        super(...arguments);
-        this.validTypes = ["triangle"];
-    }
-    getCenter(_particle, radius) {
-        return {
-            x: -radius,
-            y: radius / yFactor,
-        };
-    }
     getSidesCount() {
         return sides;
     }
     getSidesData(_particle, radius) {
-        const diameter = radius * double;
         return {
             count: {
-                denominator: 2,
-                numerator: 3,
+                denominator: 1,
+                numerator: sides,
             },
-            length: diameter,
+            length: (radius * yFactor) / (sides / sidesFactor),
         };
     }
 }

package/cjs/Utils.js

@@ -1,13 +1,36 @@
-import { degToRad } from "@tsparticles/engine";
-const piDeg = 180, origin = { x: 0, y: 0 }, sidesOffset = 2;
-export function drawPolygon(data, start, side) {
-    const { context } = data, sideCount = side.count.numerator * side.count.denominator, decimalSides = side.count.numerator / side.count.denominator, interiorAngleDegrees = (piDeg * (decimalSides - sidesOffset)) / decimalSides, interiorAngle = Math.PI - degToRad(interiorAngleDegrees);
+import { double, doublePI, half } from "@tsparticles/engine";
+const polygonCache = new Map(), noOffset = 0;
+function getUnitPolygon(sides) {
+    const cached = polygonCache.get(sides);
+    if (cached) {
+        return cached;
+    }
+    const step = doublePI / sides, isOdd = !!(sides % double), baseAngle = (-Math.PI + (isOdd ? noOffset : step)) * half, verts = [];
+    for (let i = 0; i < sides; i++) {
+        const angle = baseAngle + i * step;
+        verts[i] = {
+            x: Math.cos(angle),
+            y: Math.sin(angle),
+        };
+    }
+    polygonCache.set(sides, verts);
+    return verts;
+}
+export function drawPolygon(data, side) {
+    const { context, radius } = data, sides = side.count.numerator / side.count.denominator, verts = getUnitPolygon(sides);
     context.beginPath();
-    context.translate(start.x, start.y);
-    context.moveTo(origin.x, origin.y);
-    for (let i = 0; i < sideCount; i++) {
-        context.lineTo(side.length, origin.y);
-        context.translate(side.length, origin.y);
-        context.rotate(interiorAngle);
+    for (let i = 0; i < verts.length; i++) {
+        const vert = verts[i];
+        if (!vert) {
+            continue;
+        }
+        const x = vert.x * radius, y = vert.y * radius;
+        if (i) {
+            context.lineTo(x, y);
+        }
+        else {
+            context.moveTo(x, y);
+        }
     }
+    context.closePath();
 }

package/cjs/index.js

@@ -1,21 +1,25 @@
 export async function loadGenericPolygonShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { PolygonDrawer } = await import("./PolygonDrawer.js");
-        e.addShape(new PolygonDrawer());
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addShape(["polygon"], async () => {
+            const { PolygonDrawer } = await import("./PolygonDrawer.js");
+            return new PolygonDrawer();
+        });
     });
 }
 export async function loadTriangleShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { TriangleDrawer } = await import("./TriangleDrawer.js");
-        e.addShape(new TriangleDrawer());
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addShape(["triangle"], async () => {
+            const { TriangleDrawer } = await import("./TriangleDrawer.js");
+            return new TriangleDrawer();
+        });
     });
 }
 export async function loadPolygonShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        await loadGenericPolygonShape(e);
-        await loadTriangleShape(e);
-    });
+    engine.checkVersion("4.0.0-beta.1");
+    await Promise.all([
+        loadGenericPolygonShape(engine),
+        loadTriangleShape(engine),
+    ]);
 }

package/dist_browser_PolygonDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \***************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonDrawer: () => (/* binding */ PolygonDrawer)\n/* harmony export */ });\n/* harmony import */ var _PolygonDrawerBase_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PolygonDrawerBase.js */ \"./dist/browser/PolygonDrawerBase.js\");\n\nconst sidesCenterFactor = 3.5,\n  yFactor = 2.66,\n  sidesFactor = 3;\nclass PolygonDrawer extends _PolygonDrawerBase_js__WEBPACK_IMPORTED_MODULE_0__.PolygonDrawerBase {\n  constructor() {\n    super(...arguments);\n    this.validTypes = [\"polygon\"];\n  }\n  getCenter(particle, radius) {\n    return {\n      x: -radius / (particle.sides / sidesCenterFactor),\n      y: -radius / (yFactor / sidesCenterFactor)\n    };\n  }\n  getSidesData(particle, radius) {\n    const sides = particle.sides;\n    return {\n      count: {\n        denominator: 1,\n        numerator: sides\n      },\n      length: radius * yFactor / (sides / sidesFactor)\n    };\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/shape-polygon/./dist/browser/PolygonDrawer.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonDrawer: () => (/* binding */ PolygonDrawer)\n/* harmony export */ });\n/* harmony import */ var _PolygonDrawerBase_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PolygonDrawerBase.js */ \"./dist/browser/PolygonDrawerBase.js\");\n\nconst yFactor = 2.66, sidesFactor = 3;\nclass PolygonDrawer extends _PolygonDrawerBase_js__WEBPACK_IMPORTED_MODULE_0__.PolygonDrawerBase {\n    getSidesData(particle, radius) {\n        const { sides } = particle;\n        return {\n            count: {\n                denominator: 1,\n                numerator: sides\n            },\n            length: radius * yFactor / (sides / sidesFactor)\n        };\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-polygon/./dist/browser/PolygonDrawer.js?\n}");
 
 /***/ },
 
@@ -33,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*******************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonDrawerBase: () => (/* binding */ PolygonDrawerBase)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\nconst defaultSides = 5;\nclass PolygonDrawerBase {\n  draw(data) {\n    const {\n        particle,\n        radius\n      } = data,\n      start = this.getCenter(particle, radius),\n      side = this.getSidesData(particle, radius);\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawPolygon)(data, start, side);\n  }\n  getSidesCount(particle) {\n    const polygon = particle.shapeData;\n    return Math.round((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(polygon?.sides ?? defaultSides));\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/shape-polygon/./dist/browser/PolygonDrawerBase.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonDrawerBase: () => (/* binding */ PolygonDrawerBase)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\nconst defaultSides = 5;\nclass PolygonDrawerBase {\n    draw(data) {\n        const { particle, radius } = data, side = this.getSidesData(particle, radius);\n        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawPolygon)(data, side);\n    }\n    getSidesCount(particle) {\n        const polygon = particle.shapeData;\n        return Math.round((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(polygon?.sides ?? defaultSides));\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-polygon/./dist/browser/PolygonDrawerBase.js?\n}");
 
 /***/ },
 
@@ -43,7 +43,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*******************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawPolygon: () => (/* binding */ drawPolygon)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst piDeg = 180,\n  origin = {\n    x: 0,\n    y: 0\n  },\n  sidesOffset = 2;\nfunction drawPolygon(data, start, side) {\n  const {\n      context\n    } = data,\n    sideCount = side.count.numerator * side.count.denominator,\n    decimalSides = side.count.numerator / side.count.denominator,\n    interiorAngleDegrees = piDeg * (decimalSides - sidesOffset) / decimalSides,\n    interiorAngle = Math.PI - (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.degToRad)(interiorAngleDegrees);\n  context.beginPath();\n  context.translate(start.x, start.y);\n  context.moveTo(origin.x, origin.y);\n  for (let i = 0; i < sideCount; i++) {\n    context.lineTo(side.length, origin.y);\n    context.translate(side.length, origin.y);\n    context.rotate(interiorAngle);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/shape-polygon/./dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawPolygon: () => (/* binding */ drawPolygon)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst polygonCache = new Map(), noOffset = 0;\nfunction getUnitPolygon(sides) {\n    const cached = polygonCache.get(sides);\n    if (cached) {\n        return cached;\n    }\n    const step = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI / sides, isOdd = !!(sides % _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double), baseAngle = (-Math.PI + (isOdd ? noOffset : step)) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, verts = [];\n    for(let i = 0; i < sides; i++){\n        const angle = baseAngle + i * step;\n        verts[i] = {\n            x: Math.cos(angle),\n            y: Math.sin(angle)\n        };\n    }\n    polygonCache.set(sides, verts);\n    return verts;\n}\nfunction drawPolygon(data, side) {\n    const { context, radius } = data, sides = side.count.numerator / side.count.denominator, verts = getUnitPolygon(sides);\n    context.beginPath();\n    for(let i = 0; i < verts.length; i++){\n        const vert = verts[i];\n        if (!vert) {\n            continue;\n        }\n        const x = vert.x * radius, y = vert.y * radius;\n        if (i) {\n            context.lineTo(x, y);\n        } else {\n            context.moveTo(x, y);\n        }\n    }\n    context.closePath();\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-polygon/./dist/browser/Utils.js?\n}");
 
 /***/ }
 

package/dist_browser_TriangleDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \*******************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonDrawerBase: () => (/* binding */ PolygonDrawerBase)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\nconst defaultSides = 5;\nclass PolygonDrawerBase {\n  draw(data) {\n    const {\n        particle,\n        radius\n      } = data,\n      start = this.getCenter(particle, radius),\n      side = this.getSidesData(particle, radius);\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawPolygon)(data, start, side);\n  }\n  getSidesCount(particle) {\n    const polygon = particle.shapeData;\n    return Math.round((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(polygon?.sides ?? defaultSides));\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/shape-polygon/./dist/browser/PolygonDrawerBase.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   PolygonDrawerBase: () => (/* binding */ PolygonDrawerBase)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\nconst defaultSides = 5;\nclass PolygonDrawerBase {\n    draw(data) {\n        const { particle, radius } = data, side = this.getSidesData(particle, radius);\n        (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawPolygon)(data, side);\n    }\n    getSidesCount(particle) {\n        const polygon = particle.shapeData;\n        return Math.round((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(polygon?.sides ?? defaultSides));\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-polygon/./dist/browser/PolygonDrawerBase.js?\n}");
 
 /***/ },
 
@@ -33,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \****************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TriangleDrawer: () => (/* binding */ TriangleDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _PolygonDrawerBase_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PolygonDrawerBase.js */ \"./dist/browser/PolygonDrawerBase.js\");\n\n\nconst yFactor = 1.66,\n  sides = 3;\nclass TriangleDrawer extends _PolygonDrawerBase_js__WEBPACK_IMPORTED_MODULE_1__.PolygonDrawerBase {\n  constructor() {\n    super(...arguments);\n    this.validTypes = [\"triangle\"];\n  }\n  getCenter(_particle, radius) {\n    return {\n      x: -radius,\n      y: radius / yFactor\n    };\n  }\n  getSidesCount() {\n    return sides;\n  }\n  getSidesData(_particle, radius) {\n    const diameter = radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double;\n    return {\n      count: {\n        denominator: 2,\n        numerator: 3\n      },\n      length: diameter\n    };\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/shape-polygon/./dist/browser/TriangleDrawer.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   TriangleDrawer: () => (/* binding */ TriangleDrawer)\n/* harmony export */ });\n/* harmony import */ var _PolygonDrawerBase_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PolygonDrawerBase.js */ \"./dist/browser/PolygonDrawerBase.js\");\n\nconst sides = 3, yFactor = 2.66, sidesFactor = 3;\nclass TriangleDrawer extends _PolygonDrawerBase_js__WEBPACK_IMPORTED_MODULE_0__.PolygonDrawerBase {\n    getSidesCount() {\n        return sides;\n    }\n    getSidesData(_particle, radius) {\n        return {\n            count: {\n                denominator: 1,\n                numerator: sides\n            },\n            length: radius * yFactor / (sides / sidesFactor)\n        };\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-polygon/./dist/browser/TriangleDrawer.js?\n}");
 
 /***/ },
 
@@ -43,7 +43,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*******************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawPolygon: () => (/* binding */ drawPolygon)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst piDeg = 180,\n  origin = {\n    x: 0,\n    y: 0\n  },\n  sidesOffset = 2;\nfunction drawPolygon(data, start, side) {\n  const {\n      context\n    } = data,\n    sideCount = side.count.numerator * side.count.denominator,\n    decimalSides = side.count.numerator / side.count.denominator,\n    interiorAngleDegrees = piDeg * (decimalSides - sidesOffset) / decimalSides,\n    interiorAngle = Math.PI - (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.degToRad)(interiorAngleDegrees);\n  context.beginPath();\n  context.translate(start.x, start.y);\n  context.moveTo(origin.x, origin.y);\n  for (let i = 0; i < sideCount; i++) {\n    context.lineTo(side.length, origin.y);\n    context.translate(side.length, origin.y);\n    context.rotate(interiorAngle);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/shape-polygon/./dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawPolygon: () => (/* binding */ drawPolygon)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst polygonCache = new Map(), noOffset = 0;\nfunction getUnitPolygon(sides) {\n    const cached = polygonCache.get(sides);\n    if (cached) {\n        return cached;\n    }\n    const step = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI / sides, isOdd = !!(sides % _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double), baseAngle = (-Math.PI + (isOdd ? noOffset : step)) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, verts = [];\n    for(let i = 0; i < sides; i++){\n        const angle = baseAngle + i * step;\n        verts[i] = {\n            x: Math.cos(angle),\n            y: Math.sin(angle)\n        };\n    }\n    polygonCache.set(sides, verts);\n    return verts;\n}\nfunction drawPolygon(data, side) {\n    const { context, radius } = data, sides = side.count.numerator / side.count.denominator, verts = getUnitPolygon(sides);\n    context.beginPath();\n    for(let i = 0; i < verts.length; i++){\n        const vert = verts[i];\n        if (!vert) {\n            continue;\n        }\n        const x = vert.x * radius, y = vert.y * radius;\n        if (i) {\n            context.lineTo(x, y);\n        } else {\n            context.moveTo(x, y);\n        }\n    }\n    context.closePath();\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-polygon/./dist/browser/Utils.js?\n}");
 
 /***/ }
 

package/esm/PolygonDrawer.js

@@ -1,18 +1,8 @@
 import { PolygonDrawerBase } from "./PolygonDrawerBase.js";
-const sidesCenterFactor = 3.5, yFactor = 2.66, sidesFactor = 3;
+const yFactor = 2.66, sidesFactor = 3;
 export class PolygonDrawer extends PolygonDrawerBase {
-    constructor() {
-        super(...arguments);
-        this.validTypes = ["polygon"];
-    }
-    getCenter(particle, radius) {
-        return {
-            x: -radius / (particle.sides / sidesCenterFactor),
-            y: -radius / (yFactor / sidesCenterFactor),
-        };
-    }
     getSidesData(particle, radius) {
-        const sides = particle.sides;
+        const { sides } = particle;
         return {
             count: {
                 denominator: 1,

package/esm/PolygonDrawerBase.js

@@ -1,10 +1,10 @@
-import { getRangeValue, } from "@tsparticles/engine";
+import { getRangeValue } from "@tsparticles/engine";
 import { drawPolygon } from "./Utils.js";
 const defaultSides = 5;
 export class PolygonDrawerBase {
     draw(data) {
-        const { particle, radius } = data, start = this.getCenter(particle, radius), side = this.getSidesData(particle, radius);
-        drawPolygon(data, start, side);
+        const { particle, radius } = data, side = this.getSidesData(particle, radius);
+        drawPolygon(data, side);
     }
     getSidesCount(particle) {
         const polygon = particle.shapeData;

package/esm/TriangleDrawer.js

@@ -1,28 +1,16 @@
-import { double } from "@tsparticles/engine";
 import { PolygonDrawerBase } from "./PolygonDrawerBase.js";
-const yFactor = 1.66, sides = 3;
+const sides = 3, yFactor = 2.66, sidesFactor = 3;
 export class TriangleDrawer extends PolygonDrawerBase {
-    constructor() {
-        super(...arguments);
-        this.validTypes = ["triangle"];
-    }
-    getCenter(_particle, radius) {
-        return {
-            x: -radius,
-            y: radius / yFactor,
-        };
-    }
     getSidesCount() {
         return sides;
     }
     getSidesData(_particle, radius) {
-        const diameter = radius * double;
         return {
             count: {
-                denominator: 2,
-                numerator: 3,
+                denominator: 1,
+                numerator: sides,
             },
-            length: diameter,
+            length: (radius * yFactor) / (sides / sidesFactor),
         };
     }
 }

package/esm/Utils.js

@@ -1,13 +1,36 @@
-import { degToRad } from "@tsparticles/engine";
-const piDeg = 180, origin = { x: 0, y: 0 }, sidesOffset = 2;
-export function drawPolygon(data, start, side) {
-    const { context } = data, sideCount = side.count.numerator * side.count.denominator, decimalSides = side.count.numerator / side.count.denominator, interiorAngleDegrees = (piDeg * (decimalSides - sidesOffset)) / decimalSides, interiorAngle = Math.PI - degToRad(interiorAngleDegrees);
+import { double, doublePI, half } from "@tsparticles/engine";
+const polygonCache = new Map(), noOffset = 0;
+function getUnitPolygon(sides) {
+    const cached = polygonCache.get(sides);
+    if (cached) {
+        return cached;
+    }
+    const step = doublePI / sides, isOdd = !!(sides % double), baseAngle = (-Math.PI + (isOdd ? noOffset : step)) * half, verts = [];
+    for (let i = 0; i < sides; i++) {
+        const angle = baseAngle + i * step;
+        verts[i] = {
+            x: Math.cos(angle),
+            y: Math.sin(angle),
+        };
+    }
+    polygonCache.set(sides, verts);
+    return verts;
+}
+export function drawPolygon(data, side) {
+    const { context, radius } = data, sides = side.count.numerator / side.count.denominator, verts = getUnitPolygon(sides);
     context.beginPath();
-    context.translate(start.x, start.y);
-    context.moveTo(origin.x, origin.y);
-    for (let i = 0; i < sideCount; i++) {
-        context.lineTo(side.length, origin.y);
-        context.translate(side.length, origin.y);
-        context.rotate(interiorAngle);
+    for (let i = 0; i < verts.length; i++) {
+        const vert = verts[i];
+        if (!vert) {
+            continue;
+        }
+        const x = vert.x * radius, y = vert.y * radius;
+        if (i) {
+            context.lineTo(x, y);
+        }
+        else {
+            context.moveTo(x, y);
+        }
     }
+    context.closePath();
 }

package/esm/index.js

@@ -1,21 +1,25 @@
 export async function loadGenericPolygonShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { PolygonDrawer } = await import("./PolygonDrawer.js");
-        e.addShape(new PolygonDrawer());
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addShape(["polygon"], async () => {
+            const { PolygonDrawer } = await import("./PolygonDrawer.js");
+            return new PolygonDrawer();
+        });
     });
 }
 export async function loadTriangleShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { TriangleDrawer } = await import("./TriangleDrawer.js");
-        e.addShape(new TriangleDrawer());
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addShape(["triangle"], async () => {
+            const { TriangleDrawer } = await import("./TriangleDrawer.js");
+            return new TriangleDrawer();
+        });
     });
 }
 export async function loadPolygonShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        await loadGenericPolygonShape(e);
-        await loadTriangleShape(e);
-    });
+    engine.checkVersion("4.0.0-beta.1");
+    await Promise.all([
+        loadGenericPolygonShape(engine),
+        loadTriangleShape(engine),
+    ]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/shape-polygon",
-  "version": "4.0.0-alpha.8",
+  "version": "4.0.0-beta.1",
   "description": "tsParticles polygon shape",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -59,7 +59,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.8"
+    "@tsparticles/engine": "4.0.0-beta.1"
   },
   "publishConfig": {
     "access": "public"