Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
}
this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
// get the time past the previous frame
const currentTime = new Date().getTime();
if (!this.lastTime) {
this.lastTime = currentTime;
}
const dt = (currentTime - this.lastTime) / 1000;
this.lastTime = currentTime;
if (this.shakeTime > 0) {
this.shakeTime -= dt;
const magnitude = (this.shakeTime / this.shakeTimeMax) * this.shakeIntensity;
const shakeX = randomInt(-magnitude, magnitude);
const shakeY = randomInt(-magnitude, magnitude);
(this.view.dom as HTMLElement).style.transform = `translate(${shakeX}px,${shakeY}px)`;
}
this.drawParticles();
requestAnimationFrame(this.loop);
};
this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
// get the time past the previous frame
const currentTime = new Date().getTime();
if (!this.lastTime) {
this.lastTime = currentTime;
}
const dt = (currentTime - this.lastTime) / 1000;
this.lastTime = currentTime;
if (this.shakeTime > 0) {
this.shakeTime -= dt;
const magnitude = (this.shakeTime / this.shakeTimeMax) * this.shakeIntensity;
const shakeX = randomInt(-magnitude, magnitude);
const shakeY = randomInt(-magnitude, magnitude);
(this.view.dom as HTMLElement).style.transform = `translate(${shakeX}px,${shakeY}px)`;
}
this.drawParticles();
requestAnimationFrame(this.loop);
};
public spawnParticles = throttle(100, () => {
const { selection } = this.view.state;
const coords = this.view.coordsAtPos(selection.$anchor.pos);
// Move the canvas
this.canvas.style.top = `${window.scrollY}px`;
this.canvas.style.left = `${window.scrollX}px`;
const node = document.elementFromPoint(coords.left - 5, coords.top + 5);
if (!node) {
return;
}
const numParticles = randomInt(this.particleRange.min, this.particleRange.max);
const textColor = getRGBComponents(node);
for (let ii = 0; ii < numParticles; ii++) {
const colorCode = this.colors[ii % this.colors.length];
const r = parseInt(colorCode.slice(1, 3), 16);
const g = parseInt(colorCode.slice(3, 5), 16);
const b = parseInt(colorCode.slice(5, 7), 16);
const color = [r, g, b];
this.particles[ii] = this.particleEffect.createParticle({
x: coords.left + 10,
y: coords.top - 10,
color,
textColor,
ctx: this.ctx,
canvas: this.canvas,
});
createParticle({ x, y, color }) {
return {
x: x + 20,
y: y - 10,
alpha: 1,
color,
size: randomInt(5, 12),
drag: 0.92,
vx: randomInt(-3, 5),
vy: randomInt(-3, 5),
wander: 0.15,
theta: (randomInt(0, 360) * Math.PI) / 180,
};
},
createParticle({ x, y, color }) {
return {
x: x + 20,
y: y - 10,
alpha: 1,
color,
size: randomInt(5, 12),
drag: 0.92,
vx: randomInt(-3, 5),
vy: randomInt(-3, 5),
wander: 0.15,
theta: (randomInt(0, 360) * Math.PI) / 180,
};
},
updateParticle({ particle, ctx }) {
particle.x += particle.vx;
particle.y += particle.vy;
particle.vx *= particle.drag ?? DEFAULT_SPAWNING_DRAG;
particle.vy *= particle.drag ?? DEFAULT_SPAWNING_DRAG;
particle.theta = (particle.theta ?? createSpawningTheta()) + randomInt(-0.5, 0.5);
particle.vx += Math.sin(particle.theta) * 0.1;
particle.vy += Math.cos(particle.theta) * 0.1;
particle.size *= 0.96;
ctx.fillStyle = `rgba(${particle.color[0]},${particle.color[1]},${particle.color[2]},${particle.alpha})`;
ctx.beginPath();
ctx.arc(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, 0, 2 * Math.PI);
ctx.fill();
},
};
createParticle({ x, y, color }) {
return {
x: x + 20,
y: y - 10,
alpha: 1,
color,
size: randomInt(5, 12),
drag: 0.92,
vx: randomInt(-3, 5),
vy: randomInt(-3, 5),
wander: 0.15,
theta: (randomInt(0, 360) * Math.PI) / 180,
};
},
createParticle({ x, y, color }) {
return {
x,
y: y + 10,
alpha: 1,
color,
size: randomInt(2, 8),
drag: DEFAULT_SPAWNING_DRAG,
vx: randomInt(-3, 3),
vy: randomInt(-3, 3),
wander: 0.15,
theta: createSpawningTheta(),
};
},
updateParticle({ particle, ctx }) {
createParticle({ x, y, color }) {
return {
x,
y: y + 10,
alpha: 1,
color,
size: randomInt(2, 8),
drag: DEFAULT_SPAWNING_DRAG,
vx: randomInt(-3, 3),
vy: randomInt(-3, 3),
wander: 0.15,
theta: createSpawningTheta(),
};
},
updateParticle({ particle, ctx }) {
createParticle({ x, y, color }) {
return {
x: x + 20,
y: y - 10,
alpha: 1,
color,
size: randomInt(5, 12),
drag: 0.92,
vx: randomInt(-3, 5),
vy: randomInt(-3, 5),
wander: 0.15,
theta: (randomInt(0, 360) * Math.PI) / 180,
};
},