@tsparticles/effect-trail 3.0.3 → 3.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. package/browser/TrailDrawer.js +19 -13
  2. package/cjs/TrailDrawer.js +19 -13
  3. package/esm/TrailDrawer.js +19 -13
  4. package/package.json +2 -2
  5. package/report.html +2 -2
  6. package/tsparticles.effect.trail.js +27 -13
  7. package/tsparticles.effect.trail.min.js +1 -1
  8. package/tsparticles.effect.trail.min.js.LICENSE.txt +1 -1
  9. package/types/TrailDrawer.d.ts +2 -2
  10. package/umd/TrailDrawer.js +19 -13
package/browser/TrailDrawer.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { getRangeValue, } from "@tsparticles/engine";
2
+ const double = 2, minTrailLength = 2, trailLengthOffset = 1, noItems = 0, half = 0.5, minWidth = -1, defaultLength = 10, defaultAlpha = 1;
2
3
  export class TrailDrawer {
3
4
  draw(data) {
4
- const { context, radius, particle } = data, diameter = radius * 2, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
5
+ const { context, radius, particle } = data, diameter = radius * double, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
5
6
  if (!particle.trail || !particle.trailLength) {
6
7
  return;
7
8
  }
@@ -13,7 +14,7 @@ export class TrailDrawer {
13
14
  y: currentPos.y,
14
15
  },
15
16
  });
16
- if (particle.trail.length < 2) {
17
+ if (particle.trail.length < minTrailLength) {
17
18
  return;
18
19
  }
19
20
  while (particle.trail.length > pathLength) {
@@ -26,25 +27,30 @@ export class TrailDrawer {
26
27
  width: particle.container.canvas.size.width + diameter,
27
28
  height: particle.container.canvas.size.height + diameter,
28
29
  };
29
- let lastPos = particle.trail[trailLength - 1].position;
30
- context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
31
- for (let i = trailLength; i > 0; i--) {
32
- const step = particle.trail[i - 1], position = step.position;
30
+ let lastPos = particle.trail[trailLength - trailLengthOffset].position;
31
+ const defaultTransform = {
32
+ a: 1,
33
+ b: 0,
34
+ c: 0,
35
+ d: 1,
36
+ };
37
+ context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, currentPos.x, currentPos.y);
38
+ for (let i = trailLength; i > noItems; i--) {
39
+ const step = particle.trail[i - trailLengthOffset], position = step.position;
33
40
  context.beginPath();
34
41
  context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
35
42
  const warp = {
36
43
  x: (lastPos.x + canvasSize.width) % canvasSize.width,
37
44
  y: (lastPos.y + canvasSize.height) % canvasSize.height,
38
45
  };
39
- if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ||
40
- Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
46
+ if (Math.abs(lastPos.x - position.x) > canvasSize.width * half ||
47
+ Math.abs(lastPos.y - position.y) > canvasSize.height * half) {
41
48
  lastPos = position;
42
49
  continue;
43
50
  }
44
- context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height / 2 ? warp.y : position.y) - offsetPos.y);
45
- const width = Math.max((i / trailLength) * diameter, pxRatio, particle.trailMinWidth ?? -1);
46
- const oldAlpha = context.globalAlpha;
47
- context.globalAlpha = particle.trailFade ? i / trailLength : 1;
51
+ context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width * half ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height * half ? warp.y : position.y) - offsetPos.y);
52
+ const width = Math.max((i / trailLength) * diameter, pxRatio, particle.trailMinWidth ?? minWidth), oldAlpha = context.globalAlpha;
53
+ context.globalAlpha = particle.trailFade ? i / trailLength : defaultAlpha;
48
54
  context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
49
55
  context.strokeStyle = step.color;
50
56
  context.stroke();
@@ -58,7 +64,7 @@ export class TrailDrawer {
58
64
  particle.trail = [];
59
65
  const effectData = particle.effectData;
60
66
  particle.trailFade = effectData?.fade ?? true;
61
- particle.trailLength = getRangeValue(effectData?.length ?? 10) * container.retina.pixelRatio;
67
+ particle.trailLength = getRangeValue(effectData?.length ?? defaultLength) * container.retina.pixelRatio;
62
68
  particle.trailMaxWidth = effectData?.maxWidth
63
69
  ? getRangeValue(effectData.maxWidth) * container.retina.pixelRatio
64
70
  : undefined;
package/cjs/TrailDrawer.js CHANGED
@@ -2,9 +2,10 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.TrailDrawer = void 0;
4
4
  const engine_1 = require("@tsparticles/engine");
5
+ const double = 2, minTrailLength = 2, trailLengthOffset = 1, noItems = 0, half = 0.5, minWidth = -1, defaultLength = 10, defaultAlpha = 1;
5
6
  class TrailDrawer {
6
7
  draw(data) {
7
- const { context, radius, particle } = data, diameter = radius * 2, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
8
+ const { context, radius, particle } = data, diameter = radius * double, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
8
9
  if (!particle.trail || !particle.trailLength) {
9
10
  return;
10
11
  }
@@ -16,7 +17,7 @@ class TrailDrawer {
16
17
  y: currentPos.y,
17
18
  },
18
19
  });
19
- if (particle.trail.length < 2) {
20
+ if (particle.trail.length < minTrailLength) {
20
21
  return;
21
22
  }
22
23
  while (particle.trail.length > pathLength) {
@@ -29,25 +30,30 @@ class TrailDrawer {
29
30
  width: particle.container.canvas.size.width + diameter,
30
31
  height: particle.container.canvas.size.height + diameter,
31
32
  };
32
- let lastPos = particle.trail[trailLength - 1].position;
33
- context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
34
- for (let i = trailLength; i > 0; i--) {
35
- const step = particle.trail[i - 1], position = step.position;
33
+ let lastPos = particle.trail[trailLength - trailLengthOffset].position;
34
+ const defaultTransform = {
35
+ a: 1,
36
+ b: 0,
37
+ c: 0,
38
+ d: 1,
39
+ };
40
+ context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, currentPos.x, currentPos.y);
41
+ for (let i = trailLength; i > noItems; i--) {
42
+ const step = particle.trail[i - trailLengthOffset], position = step.position;
36
43
  context.beginPath();
37
44
  context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
38
45
  const warp = {
39
46
  x: (lastPos.x + canvasSize.width) % canvasSize.width,
40
47
  y: (lastPos.y + canvasSize.height) % canvasSize.height,
41
48
  };
42
- if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ||
43
- Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
49
+ if (Math.abs(lastPos.x - position.x) > canvasSize.width * half ||
50
+ Math.abs(lastPos.y - position.y) > canvasSize.height * half) {
44
51
  lastPos = position;
45
52
  continue;
46
53
  }
47
- context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height / 2 ? warp.y : position.y) - offsetPos.y);
48
- const width = Math.max((i / trailLength) * diameter, pxRatio, particle.trailMinWidth ?? -1);
49
- const oldAlpha = context.globalAlpha;
50
- context.globalAlpha = particle.trailFade ? i / trailLength : 1;
54
+ context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width * half ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height * half ? warp.y : position.y) - offsetPos.y);
55
+ const width = Math.max((i / trailLength) * diameter, pxRatio, particle.trailMinWidth ?? minWidth), oldAlpha = context.globalAlpha;
56
+ context.globalAlpha = particle.trailFade ? i / trailLength : defaultAlpha;
51
57
  context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
52
58
  context.strokeStyle = step.color;
53
59
  context.stroke();
@@ -61,7 +67,7 @@ class TrailDrawer {
61
67
  particle.trail = [];
62
68
  const effectData = particle.effectData;
63
69
  particle.trailFade = effectData?.fade ?? true;
64
- particle.trailLength = (0, engine_1.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
70
+ particle.trailLength = (0, engine_1.getRangeValue)(effectData?.length ?? defaultLength) * container.retina.pixelRatio;
65
71
  particle.trailMaxWidth = effectData?.maxWidth
66
72
  ? (0, engine_1.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio
67
73
  : undefined;
package/esm/TrailDrawer.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { getRangeValue, } from "@tsparticles/engine";
2
+ const double = 2, minTrailLength = 2, trailLengthOffset = 1, noItems = 0, half = 0.5, minWidth = -1, defaultLength = 10, defaultAlpha = 1;
2
3
  export class TrailDrawer {
3
4
  draw(data) {
4
- const { context, radius, particle } = data, diameter = radius * 2, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
5
+ const { context, radius, particle } = data, diameter = radius * double, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
5
6
  if (!particle.trail || !particle.trailLength) {
6
7
  return;
7
8
  }
@@ -13,7 +14,7 @@ export class TrailDrawer {
13
14
  y: currentPos.y,
14
15
  },
15
16
  });
16
- if (particle.trail.length < 2) {
17
+ if (particle.trail.length < minTrailLength) {
17
18
  return;
18
19
  }
19
20
  while (particle.trail.length > pathLength) {
@@ -26,25 +27,30 @@ export class TrailDrawer {
26
27
  width: particle.container.canvas.size.width + diameter,
27
28
  height: particle.container.canvas.size.height + diameter,
28
29
  };
29
- let lastPos = particle.trail[trailLength - 1].position;
30
- context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
31
- for (let i = trailLength; i > 0; i--) {
32
- const step = particle.trail[i - 1], position = step.position;
30
+ let lastPos = particle.trail[trailLength - trailLengthOffset].position;
31
+ const defaultTransform = {
32
+ a: 1,
33
+ b: 0,
34
+ c: 0,
35
+ d: 1,
36
+ };
37
+ context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, currentPos.x, currentPos.y);
38
+ for (let i = trailLength; i > noItems; i--) {
39
+ const step = particle.trail[i - trailLengthOffset], position = step.position;
33
40
  context.beginPath();
34
41
  context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
35
42
  const warp = {
36
43
  x: (lastPos.x + canvasSize.width) % canvasSize.width,
37
44
  y: (lastPos.y + canvasSize.height) % canvasSize.height,
38
45
  };
39
- if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ||
40
- Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
46
+ if (Math.abs(lastPos.x - position.x) > canvasSize.width * half ||
47
+ Math.abs(lastPos.y - position.y) > canvasSize.height * half) {
41
48
  lastPos = position;
42
49
  continue;
43
50
  }
44
- context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height / 2 ? warp.y : position.y) - offsetPos.y);
45
- const width = Math.max((i / trailLength) * diameter, pxRatio, particle.trailMinWidth ?? -1);
46
- const oldAlpha = context.globalAlpha;
47
- context.globalAlpha = particle.trailFade ? i / trailLength : 1;
51
+ context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width * half ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height * half ? warp.y : position.y) - offsetPos.y);
52
+ const width = Math.max((i / trailLength) * diameter, pxRatio, particle.trailMinWidth ?? minWidth), oldAlpha = context.globalAlpha;
53
+ context.globalAlpha = particle.trailFade ? i / trailLength : defaultAlpha;
48
54
  context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
49
55
  context.strokeStyle = step.color;
50
56
  context.stroke();
@@ -58,7 +64,7 @@ export class TrailDrawer {
58
64
  particle.trail = [];
59
65
  const effectData = particle.effectData;
60
66
  particle.trailFade = effectData?.fade ?? true;
61
- particle.trailLength = getRangeValue(effectData?.length ?? 10) * container.retina.pixelRatio;
67
+ particle.trailLength = getRangeValue(effectData?.length ?? defaultLength) * container.retina.pixelRatio;
62
68
  particle.trailMaxWidth = effectData?.maxWidth
63
69
  ? getRangeValue(effectData.maxWidth) * container.retina.pixelRatio
64
70
  : undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/effect-trail",
3
- "version": "3.0.3",
3
+ "version": "3.1.0",
4
4
  "description": "tsParticles trail effect",
5
5
  "homepage": "https://particles.js.org",
6
6
  "repository": {
@@ -100,7 +100,7 @@
100
100
  "./package.json": "./package.json"
101
101
  },
102
102
  "dependencies": {
103
- "@tsparticles/engine": "^3.0.3"
103
+ "@tsparticles/engine": "^3.1.0"
104
104
  },
105
105
  "publishConfig": {
106
106
  "access": "public"
package/report.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8"/>
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
6
- <title>@tsparticles/effect-trail [26 Dec 2023 at 19:25]</title>
6
+ <title>@tsparticles/effect-trail [13 Jan 2024 at 22:58]</title>
7
7
  <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
8
8
 
9
9
  <script>
@@ -31,7 +31,7 @@
31
31
  <body>
32
32
  <div id="app"></div>
33
33
  <script>
34
- window.chartData = [{"label":"tsparticles.effect.trail.js","isAsset":true,"statSize":3280,"parsedSize":7126,"gzipSize":2190,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":3238,"groups":[{"id":938,"label":"index.js + 1 modules (concatenated)","path":"./dist/browser/index.js + 1 modules (concatenated)","statSize":3238,"parsedSize":7126,"gzipSize":2190,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser","statSize":3238,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/index.js","statSize":176,"parsedSize":387,"gzipSize":119,"inaccurateSizes":true},{"id":null,"label":"TrailDrawer.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/TrailDrawer.js","statSize":3062,"parsedSize":6738,"gzipSize":2070,"inaccurateSizes":true}],"parsedSize":7126,"gzipSize":2190,"inaccurateSizes":true}]}],"parsedSize":7126,"gzipSize":2190},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.effect.trail":true}}];
34
+ window.chartData = [{"label":"tsparticles.effect.trail.js","isAsset":true,"statSize":3678,"parsedSize":7548,"gzipSize":2298,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":3636,"groups":[{"id":588,"label":"index.js + 1 modules (concatenated)","path":"./dist/browser/index.js + 1 modules (concatenated)","statSize":3636,"parsedSize":7548,"gzipSize":2298,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser","statSize":3636,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/index.js","statSize":176,"parsedSize":365,"gzipSize":111,"inaccurateSizes":true},{"id":null,"label":"TrailDrawer.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/TrailDrawer.js","statSize":3460,"parsedSize":7182,"gzipSize":2186,"inaccurateSizes":true}],"parsedSize":7548,"gzipSize":2298,"inaccurateSizes":true}]}],"parsedSize":7548,"gzipSize":2298},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.effect.trail":true}}];
35
35
  window.entrypoints = ["tsparticles.effect.trail","tsparticles.effect.trail.min"];
36
36
  window.defaultSizes = "parsed";
37
37
  </script>
package/tsparticles.effect.trail.js CHANGED
@@ -4,7 +4,7 @@
4
4
  * Demo / Generator : https://particles.js.org/
5
5
  * GitHub : https://www.github.com/matteobruni/tsparticles
6
6
  * How to use? : Check the GitHub README
7
- * v3.0.3
7
+ * v3.1.0
8
8
  */
9
9
  (function webpackUniversalModuleDefinition(root, factory) {
10
10
  if(typeof exports === 'object' && typeof module === 'object')
@@ -98,6 +98,14 @@ __webpack_require__.d(__webpack_exports__, {
98
98
  var engine_root_window_ = __webpack_require__(533);
99
99
  ;// CONCATENATED MODULE: ./dist/browser/TrailDrawer.js
100
100
 
101
+ const TrailDrawer_double = 2,
102
+ minTrailLength = 2,
103
+ trailLengthOffset = 1,
104
+ noItems = 0,
105
+ half = 0.5,
106
+ minWidth = -1,
107
+ defaultLength = 10,
108
+ defaultAlpha = 1;
101
109
  class TrailDrawer {
102
110
  draw(data) {
103
111
  const {
@@ -105,7 +113,7 @@ class TrailDrawer {
105
113
  radius,
106
114
  particle
107
115
  } = data,
108
- diameter = radius * 2,
116
+ diameter = radius * TrailDrawer_double,
109
117
  pxRatio = particle.container.retina.pixelRatio,
110
118
  currentPos = particle.getPosition();
111
119
  if (!particle.trail || !particle.trailLength) {
@@ -119,7 +127,7 @@ class TrailDrawer {
119
127
  y: currentPos.y
120
128
  }
121
129
  });
122
- if (particle.trail.length < 2) {
130
+ if (particle.trail.length < minTrailLength) {
123
131
  return;
124
132
  }
125
133
  while (particle.trail.length > pathLength) {
@@ -134,10 +142,16 @@ class TrailDrawer {
134
142
  width: particle.container.canvas.size.width + diameter,
135
143
  height: particle.container.canvas.size.height + diameter
136
144
  };
137
- let lastPos = particle.trail[trailLength - 1].position;
138
- context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
139
- for (let i = trailLength; i > 0; i--) {
140
- const step = particle.trail[i - 1],
145
+ let lastPos = particle.trail[trailLength - trailLengthOffset].position;
146
+ const defaultTransform = {
147
+ a: 1,
148
+ b: 0,
149
+ c: 0,
150
+ d: 1
151
+ };
152
+ context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, currentPos.x, currentPos.y);
153
+ for (let i = trailLength; i > noItems; i--) {
154
+ const step = particle.trail[i - trailLengthOffset],
141
155
  position = step.position;
142
156
  context.beginPath();
143
157
  context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
@@ -145,14 +159,14 @@ class TrailDrawer {
145
159
  x: (lastPos.x + canvasSize.width) % canvasSize.width,
146
160
  y: (lastPos.y + canvasSize.height) % canvasSize.height
147
161
  };
148
- if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 || Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
162
+ if (Math.abs(lastPos.x - position.x) > canvasSize.width * half || Math.abs(lastPos.y - position.y) > canvasSize.height * half) {
149
163
  lastPos = position;
150
164
  continue;
151
165
  }
152
- context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height / 2 ? warp.y : position.y) - offsetPos.y);
153
- const width = Math.max(i / trailLength * diameter, pxRatio, particle.trailMinWidth ?? -1);
154
- const oldAlpha = context.globalAlpha;
155
- context.globalAlpha = particle.trailFade ? i / trailLength : 1;
166
+ context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width * half ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height * half ? warp.y : position.y) - offsetPos.y);
167
+ const width = Math.max(i / trailLength * diameter, pxRatio, particle.trailMinWidth ?? minWidth),
168
+ oldAlpha = context.globalAlpha;
169
+ context.globalAlpha = particle.trailFade ? i / trailLength : defaultAlpha;
156
170
  context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
157
171
  context.strokeStyle = step.color;
158
172
  context.stroke();
@@ -168,7 +182,7 @@ class TrailDrawer {
168
182
  particle.trail = [];
169
183
  const effectData = particle.effectData;
170
184
  particle.trailFade = effectData?.fade ?? true;
171
- particle.trailLength = (0,engine_root_window_.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
185
+ particle.trailLength = (0,engine_root_window_.getRangeValue)(effectData?.length ?? defaultLength) * container.retina.pixelRatio;
172
186
  particle.trailMaxWidth = effectData?.maxWidth ? (0,engine_root_window_.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio : undefined;
173
187
  particle.trailMinWidth = effectData?.minWidth ? (0,engine_root_window_.getRangeValue)(effectData.minWidth) * container.retina.pixelRatio : undefined;
174
188
  }
package/tsparticles.effect.trail.min.js CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! For license information please see tsparticles.effect.trail.min.js.LICENSE.txt */
2
- !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var a in i)("object"==typeof exports?exports:t)[a]=i[a]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function a(t){var r=i[t];if(void 0!==r)return r.exports;var o=i[t]={exports:{}};return e[t](o,o.exports,a),o.exports}a.d=(t,e)=>{for(var i in e)a.o(e,i)&&!a.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},a.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),a.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{a.r(r),a.d(r,{loadTrailEffect:()=>i});var t=a(533);class e{draw(t){const{context:e,radius:i,particle:a}=t,r=2*i,o=a.container.retina.pixelRatio,n=a.getPosition();if(!a.trail||!a.trailLength)return;const l=a.trailLength;if(a.trail.push({color:e.fillStyle??e.strokeStyle,position:{x:n.x,y:n.y}}),a.trail.length<2)return;for(;a.trail.length>l;)a.trail.shift();const s=Math.min(a.trail.length,l),c=n.x,d=n.y,f=a.container.canvas.size.width+r,p=a.container.canvas.size.height+r;let h=a.trail[s-1].position;e.setTransform(1,0,0,1,n.x,n.y);for(let t=s;t>0;t--){const i=a.trail[t-1],n=i.position;e.beginPath(),e.moveTo(h.x-c,h.y-d);const l={x:(h.x+f)%f,y:(h.y+p)%p};if(Math.abs(h.x-n.x)>f/2||Math.abs(h.y-n.y)>p/2){h=n;continue}e.lineTo((Math.abs(h.x-n.x)>f/2?l.x:n.x)-c,(Math.abs(h.y-n.y)>p/2?l.y:n.y)-d);const x=Math.max(t/s*r,o,a.trailMinWidth??-1),y=e.globalAlpha;e.globalAlpha=a.trailFade?t/s:1,e.lineWidth=a.trailMaxWidth?Math.min(x,a.trailMaxWidth):x,e.strokeStyle=i.color,e.stroke(),e.globalAlpha=y,h=n}const{transformData:x}=t;e.setTransform(x.a,x.b,x.c,x.d,n.x,n.y)}particleInit(e,i){i.trail=[];const a=i.effectData;i.trailFade=a?.fade??!0,i.trailLength=(0,t.getRangeValue)(a?.length??10)*e.retina.pixelRatio,i.trailMaxWidth=a?.maxWidth?(0,t.getRangeValue)(a.maxWidth)*e.retina.pixelRatio:void 0,i.trailMinWidth=a?.minWidth?(0,t.getRangeValue)(a.minWidth)*e.retina.pixelRatio:void 0}}async function i(t,i=!0){await t.addEffect("trail",new e,i)}})(),r})()));
2
+ !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var a in i)("object"==typeof exports?exports:t)[a]=i[a]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function a(t){var r=i[t];if(void 0!==r)return r.exports;var o=i[t]={exports:{}};return e[t](o,o.exports,a),o.exports}a.d=(t,e)=>{for(var i in e)a.o(e,i)&&!a.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},a.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),a.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{a.r(r),a.d(r,{loadTrailEffect:()=>o});var t=a(533);const e=.5;class i{draw(t){const{context:i,radius:a,particle:r}=t,o=2*a,n=r.container.retina.pixelRatio,l=r.getPosition();if(!r.trail||!r.trailLength)return;const s=r.trailLength;if(r.trail.push({color:i.fillStyle??i.strokeStyle,position:{x:l.x,y:l.y}}),r.trail.length<2)return;for(;r.trail.length>s;)r.trail.shift();const c=Math.min(r.trail.length,s),d=l.x,f=l.y,p=r.container.canvas.size.width+o,h=r.container.canvas.size.height+o;let x=r.trail[c-1].position;const y=1,g=0,u=0,b=1;i.setTransform(y,g,u,b,l.x,l.y);for(let t=c;t>0;t--){const a=r.trail[t-1],l=a.position;i.beginPath(),i.moveTo(x.x-d,x.y-f);const s={x:(x.x+p)%p,y:(x.y+h)%h};if(Math.abs(x.x-l.x)>p*e||Math.abs(x.y-l.y)>h*e){x=l;continue}i.lineTo((Math.abs(x.x-l.x)>p*e?s.x:l.x)-d,(Math.abs(x.y-l.y)>h*e?s.y:l.y)-f);const y=Math.max(t/c*o,n,r.trailMinWidth??-1),g=i.globalAlpha;i.globalAlpha=r.trailFade?t/c:1,i.lineWidth=r.trailMaxWidth?Math.min(y,r.trailMaxWidth):y,i.strokeStyle=a.color,i.stroke(),i.globalAlpha=g,x=l}const{transformData:m}=t;i.setTransform(m.a,m.b,m.c,m.d,l.x,l.y)}particleInit(e,i){i.trail=[];const a=i.effectData;i.trailFade=a?.fade??!0,i.trailLength=(0,t.getRangeValue)(a?.length??10)*e.retina.pixelRatio,i.trailMaxWidth=a?.maxWidth?(0,t.getRangeValue)(a.maxWidth)*e.retina.pixelRatio:void 0,i.trailMinWidth=a?.minWidth?(0,t.getRangeValue)(a.minWidth)*e.retina.pixelRatio:void 0}}async function o(t,e=!0){await t.addEffect("trail",new i,e)}})(),r})()));
package/tsparticles.effect.trail.min.js.LICENSE.txt CHANGED
@@ -1 +1 @@
1
- /*! tsParticles Trail Shape v3.0.3 by Matteo Bruni */
1
+ /*! tsParticles Trail Shape v3.1.0 by Matteo Bruni */
package/types/TrailDrawer.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import { type Container, type ICoordinates, type IEffectDrawer, type IShapeDrawData, type Particle } from "@tsparticles/engine";
2
- type TrailStep = {
2
+ interface TrailStep {
3
3
  color: string | CanvasGradient | CanvasPattern;
4
4
  position: ICoordinates;
5
- };
5
+ }
6
6
  type TrailParticle = Particle & {
7
7
  trail?: TrailStep[];
8
8
  trailFade?: boolean;
package/umd/TrailDrawer.js CHANGED
@@ -11,9 +11,10 @@
11
11
  Object.defineProperty(exports, "__esModule", { value: true });
12
12
  exports.TrailDrawer = void 0;
13
13
  const engine_1 = require("@tsparticles/engine");
14
+ const double = 2, minTrailLength = 2, trailLengthOffset = 1, noItems = 0, half = 0.5, minWidth = -1, defaultLength = 10, defaultAlpha = 1;
14
15
  class TrailDrawer {
15
16
  draw(data) {
16
- const { context, radius, particle } = data, diameter = radius * 2, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
17
+ const { context, radius, particle } = data, diameter = radius * double, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
17
18
  if (!particle.trail || !particle.trailLength) {
18
19
  return;
19
20
  }
@@ -25,7 +26,7 @@
25
26
  y: currentPos.y,
26
27
  },
27
28
  });
28
- if (particle.trail.length < 2) {
29
+ if (particle.trail.length < minTrailLength) {
29
30
  return;
30
31
  }
31
32
  while (particle.trail.length > pathLength) {
@@ -38,25 +39,30 @@
38
39
  width: particle.container.canvas.size.width + diameter,
39
40
  height: particle.container.canvas.size.height + diameter,
40
41
  };
41
- let lastPos = particle.trail[trailLength - 1].position;
42
- context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
43
- for (let i = trailLength; i > 0; i--) {
44
- const step = particle.trail[i - 1], position = step.position;
42
+ let lastPos = particle.trail[trailLength - trailLengthOffset].position;
43
+ const defaultTransform = {
44
+ a: 1,
45
+ b: 0,
46
+ c: 0,
47
+ d: 1,
48
+ };
49
+ context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, currentPos.x, currentPos.y);
50
+ for (let i = trailLength; i > noItems; i--) {
51
+ const step = particle.trail[i - trailLengthOffset], position = step.position;
45
52
  context.beginPath();
46
53
  context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
47
54
  const warp = {
48
55
  x: (lastPos.x + canvasSize.width) % canvasSize.width,
49
56
  y: (lastPos.y + canvasSize.height) % canvasSize.height,
50
57
  };
51
- if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ||
52
- Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
58
+ if (Math.abs(lastPos.x - position.x) > canvasSize.width * half ||
59
+ Math.abs(lastPos.y - position.y) > canvasSize.height * half) {
53
60
  lastPos = position;
54
61
  continue;
55
62
  }
56
- context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height / 2 ? warp.y : position.y) - offsetPos.y);
57
- const width = Math.max((i / trailLength) * diameter, pxRatio, particle.trailMinWidth ?? -1);
58
- const oldAlpha = context.globalAlpha;
59
- context.globalAlpha = particle.trailFade ? i / trailLength : 1;
63
+ context.lineTo((Math.abs(lastPos.x - position.x) > canvasSize.width * half ? warp.x : position.x) - offsetPos.x, (Math.abs(lastPos.y - position.y) > canvasSize.height * half ? warp.y : position.y) - offsetPos.y);
64
+ const width = Math.max((i / trailLength) * diameter, pxRatio, particle.trailMinWidth ?? minWidth), oldAlpha = context.globalAlpha;
65
+ context.globalAlpha = particle.trailFade ? i / trailLength : defaultAlpha;
60
66
  context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
61
67
  context.strokeStyle = step.color;
62
68
  context.stroke();
@@ -70,7 +76,7 @@
70
76
  particle.trail = [];
71
77
  const effectData = particle.effectData;
72
78
  particle.trailFade = effectData?.fade ?? true;
73
- particle.trailLength = (0, engine_1.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
79
+ particle.trailLength = (0, engine_1.getRangeValue)(effectData?.length ?? defaultLength) * container.retina.pixelRatio;
74
80
  particle.trailMaxWidth = effectData?.maxWidth
75
81
  ? (0, engine_1.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio
76
82
  : undefined;