Circle

Circle Figure Skill

This skill guides you through creating circle visualizations using the CircleFigure component.

When to Use This Skill

Invoke this skill when:

• Creating geometry mini-lessons involving circles or circumferences
• Rendering circles, sectors, or arcs in practice questions
• Visualizing circle properties (radius, diameter, chords, angles)
• Building interactive circle explorations
• Demonstrating area, circumference, sectors, central angles, inscribed angles, etc.

Quick Start

Circunferencia simple

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

// Circunferencia con centro visible
<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  mode="circunferencia"
  showCenter
/>

Circulo relleno (default)

// Circulo con relleno azul semitransparente
<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  showCenter
  showRadius={{ toAngle: 45, label: 'r' }}
/>

Arco con angulo (API unificada - recomendada)

// Arco con angulo central y sector - todo en una configuracion
<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  showCenter
  arcs={[{
    startAngle: 0,
    endAngle: 90,
    showAngle: true,      // Muestra arco del angulo central
    showDegrees: true,    // Muestra valor en grados
    showSector: true,     // Muestra sector relleno
    showRadii: true,      // Muestra lineas de radio
  }]}
/>

Multiples arcos

// Varios arcos con diferentes colores
<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  showCenter
  arcs={[
    { startAngle: 0, endAngle: 90, showAngle: true, showDegrees: true },
    { startAngle: 120, endAngle: 180, showSector: true, showRadii: true },
  ]}
/>

Sector circular (API legacy)

// Sector de 90 grados (cuarto de circulo)
<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  showCenter
  sector={{ startAngle: 0, endAngle: 90, showRadii: true }}
/>

Arco resaltado (API legacy)

// Arco de 120 grados
<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  arc={{ startAngle: 30, endAngle: 150, strokeWidth: 4 }}
/>

Angulo central (API legacy)

// Angulo central con medida en grados
<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  showCenter
  centralAngle={{
    startAngle: 0,
    endAngle: 60,
    showDegrees: true,
  }}
/>

Cuerda

// Cuerda entre dos puntos de la circunferencia
<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  chords={[
    { fromAngle: 30, toAngle: 150, showEndpoints: true },
  ]}
/>

Con grid de fondo

<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  showCenter
  showGrid
/>

Props Reference

Required Props

LabeledPoint

interface LabeledPoint {
  x: number;          // Coordenada X
  y: number;          // Coordenada Y
  label?: string;     // Etiqueta del punto (ej: 'O')
  labelOffset?: { x: number; y: number };  // Ajuste de posicion del label
}

Display Mode

Center and Lines

RadiusConfig

interface RadiusConfig {
  toAngle?: number;        // Angulo en grados (0 = derecha, aumenta en sentido horario)
  label?: string;          // Etiqueta (ej: 'r', '5 cm')
  color?: string;          // Color personalizado
  strokeStyle?: 'solid' | 'dashed' | 'dotted';
  showMeasurement?: boolean;
}

DiameterConfig

interface DiameterConfig {
  angle?: number;          // Angulo del diametro (0 = horizontal)
  label?: string;          // Etiqueta (ej: 'd', '10 cm')
  color?: string;
  strokeStyle?: 'solid' | 'dashed' | 'dotted';
  endpointLabels?: [string, string];  // Labels para los extremos
}

Unified Arcs (API Recomendada)

UnifiedArcConfig

interface UnifiedArcConfig {
  startAngle: number;        // Angulo de inicio (grados)
  endAngle: number;          // Angulo de fin (grados)

  // Apariencia del arco
  strokeWidth?: number;      // Ancho del trazo (default: 4)
  color?: string;            // Color del arco y elementos relacionados

  // Opciones unificadas - combina lo que antes eran 3 configs separadas
  showAngle?: boolean;       // Mostrar arco del angulo central en el centro
  showDegrees?: boolean;     // Mostrar valor en grados
  angleLabel?: string;       // Etiqueta personalizada (ej: 'theta', 'alpha')
  angleArcRadius?: number;   // Radio del arco del angulo (default: 25)
  showSector?: boolean;      // Mostrar sector relleno (pie slice)
  sectorFill?: string;       // Color del relleno del sector
  sectorOpacity?: number;    // Opacidad del sector (0-1, default: 0.3)
  showRadii?: boolean;       // Mostrar lineas de radio en los bordes
}

Ventajas de la API unificada:

• Una sola configuracion en lugar de tres props separadas
• Soporte para multiples arcos con un array
• Menos codigo repetitivo (no hay que especificar los mismos angulos 3 veces)

Sector and Arc (API Legacy)

SectorConfig

interface SectorConfig {
  startAngle: number;      // Angulo de inicio (grados)
  endAngle: number;        // Angulo de fin (grados)
  fill?: string;           // Color de relleno
  fillOpacity?: number;    // Opacidad (0-1)
  stroke?: string;         // Color del borde
  showRadii?: boolean;     // Mostrar lineas de radio en los bordes
}

ArcConfig

interface ArcConfig {
  startAngle: number;      // Angulo de inicio (grados)
  endAngle: number;        // Angulo de fin (grados)
  strokeWidth?: number;    // Ancho del trazo
  color?: string;          // Color del arco
  showLength?: boolean;    // Mostrar longitud del arco
}

Angles

CentralAngleConfig

interface CentralAngleConfig {
  startAngle: number;      // Angulo de inicio (grados)
  endAngle: number;        // Angulo de fin (grados)
  showDegrees?: boolean;   // Mostrar valor en grados
  label?: string;          // Etiqueta personalizada (ej: 'theta', 'alpha')
  arcRadius?: number;      // Radio del arco de visualizacion
  color?: string;
}

InscribedAngleConfig

interface InscribedAngleConfig {
  vertex: LabeledPoint | number;  // Vertice en la circunferencia (punto o angulo)
  arcStart: number;        // Inicio del arco subtendido
  arcEnd: number;          // Fin del arco subtendido
  showDegrees?: boolean;
  label?: string;
  color?: string;
  arcRadius?: number;
}

Chords

ChordConfig

interface ChordConfig {
  fromAngle: number;       // Punto de inicio (angulo en grados)
  toAngle: number;         // Punto de fin (angulo en grados)
  label?: string;          // Etiqueta de la cuerda
  color?: string;
  strokeStyle?: 'solid' | 'dashed' | 'dotted';
  showEndpoints?: boolean; // Mostrar marcadores en los extremos
}

Points on Circle

PointOnCircleConfig

interface PointOnCircleConfig {
  angle: number;           // Angulo en grados (0 = derecha)
  label?: string;          // Etiqueta del punto
  radius?: number;         // Radio del marcador en pixeles
  color?: string;
}

Visual Styling

Grid and Background

SVG Options

Common Patterns

Area del Circulo

<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  mode="circulo"
  showCenter
  showRadius={{ toAngle: 0, label: 'r' }}
  showGrid
/>
// Area = pi * r^2

Longitud de la Circunferencia

<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  mode="circunferencia"
  showCenter
  showRadius={{ toAngle: 0, label: 'r' }}
/>
// Circunferencia = 2 * pi * r

Area del Sector (API unificada)

// Con la API unificada, todo en un solo arco
<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  showCenter
  arcs={[{
    startAngle: 0,
    endAngle: 90,
    showSector: true,
    showRadii: true,
    showAngle: true,
    showDegrees: true,
  }]}
/>
// Area sector = (angulo/360) * pi * r^2

Longitud del Arco (API unificada)

// Arco con angulo central - todo en una configuracion
<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  showCenter
  arcs={[{
    startAngle: 30,
    endAngle: 150,
    showAngle: true,
    showDegrees: true,
  }]}
/>
// Longitud arco = (angulo/360) * 2 * pi * r

Angulo Inscrito

// El angulo inscrito es la mitad del angulo central
<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  inscribedAngle={{
    vertex: 180,  // Vertice en la circunferencia (angulo 180 grados)
    arcStart: 60,
    arcEnd: 120,
    showDegrees: true,
  }}
  centralAngle={{
    startAngle: 60,
    endAngle: 120,
    showDegrees: true,
  }}
/>
// Angulo inscrito = angulo central / 2

Radio y Diametro

<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  showCenter
  showRadius={{ toAngle: 45, label: 'r' }}
  showDiameter={{ angle: 0, label: 'd' }}
/>
// d = 2r

Cuerda y su Relacion con el Radio

<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  showCenter
  chords={[
    { fromAngle: 30, toAngle: 150, label: 'c', showEndpoints: true },
  ]}
  showRadius={{ toAngle: 30, label: 'r' }}
/>

Semicirculo

<CircleFigure
  center={{ x: 200, y: 150, label: 'O' }}
  radius={80}
  showCenter
  sector={{
    startAngle: 0,
    endAngle: 180,
    showRadii: true,
  }}
/>

Color Palette

Debug Page

Para experimentar interactivamente con todas las opciones:

URL: /admin/figure-debug

Selecciona "Circunferencia" en el selector de tipo de figura.

La pagina de debug permite:

• Seleccionar modo (circulo vs circunferencia)
• Ajustar posicion del centro y radio con sliders
• Activar/desactivar opciones visuales (centro, radio, diametro, grid)
• Agregar/eliminar arcos con la API unificada (sector + angulo + arco en uno)
• Configurar cada arco con: angulos, mostrar angulo, mostrar grados, mostrar sector, mostrar radios
• Agregar/eliminar cuerdas con angulos personalizados
• Seleccionar presets (circulo basico, circunferencia, sector 90, semicirculo)
• Ver propiedades calculadas (circunferencia, area, longitud de arcos)
• Copiar el codigo generado con la API unificada

Integration with Mini-Lessons

In Step Components

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

export default function Step2Explore({ isActive }: LessonStepProps) {
  const [showSector, setShowSector] = useState(false);
  const [sectorAngle, setSectorAngle] = useState(90);

  return (
    <div className="flex flex-col items-center">
      <CircleFigure
        center={{ x: 200, y: 150, label: 'O' }}
        radius={80}
        showCenter
        sector={showSector ? {
          startAngle: 0,
          endAngle: sectorAngle,
          showRadii: true,
        } : undefined}
      />

      <div className="mt-4 space-y-2">
        <label className="flex items-center gap-2">
          <input
            type="checkbox"
            checked={showSector}
            => setShowSector(e.target.checked)}
          />
          Mostrar sector
        </label>

        {showSector && (
          <input
            type="range"
            min="10"
            max="360"
            value={sectorAngle}
            => setSectorAngle(Number(e.target.value))}
          />
        )}
      </div>
    </div>
  );
}

With Animation

import { motion } from 'framer-motion';

// Wrap CircleFigure in motion.div for animations
<motion.div
  initial={{ opacity: 0, scale: 0.8 }}
  animate={{ opacity: 1, scale: 1 }}
  transition={{ duration: 0.5 }}
>
  <CircleFigure
    center={{ x: 200, y: 150, label: 'O' }}
    radius={80}
    showCenter
  />
</motion.div>

Inside CartesianPlane

import { CartesianPlane } from '@/components/figures/CartesianPlane';
import { CircleFigure } from '@/components/figures/CircleFigure';

// Circulo centrado en el origen del plano cartesiano
<CartesianPlane xRange={[-5, 5]} yRange={[-5, 5]} scale={30} showAxes showGrid>
  <CircleFigure
    standalone={false}  // Importante: renderiza <g> en lugar de <svg>
    center={{ x: 0, y: 0, label: 'O' }}
    radius={90}  // En coordenadas del plano (90px = 3 unidades con scale=30)
    showCenter
    showRadius={{ toAngle: 0, label: 'r = 3' }}
  />
</CartesianPlane>

Utility Functions

Las funciones matematicas estan disponibles en @/lib/geometry/circleUtils:

import {
  // Calculos basicos
  circumference,           // Circunferencia = 2 * pi * r
  area,                    // Area = pi * r^2
  arcLength,               // Longitud de arco
  sectorArea,              // Area de sector
  chordLength,             // Longitud de cuerda

  // Conversiones de coordenadas
  polarToCartesian,        // Polar a Cartesiano (convencion SVG)
  cartesianToPolar,        // Cartesiano a Polar
  pointOnCircle,           // Punto en la circunferencia

  // Generacion de paths SVG
  circlePath,              // Path completo del circulo
  describeArc,             // Path de un arco
  describeSector,          // Path de un sector

  // Posicionamiento de labels
  calculateCenterLabelPosition,
  calculateCircumferenceLabelPosition,
  calculateRadiusLabelPosition,
  calculateChordLabelPosition,
  calculateAngleLabelPosition,

  // Validacion
  validateCircle,          // Valida centro y radio
  validateSector,          // Valida angulos del sector
  validateChord,           // Valida angulos de la cuerda

  // Utilidades de angulos
  normalizeAngle,          // Normaliza a 0-360
  angleDifference,         // Diferencia entre angulos
  inscribedAngleFromCentral, // Angulo inscrito = central / 2
} from '@/lib/geometry/circleUtils';

Example Usage

import { circumference, area, arcLength, sectorArea } from '@/lib/geometry/circleUtils';

const radius = 5;

console.log('Circunferencia:', circumference(radius));  // 31.416...
console.log('Area:', area(radius));                     // 78.54...
console.log('Longitud arco 90°:', arcLength(radius, 90));  // 7.854...
console.log('Area sector 90°:', sectorArea(radius, 90));   // 19.635...

Angle Convention

Los angulos en CircleFigure siguen la convencion SVG:

• 0 grados = derecha (posicion 3 en un reloj)
• Los angulos aumentan en sentido horario
• 90 grados = abajo
• 180 grados = izquierda
• 270 grados = arriba

        270°
         |
  180° --O-- 0°
         |
        90°

Esto es diferente a la convencion matematica estandar donde los angulos aumentan en sentido antihorario. La convencion SVG se usa porque el eje Y esta invertido en SVG (Y aumenta hacia abajo).