Animação robô Curiosity em Html+jquery, foi usado algum programa ou feito na "raça"?

23 de agosto de 2012 3 respostas

Beto_Sagaz 23 de agosto de 2012

Estava vendo no site da Nasa uma animação do robô Curiosity (aquele que esta em Marte), me chamou a atenção a animação feita em Html, procurei o elemento canvas no código fonte, no html gerado e no navegador e não achei.
Vi muitas divs e elementos “crus” com css, imagens de fundo e manipulados por javascript, também tem o uso de jquery na animação, várias funções feitas com o cifrão tão comum à esta biblioteca.
Achei legal o esquema, mas veio a pergunta, como foi feito?
Não achei demasiadamente complexo a ponto de não poder ser feito na mão com o uso de uma IDE comum, mas será que foi na raça ou alguma ferramenta complementar? Se foi na raça então teve uma boa dose de talento aplicado.

Segue o link da “curiosa” animação do Curiosity: http://mars.jpl.nasa.gov/msl/multimedia/interactives/edlcuriosity/index-2.html

3 Respostas

Rafael_Carneiro 24 de ago. de 2012

Se você observar, no final da página (antes do fechamento da tag body) tem as chamadas JavaScript:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.scrolling-parallax.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/play.js"></script>
<script type="text/javascript" src="js/content.js"></script>
<script type="text/javascript" src="js/altitude.js"></script>

Não verifiquei se utilizam HTML 5 ou outra tecnologia.

jmmenezes 24 de ago. de 2012

É realmente um trabalho muito interessante usando somente HTML e Javascript.

Se reparar tem 2 imagens gigantescas que são usadas de fundo e causam uma “ilusão” de que as coisas estão se mexendo…
As manipulações dos outros objetos são layers simples…

Adriano_Almeida 24 de ago. de 2012

Exato jmmenezes,

no http://mars.jpl.nasa.gov/msl/multimedia/interactives/edlcuriosity/js/altitude.js você consegue até ver a definição da taxa de scroll que ele tem que fazer na imagem a cada medida e as informações que vão aparecer naquele momento.

'1000mi': {
      'description': 'Guided Entry: Cruise Stage Separation',
      'altitude': { 'standard': [ 1000, 'mi' ], 'metric': [ 1609, 'km' ] },
      'velocity': { 'standard': [ 11408, 'mph' ], 'metric': [ 18360, 'kmph' ] },
      'scroll': 0.02
    },
'900mi': {
      'description': '&lt;div style="font-size: 16px;"&gt;Guided Entry: Separation Cruise Balance Mass Devices&lt;/div&gt;',
      'altitude': { 'standard': [ 900, 'mi' ], 'metric': [ 1448, 'km' ] },
      'velocity': { 'standard': [ 11408, 'mph' ], 'metric': [ 18360, 'kmph' ] },
      'scroll': 0.05
}

Criado 23 de agosto de 2012

Ultima resposta 24 de ago. de 2012

Respostas 3

Participantes 4

3 Respostas

Topicos relacionados