Quando você compra por meio de links em nosso site, podemos ganhar uma comissão de afiliado. É assim que funciona.
p5.js é a implementação JavaScript mais recente do famoso ambiente de codificação criativa para desktop Processing. Ele utiliza grande parte do poder e da facilidade de uso do Processamento e o coloca no seu navegador. Ele ajuda você a desenhar na tela, mas também se integra à sua página da web, permitindo que seu 'esboço' responda e manipule o DOM.
p5.js tira muitas dores de cabeça da animação e visualização de dados na web e torna super simples começar a trabalhar com animação usando duas funções simples: configurar() e empate().
Mas não presuma que essa simplicidade seja limitante, pois você pode levar o Processing muito longe criando suas próprias funções e estendendo-o com muitas das bibliotecas criadas pela comunidade.
Para obter mais ferramentas e conselhos de web design, consulte nossa lista de ferramentas brilhantes alojamento web fornecedores e certifique-se de escolher o perfeito Construtor de sites e armazenamento na núvem.
- 6 maneiras de entrar na codificação criativa
Por que usar dados para impulsionar a animação?
Criar 'sistemas' de design e animação significa definir um conjunto de regras, parâmetros e intervalos de variáveis nos quais você pode alimentar diferentes dados. A capacidade de brincar com os parâmetros de um sistema e inserir dados diferentes significa que você pode criar variações ilimitadas de resultados com a consistência de uma abordagem sistemática.
Dados diferentes podem criar resultados visuais totalmente diversos e uma excelente fonte de dados ricamente texturizados e em movimento rápido é o áudio. É exatamente isso que vamos usar em nossa animação.
Visualização baseada em dados versus visualização de dados
Uma animação baseada em dados é uma visualização de dados? Sim e não. Sua animação será uma representação visual dos dados, assim como uma visualização, mas o propósito é diferente de uma visualização tradicional. A visualização de dados é usada para dar ao visualizador uma visão dos dados, de forma que o gráfico esteja a serviço da comunicação dos dados.
Porém, utilizaremos os dados como semente criativa para nos permitir gerar variações gráficas interessantes e texturais, pois os dados estão a serviço do gráfico. É claro que uma disciplina está interligada e polinizada de forma cruzada com a outra, mas é bom reconhecer a sua própria intenção ao usar dados.
O que vamos fazer?
p5.js nos dá acesso rápido e fácil aos dados provenientes da análise de um arquivo de som (como um MP3). Estaremos usando p5.fft para analisar diferentes frequências (graves e agudos) no áudio enquanto ele é reproduzido e visualizar a 'energia' ou amplitude dessa frequência.
Para que possamos ver a “forma” do som enquanto ele é reproduzido, não queremos apenas mostrar a amplitude atual do som, mas capturar um “buffer” de pontos de dados. Isso nos permitirá mostrar uma história comovente de valores.
Para mostrar nossos pontos de dados, criaremos uma série de arcos concêntricos do centro até a borda externa da tela. O comprimento do arco representará a amplitude dos dados. Também usaremos outras codificações visuais para nossos dados, como espessura e cor da linha.
O que aprenderemos?
Trabalhando no código, abordaremos:
- Configurando um novo esboço p5
- Carregando e analisando som
- Mapeando valores de dados para elementos visuais como tamanho, forma e cor
- Usando classes para desenhar, mantenha o estado de nossa animação e dados e torne nosso código reutilizável.
Onde estão os arquivos?
Os arquivos da animação estão hospedados em OpenProcessing, uma ótima plataforma para compartilhar, descobrir e bifurcar os esboços de outras pessoas. É um ótimo lugar para você codificar também.
Como usaremos dados de áudio, você precisará de um arquivo MP3 para arrastar para o esboço. Configuraremos um novo esboço no OpenProcessing; é assim que seu esboço ficará depois de carregarmos o áudio, obtermos os dados e desenharmos uma 'forma de dados' simples:
E é assim que ficará o esboço concluído:
Alternativamente, você também pode usar o editor on-line p5.js ou apenas inclua a biblioteca em seu próprio projeto via download ou CDN.
01. Iniciar um novo esboço
Obtenha uma conta gratuita do OpenProcessing e, na sua página de perfil, clique em Criar um esboço. Isso criará o esboço mais básico contendo duas das funções integradas do p5.js:
- configurar() – Isso é executado apenas uma vez e é usado para configurar uma nova tela
- empate() – Aqui é onde você coloca o código que deseja executar em cada quadro
Você notará isso fundo() é chamado apenas uma vez na configuração. Isso limpa a tela, então se você quiser limpar a tela a cada quadro, inclua isso no início do empate() funcionar também.
Experimente alguns códigos aqui, usando alguns dos exemplos que você pode encontrar no site p5.js.
02. Crie o primeiro esboço usando dados de áudio
VA para o meu exemplo de esboço inicial.
Aperte o botão play e você verá um texto solicitando que você solte um arquivo MP3 na tela. Aguarde alguns segundos para terminar o upload e clique na tela para iniciar a reprodução. Você deverá ver uma elipse, seguindo o mouse, que está sendo dimensionada e mudando de cor junto com a amplitude dos graves na música que você carregou.
Grande parte do código é comentada, mas vejamos alguns elementos principais:
Logo no início do esboço, à frente configurar(), criamos algumas variáveis globais.
Dentro de configurar() temos algumas linhas importantes:
colorMode(HSB, 360,100,100);modo de cor() permite que você configure o p5.js para funcionar em diferentes espaços de cores, como RGB e HSB, bem como configure a escala usada para navegar pelos canais. Aqui definimos intervalos de HSB com valores com os quais você pode estar mais familiarizado no Photoshop, em vez da configuração padrão (0 a 255).
canvas.drop(gotFile);Esta função p5.js super útil nos permite ouvir qualquer evento de queda de arquivo em nossa tela. Quando recebemos um evento de queda de arquivo, chamamos gotArquivo() para verificar se é o tipo correto e começar a analisar o som.
soundFile = new p5.SoundFile(file.data);Aqui estamos transformando nossos dados de arquivo descartados em um Arquivo de som. Quando temos o arquivo de som, usamos o seguinte código:
- som de inicialização() para configurar uma nova instância FFT (para analisar o som)
- analisarSom() para analisar o bloco de som atual a cada quadro
- getNewSoundDataValue() usar fft.getEnergia() cada quadro para nos dar a amplitude atual do som. Isso é convertido de seu intervalo padrão de 0 a 255 para 0 a 1.
Dica: É útil converter seus dados para um intervalo de 0 a 1 porque você pode usá-lo mais facilmente ao mapear os dados para parâmetros visuais como escala, velocidade e cor.
Vejamos a função draw(). Esta linha solicita a amplitude atual (entre 0 e 1) da frequência grave e atribui a ela a variável meuDataVal.
var myDataVal = getNewSoundDataValue(“bass”)
Chamamos nosso costume getDataHSBColor() função que mapeia o valor dos nossos dados separadamente para Matiz, Saturação e Brilho e nos retorna uma cor. Quanto mais altos os dados, mais a cor se move no espectro de matiz e mais brilhante e saturada será a cor.
var myDataColor = getDataHSBColor(myDataVal);Antes de podermos desenhar nossa elipse, precisamos dar-lhe um tamanho, multiplicando 200 (px) pelo valor dos nossos dados. Portanto, quanto maior o valor, maior será a elipse.
var myEllipseSize = 200 * myDataVal;03. Use dados de áudio como um pincel
Para se divertir um pouco, comente o fundo() ligue no empate() função e você pode usar sua elipse reativa ao som para pintar!
05. Complete seu esboço
Desenhar uma elipse de dados para uma frequência é ótimo, mas agora criaremos uma série de arcos de dados para graves e agudos. Também desenharemos um buffer de valores anteriores para nos ajudar a ver melhor a forma do som.
Visita esta versão finalizada do esboço, execute-o e solte um MP3 nele.
Agora você verá uma série de arcos emergindo do centro da tela. Os arcos horizontais são visualizações dos graves e os verticais captam os agudos do MP3.
Olhando para o código, você verá que grande parte da configuração, carregamento, análise e obtenção dos dados é igual ao último esboço, então podemos ignorar isso. Há bastante código aqui, então, como antes, vamos apenas destacar alguns pontos-chave.
Em vez de desenhar os arcos diretamente empate(), na verdade estamos criando algumas classes personalizadas:
- classe RadialArc{} mantém o valor dos dados do arco individual e desenha o arco
- classe RadialArcs{} gerencia nossa coleção de instâncias 'RadialArc'
Cada definição de classe possui um construtor no qual definimos alguns valores-chave e também passamos parâmetros que nos permitem alterar o comportamento da classe. Vamos dar uma olhada neles agora.
A classe RadialArc{}:
Esta é a classe que contém um único valor de dados e desenha um par de arcos simétricos.
definirValor() e Obter valor() permite-nos colocar e retirar os dados de um arco e enviar os dados através da matriz do nosso arco à medida que os dados são atualizados. redesenharFromData() é chamado para recalcular e redesenhar o arco.
desenharArco() é onde chamamos a útil função p5.js arco(). Arco() é mais rápido do que fazer a trigonometria nós mesmos, mas precisamos passar alguns valores como posição, tamanho e, principalmente, um ângulo inicial e final para nosso arco.
Esse ângulo é medido em “radianos” em vez de graus. Os radianos são como graus, mas em uma escala diferente: 360° é igual a 2 x pi radianos. P5.js possui constantes integradas úteis para PI, HALF_PI e QUARTER_PI etc.
A classe RadialArcs{}:
Esta é uma classe de gerenciamento que cria um array de nossos Arco Radial{} classes e as mantém atualizadas, movendo os dados para dentro e fora de cada uma e chamando o arco redesenharFromData() função.
Para inicializar o Arcos Radiais() aulas de agudos e graves, dê uma olhada em configurar(). Você pode ver que estamos criando dois Arcos Radiais() instâncias e também passando nossos parâmetros personalizados.
Esses parâmetros são: número de arcos, tamanhos dos arcos internos e externos, o ângulo inicial, a espessura máxima da linha e a faixa de matiz da cor. Ao criar essas classes personalizadas, podemos reutilizar nosso código, mas também tornar cada instância individual, passando-lhes esses parâmetros.
Assim que os objetos de arco forem inicializados, cada quadro chamará atualizarRadialArcs() e desenharRadialArcs() dentro do p5 principal empate() função, que é como a animação é atualizada e se move.
06. Vá mais longe
Cobrimos muito código aqui, mas basicamente espero que você possa ver como estamos pegando dados e aplicando-os a elementos visuais como tamanho, posição, comprimento, peso e cor.
Para ir mais longe, brinque com o número de arcos, grupos e ângulos. Altere as gamas de cores e crie novas classes para desenhar diferentes formas.
Neste exemplo, usamos dados que fluem constantemente e, juntamente com uma taxa de quadros rápida, criam a ilusão de animação. No entanto, nem todos os dados são assim e podem ser atualizados mais lentamente. Para dados mais lentos, você ainda pode criar animações suaves 'interpolando' a animação de suas formas entre suas dimensões atuais e de destino.
Boa sorte com sua próxima animação baseada em dados!
Este artigo foi publicado originalmente na edição 320 da líquido, a revista mais vendida do mundo para web designers e desenvolvedores. Compre a edição 320 aqui ou inscreva-se aqui.
Artigos relacionados:
- Como adicionar animação ao SVG com CSS
- A tendência de dados definida para revolucionar o design de aplicativos
- 12 ótimos recursos de animação CSS
