30. Triángulos y sus propiedades

Tres puntos no alineados determinan el polígono más sencillo. Los triángulos forman mallas, sprites, superficies y sistemas de coordenadas, y permiten resolver numerosas pruebas geométricas con gran eficiencia.

30.1 Introducción

Un triángulo está formado por tres vértices A, B y C unidos mediante tres segmentos. Es una figura rígida: fijadas las longitudes de sus lados, su forma no puede deformarse sin cambiar alguna longitud.

Esta estabilidad explica su uso como unidad básica de las mallas gráficas. Cualquier polígono puede dividirse en triángulos para dibujarlo, interpolar atributos o calcular su superficie.

30.2 Elementos fundamentales

  • Vértices: A, B y C.
  • Lados: a=|BC|, b=|CA| y c=|AB|.
  • Ángulos interiores: α, β y γ, opuestos a a, b y c.
  • Base: cualquiera de los lados elegido como referencia.
  • Altura: distancia perpendicular desde un vértice a la recta del lado opuesto.
α + β + γ = 180° = π radianes

30.3 Interpretación visual

Triángulo con lados, ángulos, altura, mediana, punto medio, clasificación y fórmulas
La altura es perpendicular a la base; la mediana une un vértice con el punto medio del lado opuesto.

30.4 Desigualdad triangular y degeneración

Tres longitudes positivas forman un triángulo no degenerado únicamente si cada una es menor que la suma de las otras dos:

a<b+c   b<a+c   c<a+b

Si una longitud es exactamente igual a la suma de las otras, los tres vértices quedan alineados y el área es cero. En gráficos conviene detectar estos casos porque no poseen interior.

30.5 Clasificación según sus lados

TipoRelación entre ladosPropiedad
Equiláteroa=b=cTres ángulos de 60°
IsóscelesDos lados igualesDos ángulos iguales
EscalenoTodos diferentesTodos los ángulos diferentes

Al trabajar con decimales, las igualdades deben comprobarse mediante una pequeña tolerancia.

30.6 Clasificación según sus ángulos

  • Acutángulo: los tres ángulos son menores que 90°.
  • Rectángulo: un ángulo mide 90°.
  • Obtusángulo: un ángulo es mayor que 90°.

Si c es el lado mayor, podemos comparar cuadrados: c²<a²+b² indica acutángulo; c²=a²+b², rectángulo; c²>a²+b², obtusángulo.

30.7 Perímetro y áreas

Perímetro = a+b+c
Área = base·altura/2

Cuando conocemos las coordenadas, el determinante proporciona el doble del área con signo:

Área = ½ |(Bx−Ax)(Cy−Ay) − (By−Ay)(Cx−Ax)|

El valor absoluto entrega superficie; el signo original conserva la orientación de los vértices.

30.8 Fórmula de Herón

Si solo conocemos las tres longitudes, calculamos primero el semiperímetro s:

s=(a+b+c)/2
Área=√[s(s−a)(s−b)(s−c)]

Por ejemplo, un triángulo de lados 3, 4 y 5 tiene s=6 y área √(6·3·2·1)=6. Es el conocido triángulo rectángulo 3-4-5.

30.9 Rectas y centros notables

  • Medianas: van de cada vértice al punto medio opuesto; se cortan en el baricentro.
  • Alturas: son perpendiculares a los lados opuestos; se cortan en el ortocentro.
  • Mediatrices: cortan perpendicularmente los lados; se encuentran en el circuncentro.
  • Bisectrices: dividen los ángulos; se encuentran en el incentro.
Baricentro G=((Ax+Bx+Cx)/3, (Ay+By+Cy)/3)

El baricentro siempre está dentro del triángulo y es útil como centro promedio para transformaciones.

30.10 Orientación y producto cruzado

El determinante u×v=ux·vy−uy·vx indica hacia qué lado gira el recorrido A→B→C:

orientación=(B−A)×(C−A)

En el plano matemático, un valor positivo suele indicar orientación antihoraria; uno negativo, horaria; cero, vértices alineados. En pantalla el eje y invertido cambia la interpretación visual del signo.

30.11 Simulación interactiva

La base AB permanece fija. Mueve el vértice C y el punto P para observar las medidas, la clasificación y la prueba de pertenencia.

Perímetro25.44
Área35
Por ladosescaleno
Por ángulosacutángulo
Punto Pdentro

30.12 Calcular los datos de un triángulo

const A = { x: -5, y: -3 };
const B = { x: 5, y: -3 };
const C = { x: 1, y: 4 };

const dobleArea = (B.x-A.x)*(C.y-A.y)
                 - (B.y-A.y)*(C.x-A.x);
const area = Math.abs(dobleArea) / 2;
const orientacion = dobleArea > 0
  ? "antihoraria"
  : dobleArea < 0 ? "horaria" : "degenerado";

console.log(`A: (${A.x}, ${A.y})`);
console.log(`B: (${B.x}, ${B.y})`);
console.log(`C: (${C.x}, ${C.y})`);
console.log(`Área: ${area.toFixed(2)}`);
console.log(`Orientación: ${orientacion}`);

Al presionar Ejecutar, se muestran los vértices, el área y la orientación del triángulo sin depender de un sistema de dibujo.

30.13 Punto dentro de un triángulo

Una técnica robusta compara el signo de P respecto de los tres lados:

function signo(p, a, b) {
  return (p.x-b.x)*(a.y-b.y)
       - (a.x-b.x)*(p.y-b.y);
}
function contiene(tri, p) {
  const s1=signo(p,tri.a,tri.b);
  const s2=signo(p,tri.b,tri.c);
  const s3=signo(p,tri.c,tri.a);
  const negativo=s1<0 || s2<0 || s3<0;
  const positivo=s1>0 || s2>0 || s3>0;
  return !(negativo && positivo);
}

const triangulo = {
  a: { x: 0, y: 0 },
  b: { x: 6, y: 0 },
  c: { x: 2, y: 4 }
};

const puntos = [
  { x: 2, y: 1 },
  { x: 3, y: 0 },
  { x: 6, y: 4 }
];

puntos.forEach(punto => {
  const estado = contiene(triangulo, punto) ? "dentro" : "fuera";
  console.log(`(${punto.x}, ${punto.y}): ${estado}`);
});

Al presionar Ejecutar, se clasifican tres puntos; el que está sobre la base se considera parte del triángulo. El método funciona con orientación horaria o antihoraria.

30.14 Aplicaciones, errores y conclusión

Los triángulos se usan en rasterización, mallas, navegación, colisiones, interpolación baricéntrica, iluminación, recortes y descomposición de polígonos.

Ejemplo animado: superficie triangular con ondas y luz

Una malla formada por decenas de triángulos se deforma como una superficie de agua. Una fuente luminosa recorre la escena y cada cara cambia de color según su distancia y orientación, como ocurre en mallas, iluminación y efectos low-poly.

Cada cuadrilátero se divide en 2 triángulos 96 triángulos
Malla: 96 triángulos · luz dinámica

Errores comunes

  • No comprobar si los vértices están alineados.
  • Confundir lado a con el lado que toca al vértice A; en la notación clásica es el opuesto.
  • Perder el signo del determinante cuando se necesita orientación.
  • Comparar longitudes decimales sin tolerancia.
  • Suponer que la altura siempre cae dentro del triángulo.
  • Aplicar fórmulas de pertenencia sin decidir cómo tratar el borde.

Recuerda: los ángulos suman 180°, el área por coordenadas surge de un determinante y tres lados deben cumplir la desigualdad triangular. Estas ideas convierten al triángulo en una herramienta fundamental de los gráficos 2D.

En el próximo tema estudiaremos los polígonos.