initVariables();
lDisplayFingers = true;
historyP = []; 
lDelayLocal = true;

FingersRightOn(true, true, true, true, true, true, true, false, false);
FingersLeftOn(true, true, true, true, true, true, true, false, false);

function funcionGo(ctx) {
  if (lInit) {
    //lHandfingers = true;
    jsreinitProcedure(); // Si existe, debe definirse
    jsinitTimer(1); // Si existe, debe definirse
    txClocalUp = "DIBUJAR/PULGAR E INDICE";
    txClocalDown = "con el primer y segundo dedos unidos";
    lDelayLocal = true;

    FingersRightOn(true, true, true, true, true, true, true, false, false);
    FingersLeftOn(true, true, true, true, true, true, true, false, false);

    if (!lVideo) lHandline = true;
    else lHandline = false;
  }
  //ctx.save();
  let lcolor = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1)`;

  let pxr = (pC1.x + pC2.x) / 2;
  let pyr = (pC1.y + pC2.y) / 2;

  let pxl = (pC6.x + pC7.x) / 2;
  let pyl = (pC6.y + pC7.y) / 2;

  //ctx.restore();
  // Dibujar líneas basadas en la distancia entre puntos
  let dwr12 = Math.hypot(pC2.x - pC1.x, pC2.y - pC1.y);

  let n = numAleatEntre(20, 50);

  if (dwr12 <= 100) {
    paintLines(pxr, pyr, lcolor, ctx, n + 1);
    /*paintLines(pxr, pyr, lcolor, ctx, n + 2);
    lcolor = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1)`;
    paintLines(pxr, pyr, lcolor, ctx, n + 3);
    paintLines(pxr, pyr, lcolor, ctx, n + 4);
    lcolor = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1)`;
    paintLines(pxr, pyr, lcolor, ctx, n + 5);
    paintLines(pxr, pyr, lcolor, ctx, n + 6);
    lcolor = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1)`;
    paintLines(pxr, pyr, lcolor, ctx, n + 7);
    paintLines(pxr, pyr, lcolor, ctx, n + 8);*/
  } else paintLines(0, 0, lcolor, ctx, 0);

  //lcolor = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1)`;
  let dwl12 = Math.hypot(pC7.x - pC6.x, pC7.y - pC6.y);
  if (dwl12 <= 100) {
    paintLines(pxl, pyl, lcolor, ctx, n + 1);
    /*paintLines(pxl, pyl, lcolor, ctx, n + 2);
    lcolor = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1)`;
    paintLines(pxl, pyl, lcolor, ctx, n + 3);
    paintLines(pxl, pyl, lcolor, ctx, n + 4);
    lcolor = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1)`;
    paintLines(pxl, pyl, lcolor, ctx, n + 5);
    paintLines(pxl, pyl, lcolor, ctx, n + 6);
    lcolor = `rgba(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, 1)`;
    paintLines(pxl, pyl, lcolor, ctx, n + 7);
    paintLines(pxl, pyl, lcolor, ctx, n + 8);*/
  } else paintLines(0, 0, lcolor, ctx, 0);
}

// Dibujar líneas en el canvas
function paintLines(px, py, lcolor, ctx, n) {
  ctx.strokeStyle = lcolor;
  ctx.lineWidth = 1;

  // Generar valores aleatorios para las variaciones de la línea
  let numAleatx = numAleatEntre(-1, 1);
  let numAleaty = numAleatEntre(-1, 1);

  // Calcular el punto final de la línea
  let finalX = px + numAleatx * n;
  let finalY = py + numAleaty * n;

  // Dibujar la línea en la posición actual
  ctx.beginPath();
  ctx.moveTo(px, py);
  ctx.lineTo(finalX, finalY);
  ctx.stroke();

  /*ctx.arc(px, py, 2, 0, 2 * Math.PI); // 2 es el radio del punto
  ctx.fillStyle = lcolor;
  ctx.fill();*/

  // Guardar los datos de la línea en el historial
  historyP.push({ startX: px, startY: py, endX: finalX, endY: finalY, color: lcolor });

  // Dibujar líneas basadas en el historial
  for (let p of historyP) {
    ctx.strokeStyle = p.color;
    ctx.beginPath();
    ctx.moveTo(p.startX, p.startY);
    ctx.lineTo(p.endX, p.endY);
    ctx.stroke();

    /*ctx.arc(p.startX, p.startY, 2, 0, 2 * Math.PI); // 2 es el radio del punto
    ctx.fillStyle = p.color;
    ctx.fill();*/
  }
}
