Arquivo da tag: Canvas

The Wilderness Downtown: Experimento do Google usando HTML5

Apesar de ser um experimento já antigo, resolvi blogar assim mesmo, pois algumas pessoas ainda não o conhecem…

The Wilderness Downtown foi um projeto experimental do google, lançado em 2010, usando HTML5 e o navegador Chrome.

O projeto é simplesmente fantástico, baseado essencialmente em JavaScript, HTML5, Canvas, SVG, Google Street View e na API do Google Maps.

Tudo começa ao informar um endereço real. A partir das imagens do Google Maps e Street View, o vídeo de um rapaz correndo abre em uma das abas, e na outra, a posição de onde o rapaz está correndo aparece na região que você informou.

Enquanto isso, alguns pássaros voam sobre os mapas e até pelo video, sendo que eles são animações feitas no canvas. Note que na tela inicial (onde você informa o endereço) os pássaros são sensíveis a posição do mouse. Então, se você tentar toca-los, eles irão mudar de direção… 🙂

Durante a exibição, você poderá fazer um desenho e inclusive podendo utilizar as letras do teclado para escrever algo. A cada tecla pressionada, uma animação de máquina de escrever é reproduzida  logo a baixo. O mais impressionante disso tudo, é que depois que passam alguns segundos, os pássaros voltam voando e pousam em todas as linhas que você fez no desenho.

Você pode acessar e conferir tudo em: http://www.thewildernessdowntown.com/ (recomenda-se o uso do navegador Chrome)

Share