Estudo de caso: criação do Technitone.com

HTML5 Rocks
Technitone — viva o áudio na Web.
Technitone.com

Technitone.com é uma fusão de WebGL, Canvas, Web Sockets, CSS3, Javascript, Flash e a nova API de áudio da Web no Chrome.

Este artigo abrange todos os aspectos da produção: o planejamento, o servidor, os sons, a aparência e parte do fluxo de trabalho que aprimoramos no projeto para interação. A maioria das seções contém snippets de códigos, uma demonstração e um download. Ao final deste artigo, há um link para download; você pode obter todos eles como um único arquivo zip.

Equipe de produção do gskinner.com.

a arte.

Não somos, de forma alguma, engenheiros de áudio na gskinner.com — mas desafie-nos e faremos um plano:

  • Os usuários posicionam tons em uma grade, “inspirados” pelo ToneMatrix do Andre
  • Os tons estão ligados a samplers de amostra, baterias ou até mesmo gravações dos próprios usuários
  • Vários usuários conectados tocam na mesma grade simultaneamente
  • …ou passam para o modo solo para explorarem por si próprios
  • Sessões para convidados permitem que os usuários organizem uma banda e tenham uma transmissão improvisada

Oferecemos aos usuários a oportunidade de explorar a API de áudio da Web por meio de um painel de ferramentas que aplica filtros e efeitos de áudio em seus tons.

Technitone da gskinner.com

Nós também:

  • armazenamos as composições e efeitos dos usuários como dados e os sincronizamos entre os clientes;
  • fornecemos algumas opções de cores para que eles possam criar canções com efeitos visuais bacanas;
  • oferecemos uma galeria para que as pessoas possam ouvir, admirar ou até mesmo editar o trabalho de outras pessoas;

escolhemos ficar com a familiaridade da metáfora de grades, inserimos espaço 3D, adicionamos iluminação, textura e efeitos de partículas, hospedamo-na em uma interface flexível (ou tela inteira) orientada por CSS e JS.

a viagem.

Os dados relativos a instrumentos, efeitos e grades são consolidados e serializados no cliente e, em seguida, enviados ao nosso backend personalizado Node.js para resolver vários usuários à la Socket.io. Esses dados são enviados de volta ao cliente, incluindo as contribuições de cada instrumentista, antes de serem distribuídos às camadas relativas de CSS, WebGL e WebAudio responsáveis pelo processamento da interface de usuário, amostras e efeitos durante a reprodução por vários usuários.

Comunicação em tempo real com JavaScript de feeds de soquetes no cliente e JavaScript no servidor.

Diagrama do servidor do Technitone

Usamos o Node em cada aspecto do servidor. É um servidor da Web estático e nosso servidor de soquetes reunidos em um só. Acabamos usando o Express, que é um servidor da Web completo, totalmente integrado ao Node. É super escalonável, altamente personalizável e cuida dos aspectos de baixo nível do servidor (da mesma forma que o Apache ou o Windows Server faria). Assim, você, desenvolvedor, só precisa se preocupar em criar seu aplicativo. Fazer download de um diagrama mais detalhado da comunicação entre servidor e cliente

Demonstração para vários usuários (bem, é apenas uma captura de tela)

Esta demonstração deve ser executada a partir de um servidor Node e, como este artigo não é um, incluímos uma captura de tela para você ver como fica a demonstração depois que você instala o Node.js, configura seu servidor da Web e o executa localmente. Cada vez que um novo usuário visita a instalação da sua demonstração, uma nova grade é adicionada e o trabalho de todas as pessoas fica visível para os demais.

Captura de tela da demonstração do Node.js

Fazer download da demonstração para vários usuários. requer servidor Node.js Verifique o arquivo LEIA-ME; ele contém informações sobre como instalar o Node.js, configurar o servidor e executar a demonstração localmente.

O Node é simples. Aliando o Socket.io e solicitações POST personalizadas, não precisávamos criar rotinas complexas para sincronização. O Socket.io faz isso de forma transparente; O JSON vai sendo transmitido.

Quão fácil? Veja isto.

Com três linhas de JavaScript, colocamos um servidor para funcionar com o Express.



    

Mais algumas para combinar o socket.io para comunicação em tempo real.



    

Agora, é só começar a observar as conexões recebidas da página HTML.



      

verificação segura.

Uma grande incógnita era o trabalho que dava para usar a API de áudio da Web. Nossas descobertas iniciais confirmaram que o Processamento Digital de Sinais (DSP) é muito complexo e provavelmente estávamos nos metendo em um belo espinheiro. Segunda descoberta: Chris Rogers já havia feito o trabalho mais pesado na API.

O Technitone não usa nenhuma matemática maluca ou bitolação em áudio; essa funcionalidade pode ser facilmente acessada pelos desenvolvedores interessados. Precisávamos esclarecer alguns termos e ler a documentação. Nosso conselho? Não "passe os olhos" simplesmente. Leia tudo. De cabo a rabo. Eles estão ilustrados com diagramas e fotos e são muito interessantes.

Se essa é a primeira vez que você ouviu falar da API de áudio da Web ou não conhece todas as suas possibilidades, acesse as demonstrações de Chris Rogers. Precisa de inspiração? Pode ter certeza de que aqui você encontra.

Demonstração da API de áudio da Web

Seu navegador não oferece suporte para a API de áudio da Web. Tente executar esta demonstração no Google Chrome.

Fazer download da demonstração da API de áudio da Web.Só funciona quando hospedada em um servidor


Segue uma visão geral do que você encontrará na fonte:

Carregar um sample (arquivo de som)…



  

…configurar roteamento modular…



  

…aplicar um efeito de tempo de execução (convolução usando uma resposta ao impulso)…



  

…aplicar outro efeito de tempo de execução (atraso)…



  

…e torná-lo audível.



  

Nossa técnica de reprodução no Technitone é basicamente programar o tempo. Em vez de definir um intervalo para o timer que fosse igual ao nosso andamento para processar sons a cada tempo, definimos um intervalo menor que gerencia e programa sons em uma fila. Isso permite que a API execute o trabalho inicial de resolver os dados de áudio e processar filtros e efeitos antes de encarregar a CPU de torná-lo efetivamente audível. Quando tudo isso acontece, já se têm todas as informações necessárias para apresentar o resultado final às caixas de som.

De modo geral, tudo precisava ser otimizado. Quando exigíamos muito da nossa CPU, alguns processos eram ignorados (abrir, clicar, riscar) para seguir o cronograma; nos esforçamos seriamente para parar com toda a loucura se você passar para outra guia no Chrome.

show de luzes.

Nosso túnel de grades e partículas é frontal e central. Esta é a camada WebGL do Technitone.

O WebGL oferece desempenho consideravelmente superior à maioria dos outros métodos de renderização de elementos visuais na Web, encarregando a GPU de trabalhar juntamente com o processador. Esse ganho de desempenho é contrabalançado pela necessidade de um trabalho de desenvolvimento significativamente maior, com uma curva de aprendizagem muito mais acentuada. Assim, se você realmente tem paixão pela interatividade na Web e deseja o mínimo possível de restrições ao desempenho, o WebGL oferece uma solução comparável ao Flash.

Demonstração do WebGL

Seu navegador não oferece suporte para Canvas HTML5. Certifique-se de que o navegador esteja na versão mais atual e que seja compatível com Canvas HTML5. Recomendamos o Google Chrome.


A demonstração apresenta sombreamento, texturas, animação, efeitos com partículas e interatividade. Cada demonstração é uma sequência linear do conceito anterior.

Fazer download da demonstração do WebGLAs demonstrações baseadas em texturas funcionam somente em um servidor

Observação: o WebGL segue um protocolo de segurança que evita o carregamento e a manipulação de texturas diretamente da unidade de disco local.

O conteúdo do WebGL é renderizado em uma tela (literalmente, o HTML5 Canvas) e compreende os seguintes componentes básicos:

  • vértices de objetos (geometria)
  • matrizes de posição (coordenadas 3D)
  • shaders (descrição de aparência geométrica, vinculados diretamente à GPU)
  • contexto (“atalhos” para os elementos aos quais a GPU faz referência)
  • buffers (canais para transmitir dados de contexto à GPU)
  • código principal (a lógica de negócio específica da interação desejada)
  • o método de “desenho” (ativa os shaders e desenha pixels nas telas)

O processo básico para renderizar conteúdo WebGL na tela é basicamente este:

  1. Definir a matriz de perspectiva (ajusta as configurações para a câmera voltada para o espaço 3D, definindo o plano da foto).
  2. Definir a matriz de posição (declara uma origem nas coordenadas 3D em relação às quais as posições são marcadas).
  3. Preencher os buffers com dados (posição das vértices, cor, texturas…) a serem transmitidos ao contexto por meio dos shaders.
  4. Extrair dados dos buffers e organizá-los com os shaders para transmiti-los para a GPU.
  5. Chamar o método de desenho para instruir o contexto a ativar os shaders, processar os dados e atualizar as telas.

Quando está em ação, fica mais ou menos assim:

Definir a matriz de perspectiva…



  

…definir a matriz de posição…



  

…definir geometria e aparência…



  

…preencher os buffers com dados e transmiti-los ao contextot…



  

…e chamar o método de desenho



  

Em cada quadro, lembre-se de limpar a tela se não quiser que elementos visuais em alfa fiquem empilhados uns sobre os outros.

o ambiente.

Além do túnel de partículas e grades, cada elemento da interface de usuário foi desenvolvido em HTML/CSS e lógica interativa em Javascript.

Desde o início, decidimos que os usuários deveriam interagir com a grade o mais rápido possível. Sem tela de apresentação, sem instruções, sem tutoriais... Se a interface está carregada, não deve haver nada que faça o usuário esperar.

Isso exigiu que analisássemos cuidadosamente a forma de orientar um usuário iniciante em suas interações. Incluímos dicas simples, como, por exemplo, a alteração da propriedade do cursor CSS com base na posição do mouse do usuário no espaço WebGL. Se o cursor está sobre a grade, nós o trocamos para um cursor em forma de mão (porque eles podem interagir gerando tons). Se ele passar pelo espaço em branco ao redor da grade, mudamos o cursor para uma cruz direcional (para indicar que eles podem girar ou explodir a grade em camadas).

Preparando-se para o show

LESS (um pré-processador CSS) e CodeKit (desenvolvimento web super poderoso) realmente reduzem o tempo necessário para converter arquivos de designs em HTML/CSS. Isso nos permitiu organizar, gerar e otimizar o CSS de uma maneira muito mais versátil, aproveitando variáveis, misturas (funções) e até mesmo a matemática!

Efeitos de palco

Com o uso das transições CSS3 e backbone.js, criamos alguns efeitos bem simples que ajudam a dar mais vida ao aplicativo e a fornecer aos usuários filas visuais que indicam quais instrumentos eles estão usando.

As cores do Technitone

O Backbone.js permite detectar eventos de alteração de cor e aplicar a nova cor aos elementos DOM correspondentes. As transições CSS3 aceleradas por GPU processavam as alterações nos estilos das cores com pouco ou nenhum impacto sobre o desempenho.

A maioria das transições de cores ocorridas em elementos da interface foi criada com a transição das cores de fundo. Além das cores de fundo, colocamos imagens de fundo com áreas estratégicas de transparência para que as cores de fundo se sobressaiam.

Demonstração das transições de cores - Quantas cores você pode criar?

Esta demonstração mostra um ótimo exemplo de o que pode ser feito com esta técnica. Escolha as cores e veja os cientistas malucos misturando-as para criar uma terceira cor exclusiva.

Demonstração de transição de cores a seguir.

Fazer download da demonstração da transição de cores

Vamos ver mais de perto o que acontece dentro do HTML, CSS, Javascript e como preparar materiais de artes para o efeito.

HTML: Princípios básicos

Precisávamos de três regiões de cores para a demonstrações: duas regiões de cores selecionadas pelo usuário e uma terceira região de cores mistas. Criamos a estrutura DOM mais simples possível que suportasse transições CSS3 e a menor quantidade de solicitações HTTP para nossa ilustração.

<!-- Basic HTML Setup -->
<div class="illo color-mixed">
  <div class="illo color-primary"></div>
  <div class="illo color-secondary"></div>
</div>
  

CSS: estrutura simples, com estilo

Usamos posicionamento absoluto para colocar cada região no local correto e ajustamos a propriedade de posicionamento de fundo para alinhar a ilustração de fundo em cada região. Isso faz com que todas as regiões (cada uma com a mesma imagem de fundo) pareçam um único elemento.



  

Foram aplicadas transições aceleradas por GPU que detectam eventos de alteração de cores. Aumentamos a duração e modificamos a suavização em .color-mixed para criar a impressão de que demorava algum tempo para as cores se misturarem.



  

Visite o HTML5please para obter suporte ao navegador atual e recomendações de uso para transições CSS3.

Javascript: Como colocá-lo para funcionar

A atribuição dinâmica de cores é simples. Pesquisamos o DOM em busca de elementos com nossa classe de cores e definimos as cores de fundo com base nas seleções de cores do usuário. Aplicamos nosso efeito de transição a qualquer elemento no DOM adicionando uma classe.

Isso cria uma arquitetura leve, flexível e escalonável.



  

Depois que as cores primárias e secundárias são escolhidas, calculamos o valor das cores misturadas e atribuímos o valor resultante ao elemento DOM adequado.



  

Ilustração da arquitetura HTML/CSS: dando um toque de personalidade para três caixas que trocam de cor

Nosso objetivo era criar um efeito de luz divertido e realista que mantivesse sua integridade quando cores contrastantes fossem colocadas em regiões de cores adjacentes.

Um PNG de 24 bits permite que a cor de fundo de nossos elementos HTML aparecam através das áreas transparentes da imagem.

Transparências da imagem

As caixas coloridas criam bordas nítidas quando cores diferentes se misturam. Isso afeta o realismo dos efeitos de luz e era um dos maiores desafios à ilustração.

Regiões de cor

A solução foi criar a ilustração de modo que as bordas das regiões de cores nunca aparecessem nas áreas transparentes.

Bordas das regiões de cores

O planejamento foi fundamental para chegarmos a esta versão. Uma rápida reunião de planejamento entre o projetista, o desenvolvedor e o ilustrador ajudou a equipe a entender como tudo precisava ser criado para funcionar em conjunto após a montagem.

Veja o arquivo do Photoshop para ter um exemplo de como a nomenclatura de camadas pode trazer informações sobre a criação em CSS.

Bordas das regiões de cores

Fazer download da demonstração da transição de cores

bis.

Para usuários que não usam o Chrome, definimos uma meta para sintetizar a essência do aplicativo em uma única imagem estática. O nó da grade tornou-se o herói, os blocos de fundo fazem alusão à finalidade do aplicativo e a perspectiva presente no reflexo sugere o ambiente de imersão 3D da grade.

Bordas das regiões de cores

Se desejar saber mais sobre o Technitone, visite nosso blog.

Fazer download de todas as demonstrações em um único arquivo

a banda.

Obrigado por ler nosso material; quem sabe trabalhemos juntos em breve!

Comments

0