@tsparticles/effect-trail 3.0.0-beta.4 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/browser/TrailDrawer.js +24 -8
- package/cjs/TrailDrawer.js +23 -7
- package/esm/TrailDrawer.js +24 -8
- package/package.json +2 -2
- package/report.html +3 -3
- package/tsparticles.effect.trail.js +26 -7
- package/tsparticles.effect.trail.min.js +1 -1
- package/tsparticles.effect.trail.min.js.LICENSE.txt +1 -1
- package/types/TrailDrawer.d.ts +1 -0
- package/umd/TrailDrawer.js +23 -7
@@ -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
|
7
|
+
* v3.0.0
|
8
8
|
*/
|
9
9
|
(function webpackUniversalModuleDefinition(root, factory) {
|
10
10
|
if(typeof exports === 'object' && typeof module === 'object')
|
@@ -105,6 +105,7 @@ class TrailDrawer {
|
|
105
105
|
radius,
|
106
106
|
particle
|
107
107
|
} = data,
|
108
|
+
diameter = radius * 2,
|
108
109
|
pxRatio = particle.container.retina.pixelRatio,
|
109
110
|
currentPos = particle.getPosition();
|
110
111
|
if (!particle.trail || !particle.trailLength) {
|
@@ -121,34 +122,52 @@ class TrailDrawer {
|
|
121
122
|
if (particle.trail.length < 2) {
|
122
123
|
return;
|
123
124
|
}
|
124
|
-
|
125
|
+
while (particle.trail.length > pathLength) {
|
125
126
|
particle.trail.shift();
|
126
127
|
}
|
127
128
|
const trailLength = Math.min(particle.trail.length, pathLength),
|
128
129
|
offsetPos = {
|
129
130
|
x: currentPos.x,
|
130
131
|
y: currentPos.y
|
132
|
+
},
|
133
|
+
canvasSize = {
|
134
|
+
width: particle.container.canvas.size.width + diameter,
|
135
|
+
height: particle.container.canvas.size.height + diameter
|
131
136
|
};
|
132
137
|
let lastPos = particle.trail[trailLength - 1].position;
|
138
|
+
context.setTransform(1, 0, 0, 1, currentPos.x, currentPos.y);
|
133
139
|
for (let i = trailLength; i > 0; i--) {
|
134
140
|
const step = particle.trail[i - 1],
|
135
141
|
position = step.position;
|
136
|
-
if ((0,engine_root_window_.getDistance)(lastPos, position) > radius * 2) {
|
137
|
-
continue;
|
138
|
-
}
|
139
142
|
context.beginPath();
|
140
143
|
context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
|
141
|
-
|
142
|
-
|
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);
|
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;
|
143
156
|
context.lineWidth = particle.trailMaxWidth ? Math.min(width, particle.trailMaxWidth) : width;
|
144
157
|
context.strokeStyle = step.color;
|
145
158
|
context.stroke();
|
159
|
+
context.globalAlpha = oldAlpha;
|
146
160
|
lastPos = position;
|
147
161
|
}
|
162
|
+
const {
|
163
|
+
transformData
|
164
|
+
} = data;
|
165
|
+
context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, currentPos.x, currentPos.y);
|
148
166
|
}
|
149
167
|
particleInit(container, particle) {
|
150
168
|
particle.trail = [];
|
151
169
|
const effectData = particle.effectData;
|
170
|
+
particle.trailFade = effectData?.fade ?? true;
|
152
171
|
particle.trailLength = (0,engine_root_window_.getRangeValue)(effectData?.length ?? 10) * container.retina.pixelRatio;
|
153
172
|
particle.trailMaxWidth = effectData?.maxWidth ? (0,engine_root_window_.getRangeValue)(effectData.maxWidth) * container.retina.pixelRatio : undefined;
|
154
173
|
particle.trailMinWidth = effectData?.minWidth ? (0,engine_root_window_.getRangeValue)(effectData.minWidth) * container.retina.pixelRatio : undefined;
|
@@ -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
|
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})()));
|
@@ -1 +1 @@
|
|
1
|
-
/*! tsParticles Trail Shape v3.0.0
|
1
|
+
/*! tsParticles Trail Shape v3.0.0 by Matteo Bruni */
|
package/types/TrailDrawer.d.ts
CHANGED
package/umd/TrailDrawer.js
CHANGED
@@ -13,7 +13,7 @@
|
|
13
13
|
const engine_1 = require("@tsparticles/engine");
|
14
14
|
class TrailDrawer {
|
15
15
|
draw(data) {
|
16
|
-
const { context, radius, particle } = data, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
|
16
|
+
const { context, radius, particle } = data, diameter = radius * 2, pxRatio = particle.container.retina.pixelRatio, currentPos = particle.getPosition();
|
17
17
|
if (!particle.trail || !particle.trailLength) {
|
18
18
|
return;
|
19
19
|
}
|
@@ -28,32 +28,48 @@
|
|
28
28
|
if (particle.trail.length < 2) {
|
29
29
|
return;
|
30
30
|
}
|
31
|
-
|
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) > radius * 2) {
|
42
|
-
continue;
|
43
|
-
}
|
44
45
|
context.beginPath();
|
45
46
|
context.moveTo(lastPos.x - offsetPos.x, lastPos.y - offsetPos.y);
|
46
|
-
|
47
|
-
|
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);
|
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
|