javascriptApps/particles_effect.html at main · develectro/javascriptApps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Particle Trail</title>
<style>
  body { margin: 0; overflow: hidden; background-color: #000; }
  canvas { display: block; }
</style>
</head>
<body>
<canvas id="particleCanvas"></canvas>
<script>
  const canvas = document.getElementById('particleCanvas');
  const ctx = canvas.getContext('2d');

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  let particlesArray = [];
  const mouse = {
    x: null,
    y: null,
    radius: 50 // Area around mouse to emit particles
  };

  const isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);

  if (isTouchDevice) {
    // For touch devices, particles only emit on active touch
    window.addEventListener('touchstart', function(event) {
      if (event.touches.length > 0) {
        mouse.x = event.touches[0].clientX;
        mouse.y = event.touches[0].clientY;
      }
    }, { passive: true });

    window.addEventListener('touchmove', function(event) {
      if (event.touches.length > 0) {
        mouse.x = event.touches[0].clientX;
        mouse.y = event.touches[0].clientY;
      }
      // To prevent page scrolling while drawing, you might consider:
      // if (mouse.x !== null && mouse.y !== null) event.preventDefault();
    }, { passive: true }); // Set to false if using event.preventDefault()

    window.addEventListener('touchend', function(event) {
      // Clear mouse coordinates to stop particle emission when touch ends
      mouse.x = null;
      mouse.y = null;
    });
  } else {
    // For non-touch devices, particles follow the mouse
    window.addEventListener('mousemove', function(event) {
      mouse.x = event.clientX;
      mouse.y = event.clientY;
    });

    // Optional: Stop particles if the mouse leaves the window
    // window.addEventListener('mouseout', function() {
    //   mouse.x = null;
    //   mouse.y = null;
    // });
  }

  class Particle {
    constructor(x, y) {
      this.x = x;
      this.y = y;
      this.size = Math.random() * 5 + 1; // Particle size
      this.speedX = Math.random() * 3 - 1.5; // Horizontal speed
      this.speedY = Math.random() * 3 - 1.5; // Vertical speed
      this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // Random color
      this.life = 100; // Particle lifespan
    }

    update() {
      this.x += this.speedX;
      this.y += this.speedY;
      this.life -= 1.5; // Decrease life
      if (this.size > 0.2) this.size -= 0.1; // Shrink particle
    }

    draw() {
      ctx.fillStyle = this.color;
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      ctx.fill();
    }
  }

  function handleParticles() {
    if (mouse.x !== null && mouse.y !== null) {
        for (let i = 0; i < 5; i++) { // Emit 5 particles per frame
            particlesArray.push(new Particle(mouse.x, mouse.y));
        }
    }

    for (let i = 0; i < particlesArray.length; i++) {
      particlesArray[i].update();
      particlesArray[i].draw();

      if (particlesArray[i].life <= 0 || particlesArray[i].size <= 0.2) {
        particlesArray.splice(i, 1);
        i--; // Adjust index after removal
      }
    }
  }

  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Optional: Add a subtle background effect like a fading trail
    // ctx.fillStyle = 'rgba(0,0,0,0.05)';
    // ctx.fillRect(0,0,canvas.width, canvas.height);
    handleParticles();
    requestAnimationFrame(animate);
  }

  animate();

  window.addEventListener('resize', function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  });
</script>
</body>
</html>