Simulación Brazo Robot 2D

Descripción

Una simulación interactiva de un brazo robótico planar con 3 articulaciones (3 grados de libertad - 3DOF) visualizada en un lienzo HTML5 (Canvas).

El proyecto permite al usuario controlar los ángulos de cada articulación y ver en tiempo real la posición del brazo y del efector final, aplicando conceptos de cinemática directa.

Características

• Control de 3 Articulaciones: Ajuste independiente para Base, Hombro y Codo (-180° a +180°).
• Cinemática Directa: Visualización en tiempo real de la posición (X, Y) del efector final.
• Visualización Dinámica: Animación fluida usando HTML5 Canvas.
• Diseño Responsivo: El lienzo y la interfaz se adaptan automáticamente a cualquier tamaño de pantalla (móvil, tablet, escritorio).
• Tema Claro / Oscuro: Incluye un interruptor para cambiar entre modo claro y oscuro, ajustando también los colores del renderizado.

Tecnologías Utilizadas

• HTML5: Estructura semántica.
• CSS3: Diseño moderno, Flexbox/Grid, variables CSS para temas y media queries.
• JavaScript (ES6+): Lógica de simulación, manejo de eventos y renderizado en Canvas 2D.

Instalación y Uso

1. Clona este repositorio o descarga los archivos.
2. Abre el archivo index.html en cualquier navegador web moderno (Chrome, Firefox, Edge, Safari).
3. Interactúa con los deslizadores o inputs numéricos para mover el brazo.
4. Usa el botón (☀️/🌙) en la esquina superior derecha para cambiar el tema visual.

Estructura del Proyecto

• index.html: Estructura de la página y lienzo.
• style.css: Estilos visuales y temas.
• script.js: Lógica de la simulación y dibujo.