initVariables();

p = [];
function funcionGo(ctx, width, height) {
  if (lInit) {
    jsreinitProcedure();
    jsinitTimer(1);
    txClocalUp = "SIGA EL VIDEO";
    txClocalDown = "sepárese de la cámara, la cara debe activarse";
    nPuntos = 0;
  }
  displayPose(ctx, width, height);
}

function displayPose(ctx, width, height) {
  ctx.font = "40px Arial";
  ctx.lineWidth = 5;

  drawRightArm(ctx, width, height);
  // Dibujar partículas dependiendo del estado
  /*switch (nSwitch) {
    case 0:
      drawRightArm(ctx, width, height);
      break;
    case 1:
      drawLeftArm(ctx, width, height);
      break;
  }*/
  ctx.fillStyle = 'white';
  ctx.strokeStyle = 'white';
  const points = [
    { x: x1, y: y1 },
    { x: x2, y: y2 },
    { x: x3, y: y3 },
    { x: x4, y: y4 },
    { x: x5, y: y5 },
    { x: x6, y: y6 },
    { x: x7, y: y7 },
    { x: x8, y: y8 },
    { x: x9, y: y9 },
    { x: x10, y: y10 }
  ];

  for (const point of points) {
    ctx.beginPath(); // Comienza un nuevo camino para cada punto
    ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI); // Dibuja el punto
    ctx.fill(); // Rellena el círculo
    ctx.closePath(); // Cierra el camino
  }
  // Dibujar partículas de fuego
  drawFire(ctx);
}

function drawRightArm(ctx, width, height) {

  // Actualizar puntos clave
  let pBoca = { x: (x9 + x10) / 2, y: (y9 + y10) / 2 };
  let pCadera23 = { x: x23, y: y23 };
  let pMano20 = { x: x20, y: y20 };
  let pCadera24 = { x: x24, y: y24 };
  let pMano19 = { x: x19, y: y19 };

  let rshoulder = [x12, y12]
  let relbow = [x14, y14]
  let rwrist = [x16, y16]
  let anglerSh = calculate_angle(rshoulder, relbow, rwrist)
  ctx.fillStyle = "white"; // Define el color del texto
  ctx.fillText(parseInt(anglerSh), x14, y14); // Dibuja el texto en las coordenadas x12, y12

  let rhip = [x24, y24]
  let angle = calculate_angle(rhip, rshoulder, relbow)

  ctx.fillStyle = "white"; // Define el color del texto
  ctx.fillText(parseInt(angle), x12, y12); // Dibuja el texto en las coordenadas x12, y12

  ctx.lineWidth = 20;

  ctx.beginPath();
  ctx.moveTo(pCadera24.x, pCadera24.y);
  ctx.bezierCurveTo(pCadera23.x, pCadera23.y, x16, y16, x20, y20);
  ctx.bezierCurveTo(x16, y16, pCadera23.x, pCadera23.y, pCadera24.x, pCadera24.y);
  ctx.closePath();
  ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
  ctx.fill();
  ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(pCadera24.x, pCadera24.y, 20, 0, 2 * Math.PI);
  ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; // Color de relleno
  ctx.fill(); // Rellenar la elipse
  ctx.stroke(); //

  ctx.beginPath();
  ctx.arc(width - 120, 60, 50, 0, 2 * Math.PI);
  ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; // Color de relleno
  ctx.fill(); // Rellenar la elipse
  ctx.stroke(); //

  ctx.beginPath();
  ctx.arc(pMano20.x, pMano20.y, 35, 0, 2 * Math.PI);
  ctx.fillStyle = "rgba(128, 191, 255, 0.5)"; // Color de relleno
  ctx.strokeStyle = "rgba(128, 191, 255, 0.5)";
  ctx.fill(); // Rellenar la elipse
  ctx.stroke(); //

  // Dibujar brazo derecho (ejemplo simplificado)

  ctx.fillStyle = "white"; // Define el color del texto
  ctx.fillText(parseInt(anglerSh), x14, y14); // Dibuja el texto en las coordenadas x12, y12
  ctx.fillStyle = "white"; // Define el color del texto
  ctx.fillText(parseInt(angle), x12, y12); // Dibuja el texto en las coordenadas x12, y12

  ctx.beginPath();
  ctx.moveTo(x12, y12);
  ctx.bezierCurveTo(x12, y12, x14, y14, x16, y16);
  ctx.bezierCurveTo(x18, y18, x20, y20, x22, y22);
  ctx.bezierCurveTo(x16, y16, x14, y14, x12, y12);
  ctx.closePath();
  ctx.fillStyle = "rgba(255, 0, 0, 0.75)";
  ctx.fill();
  ctx.strokeStyle = "rgba(128, 191, 255, 0.5)";
  ctx.stroke();

  /*ctx.beginPath();
  ctx.moveTo(x12, y12);
  ctx.lineTo(x14, y14);
  ctx.lineTo(x16, y16);
  ctx.strokeStyle = "rgba(255, 0, 0, 0.75)";
  ctx.lineWidth = 4;
  ctx.stroke();*/

  // Dibujar partículas
  if (pMano20.x > width / 2 && pMano20.x < width && pMano20.y > 0 && pMano20.y < pBoca.y) {
    for (let i = 0; i < 5; i++) {
      p.push(new Particle(ctx, pMano20.x, pMano20.y));
      nPuntos++;
    }
  }
}

function drawLeftArm(ctx, width, height) {
  // Actualizar puntos clave
  let pBoca = { x: (x9 + x10) / 2, y: (y9 + y10) / 2 };
  let pCadera23 = { x: x23, y: y23 };
  let pMano20 = { x: x20, y: y20 };
  let pCadera24 = { x: x24, y: y24 };
  let pMano19 = { x: x19, y: y19 };

  let lshoulder = [x11, y11]
  let lelbow = [x13, y13]
  let lwrist = [x15, y15]

  let anglelSh = calculate_angle(lshoulder, lelbow, lwrist)
  ctx.fillStyle = "white"; // Define el color del texto
  ctx.fillText(parseInt(anglelSh), x13, y13); // Dibuja el texto en las coordenadas x12, y12

  let lhip = [x23, y23]
  let angle = calculate_angle(lhip, lshoulder, lelbow)
  ctx.fillStyle = "white"; // Define el color del texto
  ctx.fillText(parseInt(angle), x11, y11); // Dibuja el texto en las coordenadas x12, y12

  ctx.lineWidth = 20;

  ctx.beginPath();
  ctx.moveTo(pCadera23.x, pCadera23.y);
  ctx.bezierCurveTo(pCadera24.x, pCadera24.y, x15, y15, x19, y19);
  ctx.bezierCurveTo(x15, y15, pCadera24.x, pCadera24.y, pCadera23.x, pCadera23.y);
  ctx.closePath();
  ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
  ctx.fill();
  ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(pCadera23.x, pCadera23.y, 20, 0, 2 * Math.PI);
  ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; // Color de relleno
  ctx.fill(); // Rellenar la elipse
  ctx.stroke(); //

  ctx.beginPath();
  ctx.arc(120, 60, 50, 0, 2 * Math.PI);
  ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; // Color de relleno
  ctx.fill(); // Rellenar la elipse
  ctx.stroke(); //

  ctx.beginPath();
  ctx.arc(pMano19.x, pMano19.y, 35, 0, 2 * Math.PI);
  ctx.fillStyle = "rgba(128, 191, 255, 0.5)"; // Color de relleno
  ctx.strokeStyle = "rgba(128, 191, 255, 0.5)";
  ctx.fill(); // Rellenar la elipse
  ctx.stroke(); //

  ctx.fillStyle = "white"; // Define el color del texto
  ctx.fillText(parseInt(anglelSh), x13, y13); // Dibuja el texto en las coordenadas x12, y12
  ctx.fillStyle = "white"; // Define el color del texto
  ctx.fillText(parseInt(angle), x11, y11); // Dibuja el texto en las coordenadas x12, y12

  ctx.beginPath();
  ctx.moveTo(x11, y11);
  ctx.bezierCurveTo(x11, y11, x13, y13, x15, y15);
  ctx.bezierCurveTo(x17, y17, x19, y19, x21, y21);
  ctx.bezierCurveTo(x15, y15, x13, y13, x11, y11);
  ctx.closePath();
  ctx.fillStyle = "rgba(255, 0, 0, 0.75)";
  ctx.fill();
  ctx.strokeStyle = "rgba(128, 191, 255, 0.5)";
  ctx.stroke();

  // Dibujar brazo izquierdo (ejemplo simplificado)
  /*ctx.beginPath();
  ctx.moveTo(x11, y11);
  ctx.lineTo(x13, y13);
  ctx.lineTo(x15, y15);
  ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
  ctx.lineWidth = 4;
  ctx.stroke();*/

  // Dibujar partículas
  if (pMano19.x < width / 2 && pMano19.x > 0 && pMano19.y > 0 && pMano19.y < pBoca.y) {
    for (let i = 0; i < 5; i++) {
      p.push(new Particle(ctx, pMano19.x, pMano19.y));
      nPuntos++;
    }
  }
}

function drawFire(ctx) {
  for (let i = 0; i < p.length; i++) {
    p[i].show(ctx);
    p[i].move();
  }
}

