feat: add full card shape, and utilities for path drawing

Author: matteobruni

demo/vanilla/app.ts

@@ -129,6 +129,7 @@ app.use("/path-perlin-noise", express.static("./node_modules/@tsparticles/path-p
 app.use("/path-polygon", express.static("./node_modules/@tsparticles/path-polygon"));
 app.use("/path-simplex-noise", express.static("./node_modules/@tsparticles/path-simplex-noise"));
 app.use("/path-svg", express.static("./node_modules/@tsparticles/path-svg"));
+app.use("/path-utils", express.static("./node_modules/@tsparticles/path-utils"));
 app.use("/path-zig-zag", express.static("./node_modules/@tsparticles/path-zig-zag"));
 app.use("/plugin-background-mask", express.static("./node_modules/@tsparticles/plugin-background-mask"));
 app.use("/plugin-blend", express.static("./node_modules/@tsparticles/plugin-blend"));

demo/vanilla/package.json

@@ -88,6 +88,7 @@
     "@tsparticles/path-polygon": "workspace:4.0.0-alpha.8",
     "@tsparticles/path-simplex-noise": "workspace:4.0.0-alpha.8",
     "@tsparticles/path-svg": "workspace:4.0.0-alpha.8",
+    "@tsparticles/path-utils": "workspace:4.0.0-alpha.8",
     "@tsparticles/path-zig-zag": "workspace:4.0.0-alpha.8",
     "@tsparticles/perlin-noise": "workspace:4.0.0-alpha.8",
     "@tsparticles/pjs": "workspace:4.0.0-alpha.8",

demo/vanilla/views/index.pug

@@ -116,6 +116,7 @@ html(lang="en")
         script(src="/tsparticles-simplex-noise/tsparticles.simplex.noise.min.js")
         script(src="/tsparticles-fractal-noise/tsparticles.fractal.noise.min.js")
         script(src="/tsparticles-engine/tsparticles.engine.min.js")
+        script(src="/path-utils/tsparticles.path.utils.min.js")
         script(src="/tsparticles-noise-field/tsparticles.noise.field.min.js")
         script(src="/tsparticles-configs/tsparticles.configs.min.js")
         script(src="/tsparticles-basic/tsparticles.basic.min.js")

engine/src/Core/Particle.ts

@@ -722,6 +722,17 @@ export class Particle {
     );
   }
 
+  isShowingBack(): boolean {
+    if (!this.roll) {
+      return false;
+    }
+
+    const backFactor = this.roll.horizontal && this.roll.vertical ? double * rollFactor : rollFactor,
+      backSum = this.roll.horizontal ? Math.PI * half : none;
+
+    return !!(Math.floor((this.roll.angle + backSum) / (Math.PI / backFactor)) % double);
+  }
+
   isVisible(): boolean {
     return !this.destroyed && !this.spawning && this.isInsideCanvas();
   }
@@ -855,11 +866,7 @@ export class Particle {
       return color;
     }
 
-    const backFactor = this.roll.horizontal && this.roll.vertical ? double * rollFactor : rollFactor,
-      backSum = this.roll.horizontal ? Math.PI * half : none,
-      rolled = Math.floor((this.roll.angle + backSum) / (Math.PI / backFactor)) % double;
-
-    if (!rolled) {
+    if (!this.isShowingBack()) {
       return color;
     }
 

package.json

@@ -37,16 +37,16 @@
     "@types/jsdom": "^27.0.0",
     "@types/node": "^25.0.10",
     "@types/webpack-env": "^1.18.8",
-    "@vitest/coverage-v8": "^4.0.17",
-    "@vitest/ui": "^4.0.17",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/ui": "^4.0.18",
     "babel-loader": "^10.0.0",
     "browserslist": "^4.28.1",
     "canvas": "^3.2.1",
     "copyfiles": "^2.4.1",
     "cross-env": "^10.1.0",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-jsdoc": "^62.3.0",
+    "eslint-plugin-jsdoc": "^62.3.1",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-tsdoc": "^0.5.0",
     "fs-extra": "^11.3.3",
@@ -56,7 +56,7 @@
     "jsdom-global": "^3.0.2",
     "lerna": "^9.0.3",
     "madge": "^8.0.0",
-    "nx": "^22.4.0",
+    "nx": "^22.4.1",
     "nx-cloud": "^19.1.0",
     "prettier": "^3.8.1",
     "prettier-plugin-multiline-arrays": "4.1.3",