initVariables();
lDisplayFingers = true;
lHandmano = true;
lDelayLocal = true;
FingersRightOn(true, true, true, true, true, true, true, false, false);
FingersLeftOn(true, true, true, true, true, true, true, false, false);

function detectCollision(sphere, x, y) {
  const dx = sphere.x - x;
  const dy = sphere.y - y;
  const distance = Math.sqrt(dx * dx + dy * dy);
  return distance < sphere.radius * 2;
}

//Animación
function animateUp() {
  // Actualizar y dibujar cada esfera
  spheresUp.forEach((sphere) => {
    sphere.update(gravity, damping);
    sphere.draw();
  });
}


function collisionEsfera(spheresUp, fingerX, fingerY) {
  let n = 0;
  spheresUp.forEach((sphere) => {
    n++;
    if (detectCollision(sphere, fingerX, fingerY)) {
      // Reaccionar a la colisión
      sphere.vx += (sphere.x - fingerX) * 0.4 * n/100;
      sphere.vy += (sphere.y - fingerY) * 0.4 * n/100;
    }
  });
}

function funcionGo(ctx, width, height) {
  if (lInit) {
    jsreinitProcedure();
    jsinitTimer(1);
    txClocalUp = "MOVER ESFERAS/PALMAS ABAJO";
    txClocalDown = "empuje las esferas hacia abajo";
    gravity = 0.05;
    damping = 0.1;
    radius = 40;
    spheresUp = [];
    for (let i = 0; i < 50; i++) {
      const x = Math.random() * (width - 2 * radius) + radius;
      const y = (Math.random() * radius * 2) + radius;
      const color = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 0.5)`;
      spheresUp.push(new SphereUp(x, y, ctx, radius, width, height, color));
    }
  }

  animateUp();

  let fingerX = (pCfbr0.x + pCfbr4.x + pCfbr8.x + pCfbr12.x + pCfbr16.x + pCfbr20.x) / 6
  let fingerY = (pCfbr0.y + pCfbr4.y + pCfbr8.y + pCfbr12.y + pCfbr16.y + pCfbr20.y) / 6
  /*ctx.beginPath();
  ctx.arc(fingerX, fingerY, radius * 1, 0, Math.PI * 2);
  ctx.fillStyle = `rgba(${Math.floor(256)}, ${Math.floor(256)}, ${Math.floor(256)}, 0.5)`;
  ctx.fill();
  ctx.closePath();*/
  collisionEsfera(spheresUp, fingerX, fingerY)

  fingerX = (pCfbl0.x + pCfbl4.x + pCfbl8.x + pCfbl12.x + pCfbl16.x + pCfbl20.x) / 6
  fingerY = (pCfbl0.y + pCfbl4.y + pCfbl8.y + pCfbl12.y + pCfbl16.y + pCfbl20.y) / 6
  /*ctx.beginPath();
  ctx.arc(fingerX, fingerY, radius * 1, 0, Math.PI * 2);
  ctx.fillStyle = `rgba(${Math.floor(256)}, ${Math.floor(256)}, ${Math.floor(256)}, 0.5)`;
  ctx.fill();
  ctx.closePath();*/
  collisionEsfera(spheresUp, fingerX, fingerY)

  const pointsr = [pCfbr0, pCfbr4, pCfbr8, pCfbr12, pCfbr16, pCfbr20];
  // Inicializar todas las propiedades `x` y `y` a 0
  pointsr.forEach(point => {
    point.x = -wVideo;
    point.y = -hVideo;
  });

  const pointsl = [pCfbl0, pCfbl4, pCfbl8, pCfbl12, pCfbl16, pCfbl20];
  // Inicializar todas las propiedades `x` y `y` a 0
  pointsl.forEach(point => {
    point.x = -wVideo;
    point.y = -hVideo;
  });

}

