initVariables();
/*
xp = 0;
yp = 0;
rp = 50;
pos = 0;
ocupado = false;
//////////////////////////////////
function funcionGo(ctx, width, height) {
  if (radius == 0) {
    lInit = true;
  }
  if (lInit) {
    jsreinitProcedure();
    jsinitTimer(1);
    lHandmano = true;
    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 la esfera con la 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;
        }
      }
    }
    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);
    }
    let num = random(0, 11);
    pos = parseInt(num);
    posSpheres[pos].value = true;
    ocupado = true;
  }
  //displaymodulo(0);
  strokeWeight(1);
  noStroke()
  noFill();
  ellipse(centerX, centerY, radius);
  //stroke(155, 155, 155, 128);
  let uno = 0;
  for (let i = 0; i < numSpheres; i++) {
    if (posSpheres[i].value) uno++;
    if (posSpheres[i].value) fill(255, 0, 0, 128);
    else fill(128, 128, 128, 128);
    if (uno > 1) {
      posSpheres[i].value = false;
      fill(128, 128, 128, 128);
    }
    ellipse(posSpheres[i].x, posSpheres[i].y, rp * 2, rp * 2);
    // Dibujar el número romano dentro del círculo
    fill(0);
    textAlign(CENTER, CENTER);
    textSize(28);
    fill(255);
    text(toRoman(i), posSpheres[i].x, posSpheres[i].y);
    textSize(12);
  }
  fill(255, 0, 0, 128);
  ellipse(pCW1.x, pCW1.y, rp * 2, rp * 2);
  ellipse(pCW2.x, pCW2.y, rp * 2, rp * 2);
  if (dist(posSpheres[pos].x, posSpheres[pos].y, pCW1.x, pCW1.y) < rp * 2 || dist(posSpheres[pos].x, posSpheres[pos].y, pCW2.x, pCW2.y) < rp * 2) {
    posSpheres[pos].value = false;
    ocupado = false;
  }
  if (!ocupado) {
    let num = random(0, 11);
    pos = parseInt(num);
    posSpheres[pos].value = true;
    ocupado = 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 = ["III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "I", "II"];
  //const romanNumerals = ["4", "5", "6", "7", "8", "9", "10", "11", "12", "1", "2", "3"];
  return romanNumerals[num % 12]; // Devolver el número romano correspondiente
}
*/
/////////////////////////////
xp = 0;
yp = 0;
rp = 50;
pos = 0;
ocupado = false;
radius = 0;
posSpheres = [];
numSpheres = 12;
centerX = 0;
centerY = 0;
nCoefi = 2.8;
pCW1 = { x: 0, y: 0 };
pCW2 = { x: 0, y: 0 };

function random(min, max) {
  return Math.random() * (max - min) + min;
}

function map(value, inMin, inMax, outMin, outMax) {
  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}

function dist(x1, y1, x2, y2) {
  return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
}

function funcionGo(ctx, width, height) {
  if (radius == 0) {
    lInit = true;
  }
  if (lInit) {
    jsreinitProcedure();
    jsinitTimer(1);
    lHandmano = true;
    if (radius === 0) {
      radius = height;
    }

    if (radius > 0) {
      // Reinitialize
      posSpheres = [];
      centerX = width / 2;
      centerY = height / 2;

      for (let i = 0; i < numSpheres; i++) {
        let angle = map(i, 0, numSpheres, 0, 2 * Math.PI);
        let x = centerX + (radius / nCoefi) * Math.cos(angle);
        let y = centerY + (radius / nCoefi) * Math.sin(angle);
        addPoint(x, y, false);
      }

      let num = random(0, numSpheres - 1);
      pos = Math.floor(num);
      posSpheres[pos].value = true;
      ocupado = true;
    }
  }

  // Clear canvas
  //ctx.clearRect(0, 0, width, height);

  // Draw circles
  for (let i = 0; i < numSpheres; i++) {
    ctx.beginPath();
    ctx.arc(posSpheres[i].x, posSpheres[i].y, rp, 0, 2 * Math.PI);

    if (posSpheres[i].value) {
      ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
    } else {
      ctx.fillStyle = "rgba(128, 128, 128, 0.5)";
    }

    ctx.fill();
    ctx.closePath();

    // Draw text inside circle
    ctx.fillStyle = "white";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.font = "20px Arial";
    ctx.fillText(toRoman(i), posSpheres[i].x, posSpheres[i].y);
  }

  // Draw red moving circles
  ctx.beginPath();
  ctx.arc(pCW1.x, pCW1.y, rp, 0, 2 * Math.PI);
  ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
  ctx.fill();
  ctx.closePath();

  ctx.beginPath();
  ctx.arc(pCW2.x, pCW2.y, rp, 0, 2 * Math.PI);
  ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
  ctx.fill();
  ctx.closePath();

  // Collision detection
  if (dist(posSpheres[pos].x, posSpheres[pos].y, pCW1.x, pCW1.y) < rp * 2 ||
    dist(posSpheres[pos].x, posSpheres[pos].y, pCW2.x, pCW2.y) < rp * 2) {
    posSpheres[pos].value = false;
    ocupado = false;
  }

  if (!ocupado) {
    let num = random(0, numSpheres - 1);
    pos = Math.floor(num);
    posSpheres[pos].value = true;
    ocupado = true;
  }

  // Reset red moving circles
  pCW1.x = -width;
  pCW1.y = -height;
  pCW2.x = -width;
  pCW2.y = -height;
}

function addPoint(x, y, value) {
  let point = { x: x, y: y, value: value };
  posSpheres.push(point);
}

function toRoman(num) {
  const romanNumerals = ["III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII", "I", "II"];
  return romanNumerals[num % 12];
}
