graph_visualizer/animated_using_html_js.html at main · codewithx4/graph_visualizer · 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
<!DOCTYPE html>
<html>
<head>
  <title>Cursor-based Nodes Animation</title>
  <style>
    /* Set body and HTML to take full viewport */
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; /* Prevent scrolling */
    }

    /* Style the canvas to cover the entire viewport */
    canvas {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <!-- Canvas element where the graph will be animated -->
  <canvas id="graphCanvas"></canvas>

  <script>
    // Get the canvas element and its 2D rendering context
    const canvas = document.getElementById('graphCanvas');
    const ctx = canvas.getContext('2d');

    // Set canvas width and height to match the window dimensions
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Sample nodes data with x and y coordinates
    const initialNodes = [
      { x: 100, y: 100 },
      { x: 200, y: 200 },
      { x: 300, y: 150 },
      { x: 400, y: 300 }
    ];

    let nodes = initialNodes.slice(); // Copy the initial nodes for manipulation

    // Event listener to track cursor movement within the canvas
    canvas.addEventListener('mousemove', (event) => {
      // Update node positions based on cursor movement
      nodes = nodes.map(node => ({
        x: node.x + (event.offsetX - node.x) * 0.03, // Adjust the node's x-coordinate based on cursor movement
        y: node.y + (event.offsetY - node.y) * 0.03  // Adjust the node's y-coordinate based on cursor movement
      }));
    });

    // Function to reset nodes' positions when the cursor is not active
    function resetNodes() {
      nodes.forEach((node, index) => {
        // Ease the nodes' positions back to their initial positions
        nodes[index].x += (initialNodes[index].x - nodes[index].x) * 0.1;
        nodes[index].y += (initialNodes[index].y - nodes[index].y) * 0.1;
      });
    }

    // Function to animate the nodes based on cursor movement and reset when cursor is non-active
    function animateNodes() {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

      resetNodes(); // Reset the nodes' positions when the cursor is not active

      // Draw connections between nodes
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 2;
      ctx.beginPath();
      for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
          ctx.moveTo(nodes[i].x, nodes[i].y);
          ctx.lineTo(nodes[j].x, nodes[j].y);
        }
      }
      ctx.stroke();

      // Draw nodes (circles representing each node)
      ctx.fillStyle = 'blue';
      ctx.lineWidth = 1;
      for (let i = 0; i < nodes.length; i++) {
        ctx.beginPath();
        ctx.arc(nodes[i].x, nodes[i].y, 20, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();
      }

      // Repeat the animation by using requestAnimationFrame
      requestAnimationFrame(animateNodes);
    }

    // Start the animation when the page loads
    animateNodes();
  </script>
</body>
</html>