// @ts-nocheck import { useState, useRef, useEffect, useCallback } from "react"; const R = 130, CX = 185, CY = 185, SZ = 370; const TAU = Math.PI * 2; const TRAIL = 80; const SPECIAL = [ { a: 0, label: "0°" }, { a: Math.PI / 6, label: "30°" }, { a: Math.PI / 4, label: "45°" }, { a: Math.PI / 3, label: "60°" }, { a: Math.PI / 2, label: "90°" }, { a: Math.PI, label: "180°" }, { a: 3 * Math.PI / 2, label: "270°" }, ]; const STARS = Array.from({ length: 60 }, (_, i) => ({ x: (Math.sin(i * 2.4) * 0.5 + 0.5) * SZ, y: (Math.cos(i * 3.7) * 0.5 + 0.5) * SZ, r: 0.4 + (i % 3) * 0.4, op: 0.2 + (i % 5) * 0.08, })); function norm(a) { return ((a % TAU) + TAU) % TAU; } function deg(a) { return (norm(a) * 180 / Math.PI).toFixed(1); } // Full-cycle wave path function wavePath(fn, W, H) { return Array.from({ length: 201 }, (_, i) => { const a = (i / 200) * TAU; const x = (i / 200) * W; const y = H / 2 - fn(a) * (H / 2 - 3); return `${i === 0 ? "M" : "L"} ${x.toFixed(1)} ${y.toFixed(1)}`; }).join(" "); } export default function App() { const [angle, setAngle] = useState(Math.PI / 4); const [autoSpin, setAutoSpin] = useState(false); const [speed, setSpeed] = useState(0.8); const [trail, setTrail] = useState([]); const [visible, setVisible] = useState({ sin: true, cos: true, tan: true }); const dragging = useRef(false); const angleRef = useRef(angle); const svgRef = useRef(null); const rafRef = useRef(null); const lastT = useRef(null); const [pulse, setPulse] = useState(0); useEffect(() => { angleRef.current = angle; }, [angle]); const pushAngle = useCallback((a) => { angleRef.current = a; setAngle(a); setTrail(t => [...t.slice(-TRAIL), a]); setPulse(p => p + 1); }, []); // Auto-spin RAF useEffect(() => { if (!autoSpin) { if (rafRef.current) cancelAnimationFrame(rafRef.current); return; } const tick = (t) => { if (lastT.current !== null) pushAngle(angleRef.current + ((t - lastT.current) / 1000) * speed); lastT.current = t; rafRef.current = requestAnimationFrame(tick); }; lastT.current = null; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [autoSpin, speed, pushAngle]); const getA = useCallback((e) => { const rect = svgRef.current?.getBoundingClientRect(); if (!rect) return; const sx = SZ / rect.width, sy = SZ / rect.height; const cx = e.touches ? e.touches[0].clientX : e.clientX; const cy = e.touches ? e.touches[0].clientY : e.clientY; pushAngle(Math.atan2(-((cy - rect.top) * sy - CY), (cx - rect.left) * sx - CX)); }, [pushAngle]); useEffect(() => { const mv = (e) => { if (dragging.current) { e.preventDefault?.(); getA(e); } }; const up = () => { dragging.current = false; }; window.addEventListener("mousemove", mv); window.addEventListener("mouseup", up); window.addEventListener("touchmove", mv, { passive: false }); window.addEventListener("touchend", up); return () => { window.removeEventListener("mousemove", mv); window.removeEventListener("mouseup", up); window.removeEventListener("touchmove", mv); window.removeEventListener("touchend", up); }; }, [getA]); const sin = Math.sin(angle), cos = Math.cos(angle), tan = Math.tan(angle); const px = CX + R * cos, py = CY - R * sin; const tanClamp = Math.max(-4.5, Math.min(4.5, tan)); const na = norm(angle); // Waves const WW = 340, WH = 54; const sinPath = wavePath(Math.sin, WW, WH); const cosPath = wavePath(Math.cos, WW, WH); const mxSin = (na / TAU) * WW; const mysin = WH / 2 - sin * (WH / 2 - 3); const mycos = WH / 2 - cos * (WH / 2 - 3); // Arc const arcA = na > Math.PI ? 1 : 0; const arcX = CX + 40 * cos, arcY = CY - 40 * sin; // Special angle detection const nearSpecial = SPECIAL.find(s => Math.abs(norm(angle) - s.a) < 0.06); const toggleFn = (k) => setVisible(v => ({ ...v, [k]: !v[k] })); return (

{/* Title */}

Trigonometría Visual

Círculo Unitario

{/* Toggle buttons */}

{[ { k: "sin", label: "sin", color: "#ff4db8" }, { k: "cos", label: "cos", color: "#00e5ff" }, { k: "tan", label: "tan", color: "#ffe44d" }, ].map(({ k, label, color }) => ( ))}

{/* SVG */} {/* Value cards */}

{[ { k: "sin", label: "sin θ", val: sin, color: "#ff4db8", formula: "y / r" }, { k: "cos", label: "cos θ", val: cos, color: "#00e5ff", formula: "x / r" }, { k: "tan", label: "tan θ", val: tan, color: "#ffe44d", formula: "sin/cos" }, ].map(({ k, label, val, color, formula }) => (

toggleFn(k)} style={{ flex: 1, background: visible[k] ? "#0d0820" : "#080810", border: `1px solid ${visible[k] ? color + "44" : "#1a1a2a"}`, borderTop: `2px solid ${visible[k] ? color : "#222"}`, borderRadius: 6, padding: "10px 10px", textAlign: "center", cursor: "pointer", transition: "all 0.2s", opacity: visible[k] ? 1 : 0.4, }}>

{formula}

{label}

{Math.abs(val) > 99 ? "±∞" : val.toFixed(4)}

))}

{/* Wave graphs */}

{[ { label: "sin θ", path: sinPath, color: "#ff4db8", my: mysin, k: "sin" }, { label: "cos θ", path: cosPath, color: "#00e5ff", my: mycos, k: "cos" }, ].map(({ label, path, color, my, k }) => (

{label} = {(k === "sin" ? sin : cos).toFixed(3)}

))}

{/* Identity */}

sin²θ ({(sin * sin).toFixed(3)}) + cos²θ ({(cos * cos).toFixed(3)}) = {(sin * sin + cos * cos).toFixed(3)} ✓

{/* Snap buttons */}

{SPECIAL.slice(0, 6).map(s => ( ))}

{/* Controls */}

Velocidad{speed.toFixed(1)}x

setSpeed(+e.target.value)} style={{ width: "100%", accentColor: "#c44dff" }} />

{/* Angle strip */}

Ángulo

{deg(angle)}°

Radianes

{(na / Math.PI).toFixed(3)}π

Cuadrante

{na < Math.PI / 2 ? "I" : na < Math.PI ? "II" : na < 3 * Math.PI / 2 ? "III" : "IV"}

Arrastra el punto · Toca los ángulos especiales · Activa auto-giro

); }