initVariables();
xp = 0;
yp = 0;
rp = 50;
numSpheres = 12; // Número de esferas
radius; // Radio del reloj
centerX = 0; // Centro del lienzo
centerY = 0;
nCoefi = 2.80;
////////////////////////////////////////////////////////
function funcionGo(ctx, width, height) {
  if (lInit) {
    jsreinitProcedure();
    jsinitTimer(1);
    posSpheres = [];
    xp = random(wsIni + rp / 2, wsIni + wVideo - rp / 2);
    yp = random(hsIni + rp / 2, hsIni + hVideo - rp / 2);
    ellipse(xp, yp, rp * 2, rp * 2);
    txClocalUp = "Apuntar a cada esfera con mano.";
    txClocalDown = "";
    centerX = windowWidth / 2;
    centerY = windowHeight / 2; // Centro del lienzo
    radius = windowHeight;
    if (deviceAndroid) {
      _handleMotion();
      if (deviceOrientation == "portrait") {
        if (lChangeCam) radius = windowHeight - 120;
        nCoefi = 3.10;
      } else {
        if (deviceOrientation == "landscape") {
          nCoefi = 1.90;
        }
      }
    }
    // Generar las posiciones de las esferas
    for (let i = 0; i < numSpheres; i++) {
      let angle = map(i, 0, numSpheres, 0, TWO_PI); // Ángulo en radianes
      let x = centerX + (radius / nCoefi) * cos(angle); // Coordenada x
      let y = centerY + (radius / nCoefi) * sin(angle); // Coordenada y
      let value = false;
      addPoint(x, y, value);
    }
  }
  //displaymodulo(0);
  strokeWeight(1);
  noStroke()
  noFill();
  ellipse(centerX, centerY, radius);
  for (let i = 0; i < numSpheres; i++) {
    if (posSpheres[i].value) fill(0, 0, 255, 128);
    else fill(128, 128, 128, 128);
    ellipse(posSpheres[i].x, posSpheres[i].y, rp * 2, rp * 2);
    fill(0);
    textAlign(CENTER, CENTER);
    textSize(28);
    fill(255);
    text(toRoman(i), posSpheres[i].x, posSpheres[i].y);
    textSize(12);
  }

  fill(0, 0, 255, 128);
  ellipse(pCW1.x, pCW1.y, rp * 2, rp * 2);
  ellipse(pCW2.x, pCW2.y, rp * 2, rp * 2);
  for (let i = 0; i < numSpheres; i++) {
    if (dist(posSpheres[i].x, posSpheres[i].y, pCW1.x, pCW1.y) < rp * 2 || dist(posSpheres[i].x, posSpheres[i].y, pCW2.x, pCW2.y) < rp * 2) {
      posSpheres[i].value = true;
    }
  }
  pCW1.x = -width;
  pCW1.y = -width;
  pCW2.x = -width;
  pCW2.x = -width;
}
///////////////////////////
function addPoint(x, y, value) {
  let point = { x: x, y: y, value: value };
  posSpheres.push(point);
}
function toRoman(num) {
  //const romanNumerals = ["IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "I", "II", "III"];
  const romanNumerals = ["D", "E", "F", "G", "H", "I", "J", "K", "L", "A", "B", "C"];
  return romanNumerals[num % 12]; // Devolver el número romano correspondiente
}

///////////////////////////////////////

let canvas, ctx;
let posSpheres = []; // Array para las posiciones de las esferas
let numSpheres = 12; // Número de esferas
//let radius; // Radio del círculo donde se distribuyen las esferas
let centerX, centerY; // Coordenadas del centro del lienzo
let rp = 50; // Radio de las esferas
let nCoefi = 2.8; // Coeficiente para el tamaño del radio del círculo
let pCW1 = { x: -100, y: -100 }; // Posición de la primera mano
let pCW2 = { x: -100, y: -100 }; // Posición de la segunda mano

// Inicializar el lienzo
function setup() {
  canvas = document.createElement('canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  document.body.appendChild(canvas);
  ctx = canvas.getContext('2d');

  centerX = canvas.width / 2; // Centro horizontal
  centerY = canvas.height / 2; // Centro vertical
  radius = canvas.height; // Radio basado en el alto del lienzo

  // Generar las posiciones iniciales de las esferas
  for (let i = 0; i < numSpheres; i++) {
    let angle = (i / numSpheres) * 2 * Math.PI; // Ángulo en radianes
    let x = centerX + (radius / nCoefi) * Math.cos(angle); // Coordenada x
    let y = centerY + (radius / nCoefi) * Math.sin(angle); // Coordenada y
    addPoint(x, y, false);
  }

  // Iniciar el bucle de dibujo
  requestAnimationFrame(draw);
}

// Agregar una esfera al array
function addPoint(x, y, value) {
  let point = { x: x, y: y, value: value };
  posSpheres.push(point);
}

// Dibujar el lienzo
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpiar el lienzo

  // Dibujar el círculo principal
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius / nCoefi, 0, Math.PI * 2);
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;
  ctx.stroke();
  ctx.closePath();

  // Dibujar las esferas
  for (let i = 0; i < posSpheres.length; i++) {
    const sphere = posSpheres[i];

    // Cambiar color si está "tocada"
    if (sphere.value) {
      ctx.fillStyle = 'rgba(0, 0, 255, 0.5)'; // Azul semitransparente
    } else {
      ctx.fillStyle = 'rgba(128, 128, 128, 0.5)'; // Gris semitransparente
    }

    // Dibujar la esfera
    ctx.beginPath();
    ctx.arc(sphere.x, sphere.y, rp, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();

    // Dibujar el texto dentro de la esfera
    ctx.fillStyle = '#fff'; // Texto blanco
    ctx.font = '18px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(toRoman(i), sphere.x, sphere.y);
  }

  // Dibujar posiciones de las manos (pCW1 y pCW2)
  drawHand(pCW1.x, pCW1.y);
  drawHand(pCW2.x, pCW2.y);

  // Verificar colisiones entre manos y esferas
  checkCollisions();

  // Continuar el bucle
  requestAnimationFrame(draw);
}

// Dibujar la posición de las manos
function drawHand(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, rp, 0, Math.PI * 2);
  ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
  ctx.fill();
  ctx.closePath();
}

// Verificar colisiones entre las manos y las esferas
function checkCollisions() {
  for (let i = 0; i < posSpheres.length; i++) {
    const sphere = posSpheres[i];
    if (distance(sphere.x, sphere.y, pCW1.x, pCW1.y) < rp * 2 || distance(sphere.x, sphere.y, pCW2.x, pCW2.y) < rp * 2) {
      sphere.value = true; // Marcar la esfera como tocada
    }
  }
}

// Calcular la distancia entre dos puntos
function distance(x1, y1, x2, y2) {
  return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
}

// Convertir a números romanos o letras
function toRoman(num) {
  const romanNumerals = ['D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'A', 'B', 'C'];
  return romanNumerals[num % 12];
}

// Actualizar la posición de las manos (simulación o datos en tiempo real)
function updateHands(x1, y1, x2, y2) {
  pCW1.x = x1;
  pCW1.y = y1;
  pCW2.x = x2;
  pCW2.y = y2;
}

// Iniciar la aplicación
setup();
