Universo entre abas
Abra duas janelas lado a lado: objetos físicos atravessam de uma aba para a outra.
experimento ao vivo
Toque em “+ Abrir janela gêmea ao lado” ou abra esta mesma página em outra janela do navegador.
Como usar
- Coloque as duas janelas lado a lado e mova uma delas na tela: repare que a linha tracejada acompanha a direção real da outra janela.
- Arraste uma esfera como um estilingue contra a borda iluminada ou pressione “Pulso gravitacional” para lançá-la entre as abas.
- Mude a atmosfera ou a gravidade em uma janela e veja todas as outras mudarem no mesmo instante.
Carregando o experimento…
Várias abasMouse ou dedoToqueCom som
Sobre este experimento
Cada aba aberta deixa de ser uma página isolada e vira um pedaço do mesmo espaço físico. Posicione duas janelas lado a lado no monitor: uma ponte gravitacional aponta para a posição real da janela vizinha, e qualquer esfera arremessada contra a borda atravessa para a outra aba mantendo velocidade e direção.
Como isso funciona?
- 01As abas conversam diretamente dentro do aparelho usando a BroadcastChannel API (com fallback para eventos de localStorage), sem passar por nenhum servidor externo.
- 02Cinco vezes por segundo, cada aba anuncia sua posição na tela (window.screenX e window.screenY) e suas dimensões. Com isso cada janela sabe em qual direção física (esquerda, direita, cima ou baixo) está a vizinha.
- 03Quando uma esfera cruza a borda voltada para outra janela, a aba de origem envia um pacote com posição, raio, cor e vetor de velocidade e remove o objeto localmente; a aba vizinha o cria na borda oposta no mesmo quadro.