Imagens

Como construir uma galáxia

Meu plano era gerar processualmente um modelo da galáxia que pudesse colocar os dados estelares em contexto (e, espero, dar uma incrível visão de nosso lugar na Via Láctea).

Um protótipo inicial do sistema de partículas da Via Láctea.

Para gerar a Via Láctea, gerei 100 mil partículas e as coloquei em uma espiral emulando a forma como os braços galácticos são formados. Os detalhes da formação do braço em espiral não me preocupavam muito, porque seria um modelo representacional, e não matemático. No entanto, tentei acertar o número de braços espirais e girar na "direção certa".

Em versões posteriores do modelo da Via Láctea, eu reduza o destaque do uso de partículas em favor de uma imagem plana de uma galáxia para acompanhar as partículas, esperançosamente dar uma aparência mais fotográfica. A imagem real é da galáxia espiral NGC 1232 a aproximadamente 70 milhões de anos-luz de nós, manipulada para parecer com a Via Láctea.

Cada unidade GL é um ano-luz. Neste caso,a esfera tem 110.000 anos-luz de largura, abrangendo o sistema de partículas.

Esta é a aparência da dobra da página quando ela é virada ou arrastada.

Como encontrar o frame

Depois de localizar a linha correta na ferramenta de rastro do jogo, a próxima etapa é encontrar o loop principal. O loop principal parece um padrão repetido nos dados de rastreamento. Você pode navegar pelos dados de rastreamento usando as teclas W, A, S, D: A e D para mover-se para a esquerda ou direita (para frente e para trás no tempo) e W e S para aumentar e diminuir o zoom nos dados. O loop principal seria um padrão que se repete a cada 16 milissegundos se o jogo estiver sendo executado a 60 Hz.

Parece que três frames de execução

Depois de localizar o sinal de funcionamento do jogo, é possível saber o que exatamente o código faz em cada frame. Use W, A, S, D para aumentar o zoom até conseguir ler o texto nas caixas de função.

Profundo em um frame de execução

Sucesso: tente manter 60 fps para todas as suas animações. Dessa forma, seus usuários não verão animações oscilantes que interfiram na experiência. Confira se todos os elementos de animação têm will-change definido para tudo o que você planeja mudar bem antes do início da animação. Para transições de visualização, é muito provável que você queira usar will-change: transform.

Usar traduções para navegar entre visualizações

Para facilitar, presuma que há duas visualizações: uma de lista e outra de detalhes. Conforme o usuário toca em um item da lista dentro da visualização em lista, a visualização de detalhes desliza para dentro e a visualização em lista desliza para fora.

Para conseguir esse efeito, você precisa de um contêiner para as duas visualizações com overflow: hidden definido. Dessa forma, as duas visualizações podem estar dentro do contêiner lado a lado, sem mostrar barras de rolagem horizontais, e cada visualização pode deslizar lado a lado dentro do contêiner, conforme necessário.