@tsparticles/effect-trail 3.0.0-beta.5 → 3.0.1

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 +22 -6
  2. package/cjs/TrailDrawer.js +21 -5
  3. package/esm/TrailDrawer.js +22 -6
  4. package/package.json +2 -2
  5. package/report.html +2 -2
  6. package/tsparticles.effect.trail.js +24 -6
  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 +1 -0
  10. package/umd/TrailDrawer.js +21 -5
package/browser/TrailDrawer.js CHANGED
@@ -1,4 +1,4 @@
1
- import { getDistance, getRangeValue, } from "@tsparticles/engine";
1
+ import { getRangeValue, } from "@tsparticles/engine";
2
2
  export class TrailDrawer {
3
3
  draw(data) {
4
4
  const { context, radius, particle } = data, diameter = radius * 2, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
@@ -16,32 +16,48 @@ export class TrailDrawer {
16
16
  if (particle.trail.length < 2) {
17
17
  return;
18
18
  }
19
- if (particle.trail.length > pathLength) {
19
+ while (particle.trail.length > pathLength) {
20
20
  particle.trail.shift();
21
21
  }
22
22
  const trailLength = Math.min(particle.trail.length, pathLength), offsetPos = {
23
23
  x: currentPos.x,
24
24
  y: currentPos.y,
25
+ }, canvasSize = {
26
+ width: particle.container.canvas.size.width + diameter,
27
+ height: particle.container.canvas.size.height + diameter,
25
28
  };
26
29
  let lastPos = particle.trail[trailLength - 1].position;
30
+ context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
27
31
  for (let i = trailLength; i > 0; i--) {
28
32
  const step = particle.trail[i - 1], position = step.position;
29
- if (getDistance(lastPos, position) > diameter) {
30
- continue;
31
- }
32
33
  context.beginPath();
33
34
  context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
34
- context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
35
+ const warp = {
36
+ x: (lastPos.x + canvasSize.width) % canvasSize.width,
37
+ y: (lastPos.y + canvasSize.height) % canvasSize.height,
38
+ };
39
+ if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ||
40
+ Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
41
+ lastPos = position;
42
+ continue;
43
+ }
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);
35
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;
36
48
  context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
37
49
  context.strokeStyle = step.color;
38
50
  context.stroke();
51
+ context.globalAlpha = oldAlpha;
39
52
  lastPos = position;
40
53
  }
54
+ const { transformData } = data;
55
+ context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, currentPos.x, currentPos.y);
41
56
  }
42
57
  particleInit(container, particle) {
43
58
  particle.trail = [];
44
59
  const effectData = particle.effectData;
60
+ particle.trailFade = effectData?.fade ?? true;
45
61
  particle.trailLength = getRangeValue(effectData?.length ?? 10) * container.retina.pixelRatio;
46
62
  particle.trailMaxWidth = effectData?.maxWidth
47
63
  ? getRangeValue(effectData.maxWidth) * container.retina.pixelRatio
package/cjs/TrailDrawer.js CHANGED
@@ -19,32 +19,48 @@ class TrailDrawer {
19
19
  if (particle.trail.length < 2) {
20
20
  return;
21
21
  }
22
- if (particle.trail.length > pathLength) {
22
+ while (particle.trail.length > pathLength) {
23
23
  particle.trail.shift();
24
24
  }
25
25
  const trailLength = Math.min(particle.trail.length, pathLength), offsetPos = {
26
26
  x: currentPos.x,
27
27
  y: currentPos.y,
28
+ }, canvasSize = {
29
+ width: particle.container.canvas.size.width + diameter,
30
+ height: particle.container.canvas.size.height + diameter,
28
31
  };
29
32
  let lastPos = particle.trail[trailLength - 1].position;
33
+ context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
30
34
  for (let i = trailLength; i > 0; i--) {
31
35
  const step = particle.trail[i - 1], position = step.position;
32
- if ((0, engine_1.getDistance)(lastPos, position) > diameter) {
33
- continue;
34
- }
35
36
  context.beginPath();
36
37
  context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
37
- context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
38
+ const warp = {
39
+ x: (lastPos.x + canvasSize.width) % canvasSize.width,
40
+ y: (lastPos.y + canvasSize.height) % canvasSize.height,
41
+ };
42
+ if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ||
43
+ Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
44
+ lastPos = position;
45
+ continue;
46
+ }
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);
38
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;
39
51
  context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
40
52
  context.strokeStyle = step.color;
41
53
  context.stroke();
54
+ context.globalAlpha = oldAlpha;
42
55
  lastPos = position;
43
56
  }
57
+ const { transformData } = data;
58
+ context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, currentPos.x, currentPos.y);
44
59
  }
45
60
  particleInit(container, particle) {
46
61
  particle.trail = [];
47
62
  const effectData = particle.effectData;
63
+ particle.trailFade = effectData?.fade ?? true;
48
64
  particle.trailLength = (0, engine_1.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
49
65
  particle.trailMaxWidth = effectData?.maxWidth
50
66
  ? (0, engine_1.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio
package/esm/TrailDrawer.js CHANGED
@@ -1,4 +1,4 @@
1
- import { getDistance, getRangeValue, } from "@tsparticles/engine";
1
+ import { getRangeValue, } from "@tsparticles/engine";
2
2
  export class TrailDrawer {
3
3
  draw(data) {
4
4
  const { context, radius, particle } = data, diameter = radius * 2, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
@@ -16,32 +16,48 @@ export class TrailDrawer {
16
16
  if (particle.trail.length < 2) {
17
17
  return;
18
18
  }
19
- if (particle.trail.length > pathLength) {
19
+ while (particle.trail.length > pathLength) {
20
20
  particle.trail.shift();
21
21
  }
22
22
  const trailLength = Math.min(particle.trail.length, pathLength), offsetPos = {
23
23
  x: currentPos.x,
24
24
  y: currentPos.y,
25
+ }, canvasSize = {
26
+ width: particle.container.canvas.size.width + diameter,
27
+ height: particle.container.canvas.size.height + diameter,
25
28
  };
26
29
  let lastPos = particle.trail[trailLength - 1].position;
30
+ context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
27
31
  for (let i = trailLength; i > 0; i--) {
28
32
  const step = particle.trail[i - 1], position = step.position;
29
- if (getDistance(lastPos, position) > diameter) {
30
- continue;
31
- }
32
33
  context.beginPath();
33
34
  context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
34
- context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
35
+ const warp = {
36
+ x: (lastPos.x + canvasSize.width) % canvasSize.width,
37
+ y: (lastPos.y + canvasSize.height) % canvasSize.height,
38
+ };
39
+ if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ||
40
+ Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
41
+ lastPos = position;
42
+ continue;
43
+ }
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);
35
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;
36
48
  context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
37
49
  context.strokeStyle = step.color;
38
50
  context.stroke();
51
+ context.globalAlpha = oldAlpha;
39
52
  lastPos = position;
40
53
  }
54
+ const { transformData } = data;
55
+ context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, currentPos.x, currentPos.y);
41
56
  }
42
57
  particleInit(container, particle) {
43
58
  particle.trail = [];
44
59
  const effectData = particle.effectData;
60
+ particle.trailFade = effectData?.fade ?? true;
45
61
  particle.trailLength = getRangeValue(effectData?.length ?? 10) * container.retina.pixelRatio;
46
62
  particle.trailMaxWidth = effectData?.maxWidth
47
63
  ? getRangeValue(effectData.maxWidth) * container.retina.pixelRatio
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tsparticles/effect-trail",
3
- "version": "3.0.0-beta.5",
3
+ "version": "3.0.1",
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.0-beta.5"
103
+ "@tsparticles/engine": "^3.0.1"
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 [3 Dec 2023 at 18:37]</title>
6
+ <title>@tsparticles/effect-trail [6 Dec 2023 at 09:36]</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":2298,"parsedSize":6162,"gzipSize":1964,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":2256,"groups":[{"id":625,"label":"index.js + 1 modules (concatenated)","path":"./dist/browser/index.js + 1 modules (concatenated)","statSize":2256,"parsedSize":6162,"gzipSize":1964,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser","statSize":2256,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/index.js","statSize":176,"parsedSize":480,"gzipSize":153,"inaccurateSizes":true},{"id":null,"label":"TrailDrawer.js","path":"./dist/browser/index.js + 1 modules (concatenated)/dist/browser/TrailDrawer.js","statSize":2080,"parsedSize":5681,"gzipSize":1810,"inaccurateSizes":true}],"parsedSize":6162,"gzipSize":1964,"inaccurateSizes":true}]}],"parsedSize":6162,"gzipSize":1964},{"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":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}}];
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.0-beta.5
7
+ * v3.0.1
8
8
  */
9
9
  (function webpackUniversalModuleDefinition(root, factory) {
10
10
  if(typeof exports === 'object' && typeof module === 'object')
@@ -122,34 +122,52 @@ class TrailDrawer {
122
122
  if (particle.trail.length < 2) {
123
123
  return;
124
124
  }
125
- if (particle.trail.length > pathLength) {
125
+ while (particle.trail.length > pathLength) {
126
126
  particle.trail.shift();
127
127
  }
128
128
  const trailLength = Math.min(particle.trail.length, pathLength),
129
129
  offsetPos = {
130
130
  x: currentPos.x,
131
131
  y: currentPos.y
132
+ },
133
+ canvasSize = {
134
+ width: particle.container.canvas.size.width + diameter,
135
+ height: particle.container.canvas.size.height + diameter
132
136
  };
133
137
  let lastPos = particle.trail[trailLength - 1].position;
138
+ context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
134
139
  for (let i = trailLength; i > 0; i--) {
135
140
  const step = particle.trail[i - 1],
136
141
  position = step.position;
137
- if ((0,engine_root_window_.getDistance)(lastPos, position) > diameter) {
138
- continue;
139
- }
140
142
  context.beginPath();
141
143
  context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
142
- context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
144
+ const warp = {
145
+ x: (lastPos.x + canvasSize.width) % canvasSize.width,
146
+ y: (lastPos.y + canvasSize.height) % canvasSize.height
147
+ };
148
+ if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 || Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
149
+ lastPos = position;
150
+ continue;
151
+ }
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);
143
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;
144
156
  context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
145
157
  context.strokeStyle = step.color;
146
158
  context.stroke();
159
+ context.globalAlpha = oldAlpha;
147
160
  lastPos = position;
148
161
  }
162
+ const {
163
+ transformData
164
+ } = data;
165
+ context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, currentPos.x, currentPos.y);
149
166
  }
150
167
  particleInit(container, particle) {
151
168
  particle.trail = [];
152
169
  const effectData = particle.effectData;
170
+ particle.trailFade = effectData?.fade ?? true;
153
171
  particle.trailLength = (0,engine_root_window_.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
154
172
  particle.trailMaxWidth = effectData?.maxWidth ? (0,engine_root_window_.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio : undefined;
155
173
  particle.trailMinWidth = effectData?.minWidth ? (0,engine_root_window_.getRangeValue)(effectData.minWidth) * container.retina.pixelRatio : undefined;
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 r in i)("object"==typeof exports?exports:t)[r]=i[r]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function r(t){var o=i[t];if(void 0!==o)return o.exports;var a=i[t]={exports:{}};return e[t](a,a.exports,r),a.exports}r.d=(t,e)=>{for(var i in e)r.o(e,i)&&!r.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};return(()=>{r.r(o),r.d(o,{loadTrailEffect:()=>i});var t=r(533);class e{draw(e){const{context:i,radius:r,particle:o}=e,a=2*r,n=o.container.retina.pixelRatio,l=o.getPosition();if(!o.trail||!o.trailLength)return;const s=o.trailLength;if(o.trail.push({color:i.fillStyle??i.strokeStyle,position:{x:l.x,y:l.y}}),o.trail.length<2)return;o.trail.length>s&&o.trail.shift();const c=Math.min(o.trail.length,s),p=l.x,d=l.y;let f=o.trail[c-1].position;for(let e=c;e>0;e--){const r=o.trail[e-1],l=r.position;if((0,t.getDistance)(f,l)>a)continue;i.beginPath(),i.moveTo(f.x-p,f.y-d),i.lineTo(l.x-p,l.y-d);const s=Math.max(e/c*a,n,o.trailMinWidth??-1);i.lineWidth=o.trailMaxWidth?Math.min(s,o.trailMaxWidth):s,i.strokeStyle=r.color,i.stroke(),f=l}}particleInit(e,i){i.trail=[];const r=i.effectData;i.trailLength=(0,t.getRangeValue)(r?.length??10)*e.retina.pixelRatio,i.trailMaxWidth=r?.maxWidth?(0,t.getRangeValue)(r.maxWidth)*e.retina.pixelRatio:void 0,i.trailMinWidth=r?.minWidth?(0,t.getRangeValue)(r.minWidth)*e.retina.pixelRatio:void 0}}async function i(t,i=!0){await t.addEffect("trail",new e,i)}})(),o})()));
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})()));
package/tsparticles.effect.trail.min.js.LICENSE.txt CHANGED
@@ -1 +1 @@
1
- /*! tsParticles Trail Shape v3.0.0-beta.5 by Matteo Bruni */
1
+ /*! tsParticles Trail Shape v3.0.1 by Matteo Bruni */
package/types/TrailDrawer.d.ts CHANGED
@@ -5,6 +5,7 @@ type TrailStep = {
5
5
  };
6
6
  type TrailParticle = Particle & {
7
7
  trail?: TrailStep[];
8
+ trailFade?: boolean;
8
9
  trailLength?: number;
9
10
  trailMaxWidth?: number;
10
11
  trailMinWidth?: number;
package/umd/TrailDrawer.js CHANGED
@@ -28,32 +28,48 @@
28
28
  if (particle.trail.length < 2) {
29
29
  return;
30
30
  }
31
- if (particle.trail.length > pathLength) {
31
+ while (particle.trail.length > pathLength) {
32
32
  particle.trail.shift();
33
33
  }
34
34
  const trailLength = Math.min(particle.trail.length, pathLength), offsetPos = {
35
35
  x: currentPos.x,
36
36
  y: currentPos.y,
37
+ }, canvasSize = {
38
+ width: particle.container.canvas.size.width + diameter,
39
+ height: particle.container.canvas.size.height + diameter,
37
40
  };
38
41
  let lastPos = particle.trail[trailLength - 1].position;
42
+ context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
39
43
  for (let i = trailLength; i > 0; i--) {
40
44
  const step = particle.trail[i - 1], position = step.position;
41
- if ((0, engine_1.getDistance)(lastPos, position) > diameter) {
42
- continue;
43
- }
44
45
  context.beginPath();
45
46
  context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
46
- context.lineTo(position.x - offsetPos.x, position.y - offsetPos.y);
47
+ const warp = {
48
+ x: (lastPos.x + canvasSize.width) % canvasSize.width,
49
+ y: (lastPos.y + canvasSize.height) % canvasSize.height,
50
+ };
51
+ if (Math.abs(lastPos.x - position.x) > canvasSize.width / 2 ||
52
+ Math.abs(lastPos.y - position.y) > canvasSize.height / 2) {
53
+ lastPos = position;
54
+ continue;
55
+ }
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);
47
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;
48
60
  context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
49
61
  context.strokeStyle = step.color;
50
62
  context.stroke();
63
+ context.globalAlpha = oldAlpha;
51
64
  lastPos = position;
52
65
  }
66
+ const { transformData } = data;
67
+ context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, currentPos.x, currentPos.y);
53
68
  }
54
69
  particleInit(container, particle) {
55
70
  particle.trail = [];
56
71
  const effectData = particle.effectData;
72
+ particle.trailFade = effectData?.fade ?? true;
57
73
  particle.trailLength = (0, engine_1.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
58
74
  particle.trailMaxWidth = effectData?.maxWidth
59
75
  ? (0, engine_1.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio