script.js

const select = document.getElementById('puntosCantidad');
const z1p = document.getElementById('z1p');
const z2p = document.getElementById('z2p');

selectDecimales = document.getElementById('miSelect');
function resta() {
  // 1. Obtener los valores de los inputs (como números)
  const x1 = parseFloat(document.getElementById('x1').value) || 0;
  const y1 = parseFloat(document.getElementById('y1').value) || 0;
  const x2 = parseFloat(document.getElementById('x2').value) || 0;
  const y2 = parseFloat(document.getElementById('y2').value) || 0;

  const z1 = parseFloat(document.getElementById('z1p').value) || 0;
  const z2 = parseFloat(document.getElementById('z2p').value) || 0;
  let distancia = 0;
  // 2. Calcular la resta (distancia)
  if (select.value === '2D') {
    distancia = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
  } else if (select.value === '3D') {
    distancia = Math.sqrt(
      Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) + Math.pow(z2 - z1, 2) // ¡No debe estar dentro de otro Math.sqrt!
    );
  }

  // 3. Obtener el número de decimales (convertido a entero)
  const decimales = parseInt(selectDecimales.value) || 2; // Si no hay valor, usa 2 por defecto

  // 4. Mostrar el resultado en el párrafo
  document.getElementById(
    'resultado'
  ).textContent = `La distancia entre los puntos es:  ${distancia.toFixed(
    decimales
  )} unidades`;
}

select.addEventListener('change', function () {
  if (this.value === '3D') {
    z1p.classList.add('mostrar'); // Agrega clase para mostrar
    z2p.classList.add('mostrar');
  } else {
    z1p.classList.remove('mostrar'); // Remueve clase para ocultar
    z2p.classList.remove('mostrar');
  }
});

function medioPunto() {
  // 1. Obtener los valores de los inputs (como números)
  const x1_ = parseFloat(document.getElementById('x1_').value) || 0;
  const y1_ = parseFloat(document.getElementById('y1_').value) || 0;
  const x2_ = parseFloat(document.getElementById('x2_').value) || 0;
  const y2_ = parseFloat(document.getElementById('y2_').value) || 0;
  //calcular punto medio
  const x3 = (x1_ + x2_) / 2;
  const y3 = (y1_ + y2_) / 2;

  // 3. Obtener el número de decimales (convertido a entero)
  decimales = parseInt(selectDecimales.value) || 2; // Si no hay valor, usa 2 por defecto

  // 4. Mostrar el resultado en el párrafo
  document.getElementById(
    'resultado_punto_medio'
  ).textContent = `El punto medio es: ${x3.toFixed(decimales)} ,  ${y3.toFixed(
    decimales
  )}`;
}

function verificar() {
  const p_x1 = parseFloat(document.getElementById('p_x1').value) || 0;
  const p_y1 = parseFloat(document.getElementById('p_y1').value) || 0;
  const p_z1 = parseFloat(document.getElementById('p_z1').value) || 0;
  //elementos del punto de apoyo
  const a_x1 = parseFloat(document.getElementById('a_x1').value) || 0;
  const a_y1 = parseFloat(document.getElementById('a_y1').value) || 0;
  const a_z1 = parseFloat(document.getElementById('a_z1').value) || 0;
  //elementos del vector director
  const vd_x1 = parseFloat(document.getElementById('vd_x1').value) || 0;
  const vd_y1 = parseFloat(document.getElementById('vd_y1').value) || 0;
  const vd_z1 = parseFloat(document.getElementById('vd_z1').value) || 0;

  const t1 = (p_x1 - a_x1) / vd_x1;
  const t2 = (p_y1 - a_y1) / vd_y1;
  const t3 = (p_z1 - a_z1) / vd_z1;
  //proceso
  document.getElementById(
    'verificacion2'
  ).textContent = `t1= ${p_x1} - ${a_x1} / ${vd_x1}`;
  document.getElementById(
    'verificacion3'
  ).textContent = `t2= ${p_y1} - ${a_y1} / ${vd_y1}`;
  document.getElementById(
    'verificacion4'
  ).textContent = `t3= ${p_z1} - ${a_z1} / ${vd_z1}`;

  if (t1 === t2 && t2 === t3) {
    document.getElementById(
      'verificacion6'
    ).textContent = `El punto SI esta en la recta dada`;
  } else {
    document.getElementById(
      'verificacion6'
    ).textContent = `El punto NO esta en la recta dada`;
  }

  //proceso
  document.getElementById('verificacion5').textContent = `t1= ${
    (p_x1 - a_x1) / vd_x1
  }, t2= ${(p_y1 - a_y1) / vd_y1},  t3= ${(p_z1 - a_z1) / vd_z1}, `;
}

// Función para crear los círculos animados
function createAnimatedBackground() {
  const container = document.getElementById('animated-background');
  const numberOfCircles = 15; // Número de círculos

  for (let i = 0; i < numberOfCircles; i++) {
    const circle = document.createElement('div');
    circle.classList.add('circle');

    // Tamaño aleatorio entre 50px y 200px
    const size = Math.random() * 150 + 50;
    circle.style.width = `${size}px`;
    circle.style.height = `${size}px`;

    // Posición aleatoria
    circle.style.left = `${Math.random() * 100}%`;
    circle.style.top = `${Math.random() * 100}%`;

    // Opacidad aleatoria entre 0.05 y 0.2
    circle.style.opacity = (Math.random() * 0.15 + 0.05).toString();

    // Duración de animación aleatoria entre 15s y 30s
    const animationDuration = Math.random() * 15 + 15;
    circle.style.animationDuration = `${animationDuration}s`;

    // Retraso aleatorio para la animación
    circle.style.animationDelay = `${Math.random() * 5}s`;

    container.appendChild(circle);
  }
}

// Iniciar cuando se carga la página
window.addEventListener('load', createAnimatedBackground);