O Sistema Solar JS (ou Cosmic Visualizer) é uma aplicação web de alto impacto visual que cria uma representação dinâmica e interativa do universo. Utilizando o poder da Canvas API do HTML5, o projeto renderiza corpos celestes, nebulosas, estrelas cadentes e sistemas orbitais em tempo real, proporcionando uma experiência imersiva diretamente no navegador.
- Visual Deslumbrante: Renderização de partículas para estrelas, gradientes complexos para nebulosas e rastros luminosos para estrelas cadentes.
- Experiência Interativa: O usuário pode interagir com os elementos através do mouse (hover e clique), obtendo informações ou disparando eventos visuais.
- Customização em Tempo Real: Ajustes dinâmicos de densidade de estrelas, velocidade de animação e esquemas de cores.
- Design Responsivo: O canvas se adapta automaticamente ao tamanho da janela (viewport), garantindo que a proporção do cosmos seja mantida em qualquer dispositivo.
- Frontend: HTML5, CSS3, JavaScript (ES6+).
- Renderização: Canvas API (2D Context).
- Metodologia: Programação Orientada a Objetos (POO) para gestão de entidades espaciais.
Para alcançar a fluidez e o realismo visual, foram aplicadas as seguintes estratégias técnicas:
Cada estrela é tratada como um objeto individual com propriedades de posição (x, y), brilho (opacity) e tamanho. As nebulosas utilizam Gradientes Radiais (createRadialGradient) sobrepostos para criar a ilusão de profundidade e densidade gasosa.
Utilizamos o requestAnimationFrame em vez de setInterval. Isso garante que a renderização ocorra em sincronia com a taxa de atualização do monitor, economizando CPU/GPU e evitando "tearing" visual.
- Trigonometria: Uso de
Math.cos()eMath.sin()para calcular trajetórias circulares e elípticas dos planetas e satélites. - Vetores: Estrelas cadentes implementam vetores de velocidade e aceleração para simular o rastro de movimento.
Para manter a performance, implementamos uma estratégia de "limpeza e redesenho" (clearRect) eficiente, além de reciclar objetos que saem da tela para evitar vazamentos de memória (Memory Leaks).
Diferentes velocidades de movimento para estrelas de tamanhos distintos, criando uma percepção de 3D e profundidade de campo, mesmo em um ambiente 2D.
cosmic-visualizer/
|-- index.html # Estrutura principal e container do canvas
|-- js/
|-- main.js # Inicialização e controle do loop principal
|-- universo.js # Lógica de comportamento dos corpos celestes
|-- canva.js # Configurações específicas de renderização e contexto
|-- css/
|-- style.css # Estilização da interface e reset
|-- assets/
|-- images/ # Assets estáticos (se houver)
|-- fonts/ # Fontes personalizadas para a UI
|-- README.md- Clone o repositório:
git clone https://github.com/RafaelPulzi/SistemaSolarJS.git
- Navegue até a pasta:
cd SistemaSolarJS - Execute o projeto:
Basta abrir o arquivo
index.htmlem qualquer navegador moderno. Não é necessário um servidor backend, pois o projeto é puramente client-side.
Contribuições são o que fazem a comunidade open source um lugar incrível para aprender, inspirar e criar.
- Faça um Fork do projeto.
- Crie uma Branch para sua funcionalidade (
git checkout -b feature/NovaFuncionalidade). - Faça o Commit de suas alterações (
git commit -m 'Add: Nova Funcionalidade'). - Faça o Push para a Branch (
git push origin feature/NovaFuncionalidade). - Abra um Pull Request.
Este projeto está sob a licença MIT. Consulte o arquivo LICENSE para mais detalhes.
Rafael Pulzi - LinkedIn Link do Projeto: https://github.com/RafaelPulzi/SistemaSolarJS
Agradecemos a todos que contribuíram ou demonstraram interesse no Sistema Solar JS. Explore o cosmos com responsabilidade! 🌠