<canvas id="neuralCanvas"></canvas>

html, body{ margin:0; overflow: hidden; background-color: #222;position: relative;height: 100%;}
      canvas{display:block;}

const canvas = document.getElementById('neuralCanvas'),
            ctx = canvas.getContext('2d'),
            circles = [];
      let mouseX = 0, mouseY = 0, balls = 75;

function init(){
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        for (let i = 0; i< balls; i++){
          circles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            radius: 5,
            color: '#ffffff',
            velocity: {
              x: (Math.random() - 0.5) * 1.2,
              y: (Math.random() - 0.5) * 1.2
            }
          });
        }

        canvas.addEventListener('mousemove', (ev)=>{
          mouseX = ev.clientX;
          mouseY = ev.clientY;
        });

        animate();
      }

function animate(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        circles.forEach(circle =>{
          circle.x += circle.velocity.x;
          circle.y += circle.velocity.y;

          //rebotar en las paredes
          if(circle.x - circle.radius < 0 || circle.x + circle.radius > canvas.width){
            circle.velocity.x *= -1;
          }
          if(circle.y - circle.radius < 0 || circle.y + circle.radius > canvas.height){
            circle.velocity.y *= -1;
          }

          //mouse
          const dx = mouseX - circle.x;
          const dy = mouseY - circle.y;
          const distToCursor = Math.sqrt(dx * dx + dy * dy);
          const speed = 0.1;
          circle.x += (dx /distToCursor) * speed;
          circle.y += (dy / distToCursor) * speed;


          drawCircle(circle.x, circle.y, circle.radius, circle.color);
        });

        //conectar los circulos
        connectCircles();
        requestAnimationFrame(animate);
      }

//dibujar los circulos
      function drawCircle(x, y, radius, color){
        ctx.beginPath();
        ctx.arc(x,y,radius, 0, Math.PI * 2);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.closePath();
      }

//conectar los circulos
      function connectCircles(){
        for(let i = 0; i < circles.length; i++){
          for(let j = i+1; j < circles.length; j++){
            const distance = Math.sqrt(
              Math.pow(circles[i].x - circles[j].x, 2) + Math.pow(circles[i].y - circles[j].y, 2)
            );

            if(distance < 100){
              ctx.beginPath();
              ctx.moveTo(circles[i].x, circles[i].y);
              ctx.lineTo(circles[j].x, circles[j].y);
              ctx.strokeStyle = '#ffffff';
              ctx.lineWidth = 0.5;
              ctx.stroke();
              ctx.closePath();
            }
          }
        }
      }

window.addEventListener('resize', () =>{
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      });

      init();