Quadrilateral

Quadrilateral Figure Skill

This skill guides you through creating quadrilateral visualizations using the QuadrilateralFigure component.

When to Use This Skill

Invoke this skill when:

• Creating geometry mini-lessons involving quadrilaterals
• Rendering cuadrados, rectángulos, rombos, paralelogramos, trapecios, cometas
• Visualizing quadrilateral properties (parallel sides, equal sides, right angles, diagonals)
• Building interactive quadrilateral explorations
• Demonstrating área de cuadriláteros, propiedades de paralelogramos, etc.

Supported Types

The component supports 9 quadrilateral types:

• cuadrado - Square (4 equal sides, 4 right angles)
• rectangulo - Rectangle (opposite sides equal, 4 right angles)
• rombo - Rhombus (4 equal sides, opposite angles equal)
• paralelogramo - Parallelogram (opposite sides parallel and equal)
• trapecio - Trapezoid (1 pair of parallel sides)
• trapecio-isosceles - Isosceles trapezoid (equal legs)
• trapecio-rectangulo - Right trapezoid (2 right angles)
• cometa - Kite (2 pairs of adjacent equal sides)
• irregular - Irregular quadrilateral

Quick Start

Forma más simple: Usando fromType (Recomendado)

import { QuadrilateralFigure } from '@/components/figures/QuadrilateralFigure';

// Cuadrado de 100px
<QuadrilateralFigure fromType={{ type: 'cuadrado', size: 100 }} />

// Rectángulo de 120x80
<QuadrilateralFigure fromType={{ type: 'rectangulo', size: 120, height: 80 }} />

// Rombo con ángulo de 60°
<QuadrilateralFigure fromType={{ type: 'rombo', size: 80, angle: 60 }} />

// Trapecio isósceles
<QuadrilateralFigure
  fromType={{ type: 'trapecio-isosceles', size: 120, height: 80, baseRatio: 0.5 }}
/>

Con marcas automáticas

// Paralelogramo con marcas de lados paralelos y ángulos rectos
<QuadrilateralFigure
  fromType={{ type: 'paralelogramo', size: 100, height: 70, angle: 70 }}
  autoParallelMarks
  autoEqualMarks
  autoRightAngleMarkers
  showGrid
/>

Con diagonales

// Cuadrado con diagonales visibles
<QuadrilateralFigure
  fromType={{ type: 'cuadrado', size: 100 }}
  showDiagonals
  diagonals={{
    showIntersection: true,
    strokeStyle: 'dashed',
  }}
/>

Usando ángulos (fromAngles)

Construir un cuadrilátero especificando los 4 ángulos interiores:

// Ángulos simples (constraint genérico)
<QuadrilateralFigure fromAngles={[90, 90, 90, 90]} />

// Rombo con ángulos específicos (4 lados iguales)
<QuadrilateralFigure
  fromAngles={{
    angles: [60, 120, 60, 120],
    constraint: 'equalSides'
  }}
/>

// Paralelogramo (lados opuestos iguales)
<QuadrilateralFigure
  fromAngles={{
    angles: [70, 110, 70, 110],
    constraint: 'equalOppositeSides'
  }}
/>

Nota importante: A diferencia de los triángulos, 4 ángulos no determinan una única forma de cuadrilátero. Por ejemplo, 90-90-90-90 puede ser cualquier rectángulo. El parámetro constraint especifica qué tipo de cuadrilátero crear:

• 'generic' (default): Forma razonable con proporciones equilibradas
• 'equalSides': 4 lados iguales (familia de rombos)
• 'equalOppositeSides': Lados opuestos iguales (familia de paralelogramos)
• 'cyclic': Inscrito en un círculo (ángulos opuestos deben sumar 180°)

Usando vértices (control total)

Cuando necesitas control preciso sobre las coordenadas:

<QuadrilateralFigure
  vertices={[
    { x: 100, y: 50, label: 'A' },
    { x: 300, y: 50, label: 'B' },
    { x: 300, y: 200, label: 'C' },
    { x: 100, y: 200, label: 'D' },
  ]}
  showGrid
/>

Props Reference

Construcción del cuadrilátero (usar UNO de estos)

fromType

interface FromTypeConfig {
  type: QuadrilateralType;  // 'cuadrado', 'rectangulo', 'rombo', etc.
  size: number;             // Tamaño base (ancho para rect, diagonal para rombo)
  height?: number;          // Alto (para rect, trapecio, cometa)
  angle?: number;           // Ángulo en grados (para rombo, paralelogramo)
  baseRatio?: number;       // Ratio base menor/mayor (para trapecios, 0-1)
  centerX?: number;         // Centro X (default: auto)
  centerY?: number;         // Centro Y (default: auto)
  rotation?: number;        // Rotación en grados (default: 0)
}

fromAngles

Construye un cuadrilátero especificando los 4 ángulos interiores (deben sumar 360°).

// Forma simple: array de 4 ángulos
fromAngles={[90, 90, 90, 90]}

// Forma completa con configuración
interface FromAnglesConfig {
  angles: [number, number, number, number];  // 4 ángulos en grados (suma = 360°)
  constraint?: QuadAngleConstraint;          // Tipo de restricción (default: 'generic')
  size?: number;                             // Tamaño máximo (default: 150)
  rotation?: number;                         // Rotación en grados
  centerX?: number;                          // Centro X (default: 200)
  centerY?: number;                          // Centro Y (default: 150)
}

type QuadAngleConstraint =
  | 'generic'           // Forma genérica con proporciones equilibradas
  | 'equalSides'        // 4 lados iguales (familia de rombos)
  | 'equalOppositeSides'// Lados opuestos iguales (familia de paralelogramos)
  | 'cyclic';           // Inscrito en círculo (ángulos opuestos suman 180°)

Restricciones por constraint:

• generic: No hay restricciones adicionales
• equalSides: Los ángulos opuestos deben ser iguales (α₁=α₃, α₂=α₄)
• equalOppositeSides: Los ángulos opuestos deben ser iguales
• cyclic: Los ángulos opuestos deben sumar 180° (α₁+α₃=180°, α₂+α₄=180°)

fromSquare

interface FromSquareConfig {
  center: { x: number; y: number };
  side: number;              // Longitud del lado
  rotation?: number;         // Rotación en grados
}

fromRectangle

interface FromRectangleConfig {
  center: { x: number; y: number };
  width: number;
  height: number;
  rotation?: number;
}

LabeledPoint

interface LabeledPoint {
  x: number;
  y: number;
  label?: string;     // Etiqueta del vértice (ej: 'A', 'B', 'C', 'D')
  labelOffset?: { x: number; y: number };
}

Side Configuration

interface QuadSideConfig {
  label?: string;                      // Etiqueta del lado
  measurement?: string;                // Medida con unidades
  color?: string;
  strokeStyle?: 'solid' | 'dashed' | 'dotted';
  showMeasurement?: boolean;
  parallelGroup?: number;              // Grupo de lados paralelos (1 o 2)
  parallelMarks?: number;              // Número de marcas (1, 2, 3)
  equalGroup?: number;                 // Grupo de lados iguales
  equalMarks?: number;                 // Número de marcas de igualdad
}

Angle Configuration

interface QuadAngleConfig {
  label?: string;
  showArc?: boolean;
  arcRadius?: number;
  color?: string;
  showDegrees?: boolean;
  isRightAngle?: boolean;              // Mostrar marcador de ángulo recto
}

Diagonal Configuration

interface DiagonalConfig {
  show?: boolean;
  color?: string;
  strokeStyle?: 'solid' | 'dashed' | 'dotted';
  strokeWidth?: number;
  showIntersection?: boolean;          // Mostrar punto de intersección
  intersectionLabel?: string;          // Etiqueta del punto
  d1Label?: string;                    // Etiqueta diagonal 1
  d2Label?: string;                    // Etiqueta diagonal 2
}

Visual Options

SVG Options

Common Patterns

Propiedades del Cuadrado

<QuadrilateralFigure
  fromType={{ type: 'cuadrado', size: 100 }}
  sides={[
    { label: 'a' },
    { label: 'a' },
    { label: 'a' },
    { label: 'a' },
  ]}
  showDiagonals
  diagonals={{ showIntersection: true }}
  autoEqualMarks
  autoRightAngleMarkers
/>

Área del Rectángulo

<QuadrilateralFigure
  fromType={{ type: 'rectangulo', size: 120, height: 80 }}
  sides={[
    { label: 'base', measurement: '6 cm' },
    { label: 'altura', measurement: '4 cm' },
    { label: 'base' },
    { label: 'altura' },
  ]}
  autoRightAngleMarkers
  showGrid
/>

Rectángulo con Diagonales Iguales

<QuadrilateralFigure
  fromType={{ type: 'rectangulo', size: 120, height: 80 }}
  showDiagonals
  autoRightAngleMarkers
  autoDiagonalBisectionMarks   // Diagonales se bisectan
  autoDiagonalEqualMarks       // Diagonales son iguales
/>
// Los rectángulos tienen diagonales iguales que se bisectan

Propiedades del Rombo

<QuadrilateralFigure
  fromType={{ type: 'rombo', size: 80, angle: 60 }}
  showDiagonals
  autoEqualMarks
  autoParallelMarks
  autoDiagonalBisectionMarks   // Diagonales se bisectan
  autoDiagonalRightAngle       // Diagonales son perpendiculares
/>
// Diagonales del rombo se bisectan perpendicularmente

Propiedades del Paralelogramo

<QuadrilateralFigure
  fromType={{ type: 'paralelogramo', size: 120, height: 80, angle: 70 }}
  autoAngleArcs               // Muestra ángulos con grados automáticamente
  autoParallelMarks
  autoEqualMarks
/>
// Ángulos opuestos son iguales, consecutivos son suplementarios

Trapecio con Bases

<QuadrilateralFigure
  fromType={{ type: 'trapecio-isosceles', size: 140, height: 80, baseRatio: 0.5 }}
  sides={[
    { label: 'B', measurement: 'base mayor' },
    { label: 'l' },
    { label: 'b', measurement: 'base menor' },
    { label: 'l' },
  ]}
  autoParallelMarks
  showGrid
/>

Cometa (Kite)

<QuadrilateralFigure
  fromType={{ type: 'cometa', size: 100, height: 140 }}
  showDiagonals
  diagonals={{
    showIntersection: true,
    strokeStyle: 'dashed',
  }}
  autoEqualMarks
/>
// Diagonales perpendiculares, una bisecta a la otra

Color Palette

Debug Page

Para experimentar interactivamente con todas las opciones:

URL: /admin/figure-debug

Seleccionar Cuadrilátero como tipo de figura.

La página de debug permite:

• Modo Por Tipo: Seleccionar tipo de cuadrilátero y ajustar dimensiones
• Modo Por Ángulos: Especificar 4 ángulos interiores con selector de constraint
• Modo Por Vértices: Control manual de cada vértice
• Seleccionar presets (cuadrado, rectángulo, rombo, paralelogramo, trapecios, cometa)
• Activar/desactivar opciones visuales (diagonales, marcas paralelas, igualdad, ángulos rectos)
• Ver propiedades calculadas (tipo detectado, perímetro, área, convexidad)
• Copiar el código generado

Integration with Mini-Lessons

In Step Components

// En Step2Explore.tsx
import { QuadrilateralFigure } from '@/components/figures/QuadrilateralFigure';

export default function Step2Explore({ isActive }: LessonStepProps) {
  const [showDiagonals, setShowDiagonals] = useState(false);

  return (
    <div className="flex flex-col items-center">
      <QuadrilateralFigure
        fromType={{ type: 'rombo', size: 80, angle: 60 }}
        showDiagonals={showDiagonals}
        autoEqualMarks
      />
      <button => setShowDiagonals(!showDiagonals)}>
        {showDiagonals ? 'Ocultar' : 'Mostrar'} diagonales
      </button>
    </div>
  );
}

With Animation

import { motion } from 'framer-motion';

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
>
  <QuadrilateralFigure fromType={{ type: 'cuadrado', size: 100 }} />
</motion.div>

Utility Functions

Las funciones matemáticas están disponibles en @/lib/geometry/quadrilateralUtils:

import {
  // Cálculos básicos
  distance,           // Distancia entre puntos
  midpoint,           // Punto medio
  centroid,           // Centroide del cuadrilátero
  angleAtVertex,      // Ángulo en un vértice (grados)
  perimeter,          // Perímetro
  area,               // Área (fórmula del cordón)

  // Detección de propiedades
  areSidesParallel,       // Si dos lados son paralelos
  areSidesEqual,          // Si dos lados son iguales
  isRightAngle,           // Si un ángulo es recto
  detectParallelSides,    // Detectar todos los pares paralelos
  detectEqualSides,       // Detectar grupos de lados iguales
  detectRightAngles,      // Detectar vértices con ángulo recto
  detectQuadrilateralType, // Detectar tipo de cuadrilátero

  // Validación
  isConvex,               // Si es convexo
  isSelfIntersecting,     // Si se auto-intersecta
  validateQuadrilateral,  // Validación completa
  diagonalIntersection,   // Punto de intersección de diagonales

  // Construcción
  buildSquare,            // Construir cuadrado
  buildRectangle,         // Construir rectángulo
  buildRhombus,           // Construir rombo
  buildParallelogram,     // Construir paralelogramo
  buildTrapezoid,         // Construir trapecio
  buildIsoscelesTrapezoid, // Construir trapecio isósceles
  buildRightTrapezoid,    // Construir trapecio rectángulo
  buildKite,              // Construir cometa
  buildQuadrilateralFromType, // Construir desde tipo
  buildQuadrilateralFromAngles, // Construir desde ángulos

  // Validación de ángulos
  validateQuadrilateralAngles, // Validar que 4 ángulos formen cuadrilátero válido
} from '@/lib/geometry/quadrilateralUtils';

Detect Quadrilateral Type

import { detectQuadrilateralType } from '@/lib/geometry/quadrilateralUtils';

const vertices = [
  { x: 0, y: 0 },
  { x: 100, y: 0 },
  { x: 100, y: 100 },
  { x: 0, y: 100 },
];

const type = detectQuadrilateralType(vertices);
// Returns: 'cuadrado'

Calculate Area

import { area } from '@/lib/geometry/quadrilateralUtils';

const vertices = [
  { x: 0, y: 0 },
  { x: 100, y: 0 },
  { x: 100, y: 80 },
  { x: 0, y: 80 },
];

const areaValue = area(vertices);
// Returns: 8000 (100 * 80)

Build Quadrilateral from Type

import { buildQuadrilateralFromType } from '@/lib/geometry/quadrilateralUtils';

const vertices = buildQuadrilateralFromType({
  type: 'rombo',
  size: 100,
  angle: 60,
  centerX: 200,
  centerY: 150,
});

// Returns: [Point, Point, Point, Point]

Build Quadrilateral from Angles

import {
  validateQuadrilateralAngles,
  buildQuadrilateralFromAngles
} from '@/lib/geometry/quadrilateralUtils';

// Validar ángulos antes de construir
const angles: [number, number, number, number] = [60, 120, 60, 120];
const validation = validateQuadrilateralAngles(angles);

if (validation.valid) {
  // Construir rombo con esos ángulos
  const vertices = buildQuadrilateralFromAngles(
    angles,
    'equalSides',  // constraint
    150,           // maxSize
    200,           // centerX
    150            // centerY
  );
  // Returns: [Point, Point, Point, Point]
}

Type Hierarchy

Cuadriláteros
├── Paralelogramos (2 pares de lados paralelos)
│   ├── Rectángulo (4 ángulos rectos)
│   │   └── Cuadrado (4 lados iguales + 4 ángulos rectos)
│   └── Rombo (4 lados iguales)
│       └── Cuadrado
├── Trapecios (1 par de lados paralelos)
│   ├── Trapecio isósceles (piernas iguales)
│   └── Trapecio rectángulo (2 ángulos rectos)
├── Cometa (2 pares de lados adyacentes iguales)
└── Irregular (sin propiedades especiales)

El algoritmo de detección clasifica automáticamente cualquier conjunto de 4 vértices en uno de estos tipos.