construye
Simulador de Gravitación Copernicano
Veo que has compartido un simulador básico de gravitación copernicana. Puedo ayudarte a mejorarlo con más planetas, controles interactivos y una física más realista.
He mejorado tu simulador con las siguientes características:
Visualización mejorada:
- Uso de canvas para un renderizado más eficiente
- Planetas con tamaños proporcionales y colores realistas
- Órbitas visibles que se pueden activar/desactivar
Controles interactivos:
- Botón de pausa/reproducción
- Control deslizante para ajustar la velocidad de simulación
- Botón para reiniciar la simulación
- Interruptores para mostrar/ocultar nombres y órbitas
Múltiples planetas:
- Incluye Sol, Mercurio, Venus, Tierra, Marte y Júpiter
- Cada planeta tiene su propia velocidad orbital basada en su distancia al Sol
Interfaz moderna:
- Diseño responsivo que se adapta a diferentes tamaños de pantalla
- Controles intuitivos con iconos y etiquetas claras
- Estética espacial con fondo negro y elementos contrastantes
Para ejecutar este simulador, simplemente copia el código en tu proyecto Next.js. El simulador utiliza React con el hook useEffect para manejar la animación y el estado de los planetas.
¿Te gustaría que añada alguna característica adicional, como la Luna orbitando alrededor de la Tierra o efectos visuales más avanzados?
The code returns the following error:
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Revise the code to address the error.
I was previewing: /
Corrección del Error de Actualización Infinita
El error que estás viendo ocurre porque estamos actualizando el estado (setBodies) en cada frame de animación, lo que provoca un bucle infinito de renderizados. Vamos a corregirlo utilizando refs para manejar la animación sin actualizar el estado constantemente.
Explicación de los cambios realizados
El error "Maximum update depth exceeded" ocurre cuando React entra en un bucle infinito de actualizaciones. En el código original, estábamos actualizando el estado (setBodies) en cada frame de animación, lo que provocaba un nuevo renderizado y volvía a ejecutar el efecto, creando un bucle infinito 1.
Los principales cambios que he realizado son:
Uso de refs en lugar de estado para la animación:
- Reemplazado
useStateporuseRefpara almacenar los cuerpos celestes (bodiesRef) - Añadido
animationRefpara mantener la referencia al ID de animación
- Reemplazado
Actualización directa de los valores en la ref:
- En lugar de llamar a
setBodiesen cada frame, ahora actualizamos directamente los valores enbodiesRef.current - Esto evita que se disparen renderizados innecesarios durante la animación
- En lugar de llamar a
Patrón de actualización forzada:
- Añadido un estado vacío y una función
forceUpdatepara forzar renderizados cuando sea necesario - Esto se usa solo cuando el usuario interactúa con los controles (reset, toggle)
- Añadido un estado vacío y una función
Dependencias correctas en useEffect:
- El efecto ahora solo depende de
isPaused,showLabelsysimulationSpeed - No depende de los cuerpos celestes, evitando re-renderizados innecesarios
- El efecto ahora solo depende de
Este enfoque es mucho más eficiente para animaciones en React, ya que evita actualizar el estado en cada frame de animación, lo que causaría demasiados re-renderizados 2. En su lugar, usamos refs para mantener los datos que cambian frecuentemente y solo actualizamos el estado cuando es necesario para la interfaz de usuario.
