interactive-dot-grid/index.html at main · sathishk-dev/interactive-dot-grid · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #2e2e2e; }
  #dotCanvas {
    display: block;
    width: 100vw;
    height: 100vh;
    cursor: none;
  }
</style>
</head>
<body>
<canvas id="dotCanvas"></canvas>
<script>
  const canvas = document.getElementById('dotCanvas');
  const ctx = canvas.getContext('2d');

  const DOT_SPACING = 22;
  const DOT_MIN = 1.5;
  const DOT_MAX = 5.5;
  const RADIUS_EFFECT = 220;
  const BASE_ALPHA = 0.05;
  const MAX_ALPHA = 0.85;

  let mouse = { x: -9999, y: -9999 };
  let dots = [];
  let dpr = window.devicePixelRatio || 1;

  function resize() {
    const w = window.innerWidth;
    const h = window.innerHeight;
    canvas.width = w * dpr;
    canvas.height = h * dpr;
    canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';
    ctx.scale(dpr, dpr);

    const cols = Math.floor(w / DOT_SPACING);
    const rows = Math.floor(h / DOT_SPACING);
    const offX = (w - (cols - 1) * DOT_SPACING) / 2;
    const offY = (h - (rows - 1) * DOT_SPACING) / 2;

    dots = [];
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        dots.push({ x: offX + c * DOT_SPACING, y: offY + r * DOT_SPACING, size: DOT_MIN, alpha: 0 });
      }
    }
  }

  function lerp(a, b, t) { return a + (b - a) * t; }

  function animate() {
    const w = canvas.width / dpr;
    const h = canvas.height / dpr;
    ctx.clearRect(0, 0, w, h);

    for (const d of dots) {
      const dist = Math.hypot(d.x - mouse.x, d.y - mouse.y);
      const influence = Math.max(0, 1 - dist / RADIUS_EFFECT) ** 2;

      d.size  = lerp(d.size,  DOT_MIN + (DOT_MAX - DOT_MIN) * influence, 0.12);
      d.alpha = lerp(d.alpha, BASE_ALPHA + (MAX_ALPHA - BASE_ALPHA) * influence, 0.12);

      ctx.beginPath();
      ctx.arc(d.x, d.y, d.size, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(180,178,169,${d.alpha})`;
      ctx.fill();
    }
    requestAnimationFrame(animate);
  }

  window.addEventListener('mousemove', (e) => { mouse.x = e.clientX; mouse.y = e.clientY; });
  window.addEventListener('mouseleave', () => { mouse.x = -9999; mouse.y = -9999; });
  window.addEventListener('resize', resize);

  resize();
  animate();
</script>
</body>
</html>