Explorar a visualização de dados com P5.JS

p5.js é a implementação mais recente JavaScript da famosa área de trabalho ambiente de codificação criativa Processing. É preciso muito do poder e facilidade de uso de Processamento e coloca-lo em seu navegador. Ele ajuda você a desenhar em tela, mas também se integra com sua página web, permitindo que o seu 'esboço' para responder e manipular o DOM.

p5.js tira um monte de dores de cabeça de animação e visualização de dados na web e torna super-simples de se levantar e correr com animação usando duas funções simples: configurar() e desenhar() .

Mas não assuma essa simplicidade é limitante, como você pode tomar Processamento de um longo caminho, criando suas próprias funções e estendê-lo com muitas das bibliotecas criados pela comunidade.

Para mais ferramentas de web design e conselhos, veja nossa lista de brilhante hospedagem na web. fornecedores e certifique-se de escolher o perfeito Construtor de sites e armazenamento na núvem .

• 6 maneiras de entrar em codificação criativa

Por que os dados de uso para dirigir animação?

Criando meios design e animação 'sistemas' que definem um conjunto de regras, parâmetros e intervalos de variáveis ​​em que você pode alimentar dados diferentes. A capacidade de jogar com os parâmetros de um sistema e meios diferentes de dados de entrada que você pode criar variações de saída ilimitadas com a consistência de uma abordagem sistemática.

dados diferentes podem criar totalmente diversas saídas visuais e uma grande fonte de movimento rápido, os dados ricamente texturizados é de áudio. Isso é exatamente o que vamos usar na nossa animação.

Os dados orientado contra a visualização de dados

É uma animação a visualização de dados orientado a dados? Sim e não. Sua animação será uma representação visual dos dados apenas como uma visualização, mas o objetivo é diferente da de uma visualização tradicional. visualização de dados é usado para dar ao espectador uma visão sobre os dados, de modo que o gráfico está a serviço da comunicação dos dados.

No entanto, iremos utilizar os dados como uma semente criativa para nos permitir gerar variações gráficas interessantes e texturais, portanto, os dados estão ao serviço do gráfico. Claro, uma disciplina está interligado e cross-poliniza com o outro, mas é bom para reconhecer seus próprios dados intenção ao usar.

O que vamos fazer?

p5.js nos dá acesso rápido e fácil aos dados que vem de analisar um arquivo de som (como um MP3). Nós estaremos usando p5.fft para analisar as frequências diferentes (graves e agudos) dentro do áudio como ele joga para trás e visualizar a 'energia' ou amplitude dessa frequência.

A fim de que sejamos capazes de ver a 'forma' do som como ele joga, não apenas quer mostrar a amplitude da corrente do som, mas capturar um 'buffer' de pontos de dados. Isto irá permitir-nos mostrar uma história comovente de valores.

Para mostrar os nossos pontos de dados, vamos criar uma série de arcos concêntricos do centro para a borda externa da tela. O comprimento do arco irá representar a amplitude dos dados. Também vamos usar outras codificações visuais para os nossos dados, tais como o peso da linha e cor.

O que vamos aprender?

Trabalhando através do código, nós vamos cobrir:

• A criação de um novo esboço p5
• Carregando e analisando som
• O mapeamento de valores de dados de elementos visuais, como o tamanho, forma e cor
• Usando classes de desenhar, manter o estado da nossa animação e dados e fazer o nosso reutilizável código.

Onde estão os arquivos?

Os arquivos para a animação são hospedados em OpenProcessing , Uma grande plataforma para compartilhar, descobrir e bifurcação esboços de outras pessoas. É um ótimo lugar para você código, também.

Como estaremos usando dados de áudio, você precisará de um arquivo MP3 para arrastar para o esboço. Vamos configurar um novo esboço no Aberprocessing; É assim que seu esboço procurará uma vez que carregamos áudio, obtemos os dados e desenhamos uma simples "forma de dados":

E é assim que o esboço concluído vai olhar:

Alternativamente, você também pode usar o p5.js editor on-line ou apenas incluir a biblioteca no seu próprio projeto via download ou CDN .

01. Iniciar um novo esboço

Obter uma conta OpenProcessing livre e, a partir de sua página de perfil, clique em Criar um esboço. Isso criará então o mais básico dos esboços que contêm duas funções internas de P5.js:

1. configurar() - Isto funciona apenas uma vez, e é usado para criar uma nova tela
2. desenhar() - Aqui é onde você colocar o código que você deseja executar a cada frame

Você notará que fundo() só é chamado uma vez no set up. Isso limpa a tela, então se você quiser para limpar a tela cada quadro, incluir isso no início do desenhar() funcionar também.

Ter um jogo com algum código aqui, usando alguns dos exemplos que você pode encontrar no site p5.js .

02. Criar primeiro esboço usando dados de áudio

VA para o meu exemplo esboço arranque .

Aperte o botão play e você verá um texto pedindo-lhe para soltar um arquivo de MP3 para a tela. Aguarde alguns segundos para que ela termine o upload e, em seguida, clique na tela para iniciar a reprodução. Você deverá ver uma elipse, seguindo o mouse, que é raspagem e mudando de cor, juntamente com a amplitude de graves na música que você carregou.

Grande parte do código é comentado, mas vamos olhar para alguns elementos-chave:

Logo no início do desenho, à frente de configurar() , Criamos algumas variáveis ​​globais.

Dentro de configurar() temos um par de linhas importantes:

colorMode(HSB,360,100,100);

modo de cor() permite p5.js começou a trabalhar dentro de diferentes espaços de cores como RGB e HSB, bem como configure a escala que você usa para navegar nos canais. Aqui temos definir intervalos HSB para valores que podem estar mais familiarizado com a partir do Photoshop em vez da configuração padrão (0 a 255).

canvas.drop(gotFile);

Esta função p5.js super útil nos permite ouvir eventos gota arquivo em nossa tela. Quando temos um evento soltar de arquivo, chamamos gotfile () Para verificar se é o tipo correto e começar a analisar o som.

soundFile = new p5.SoundFile(file.data);

Aqui nós estamos transformando nossos dados arquivo de cair em um soundfile . Quando temos o arquivo de som, usamos o seguinte código:

1. initSound () a criação de uma nova instância FFT (para analisar o som)
2. analysesound () Para analisar o bloco atual de som a cada quadro
3. getNewSoundDataValue () usar fft.getEnergy () Cada quadro para nos dar a atual amplitude do som. Isso é convertido de seu intervalo padrão de 0 a 255 a 0 a 1.

Dica: É útil para converter seus dados para um intervalo de 0 a 1, porque você pode usá-lo mais facilmente ao mapear os dados para os parâmetros visuais, tais como escala, velocidade e cor.

Vamos olhar na função draw (). Esta linha solicita a amplitude atual (entre 0 e 1) da frequência do baixo e atribui a variável myDataVal .

var myDataVal = getNewSoundDataValue(“bass”)

Chamamos nosso costume getDataHSBColor () Função que mapeia nosso valor de dados separadamente para a matiz, saturação e brilho e nos retorna uma cor. Quanto maior os dados, mais a cor se move pelo espectro de matiz e mais brilhante e mais saturado.

var myDataColor = getDataHSBColor(myDataVal);

Antes de podermos desenhar nossa elipse, precisamos dar um tamanho, multiplicando 200 (px) pelo nosso valor de dados. Assim, quanto maior o valor, maior é a elipse.

var myEllipseSize = 200 * myDataVal;

03. Use dados de áudio como um pincel

Por um pouco de diversão, comente o fundo() chamar o desenhar() função e você pode usar seu som elipse reativa para pintar com!

05. Termine o seu esboço

Desenho de uma elipse de dados para uma frequência é ótima, mas agora vamos criar uma série de arcos de dados para baixo e agudos. Também vamos desenhar um tampão de valores anteriores para nos ajudar a ver melhor a forma do som.

Visita esta versão final do esboço , Executá-lo e, em seguida, soltar um MP3 sobre ele.

Você vai ver agora uma série de arcos emergentes a partir do centro da tela. Os arcos horizontais são visualizações do baixo e as verticais escolhem o agudo do MP3.

Olhando para o código, você vai ver muito do configurar, carregamento, análise e obtenção de dados é o mesmo que o último esboço, para que possamos ignorar isso. Há um pouco de código aqui assim, como antes, vamos escolher alguns pontos-chave.

Em vez de desenhar os arcos diretamente em desenhar() , Na verdade estamos criando algumas classes personalizadas:

1. classe RadialArc {} detém valor de dados do arco individual e desenha o arco
2. RadialArcs classe {} administra nossa coleção de instâncias 'RadialArc'

Cada definição de classe tem um construtor no qual estamos definindo alguns valores-chave e também passando nos parâmetros que nos permitem alterar o comportamento da classe. Vamos ter um olhar mais atento a eles agora.

A classe radialarc {}:

Esta é a classe que contém um único valor de dados e desenha um par de arcos simétricos.

setValue () e Obter valor() Permite-nos obter os dados dentro e fora de um arco e empurrar os dados através da matriz do nosso ARC conforme as atualizações de dados. redrawFromData () é chamado para recalcular e redesenhar o arco.

drawArc () é onde nós chamamos os p5.js úteis funcionar arco() . Arco() é mais rápido do que fazer o trigonometria nós mesmos, mas nós precisamos passar alguns valores como a posição, o tamanho e, fundamentalmente, um ângulo de início e fim para o nosso arco.

Esse ângulo é medido em 'radianos' ao invés de graus. Os radianos são como graus, mas em uma escala diferente: 360 ° é o mesmo que 2 x radianos. P5.js tem útil constantes incorporados para PI , HALF_PI e QUARTER_PI etc.

Os RadialArcs {} de classe:

Esta é uma classe de gerenciamento que cria uma matriz de nossa RadialArc {} classes e os mantém até à data, movendo os dados dentro e fora de cada e chamando do arco redrawFromData () função.

Para inicializar o RadialArcs () aulas para agudos e graves, dê uma olhada na configurar() . Você pode ver que estamos criando dois RadialArcs () instâncias e também passando em nossos parâmetros personalizados.

Estes parâmetros são: número de arcos, os tamanhos dos arcos interiores e exteriores, o ângulo de partida, o peso máximo da linha e a gama de tonalidade da cor. Ao criar essas classes personalizadas, que nos permite reutilizar o nosso código, mas também fazer com que cada indivíduo exemplo, passando-os estes parâmetros.

Uma vez que os objetos de arco são inicializados, cada quadro será chamada updateRadialArcs () e drawradialarcs () dentro do P5 principal desenhar() função, que é a forma como as atualizações de animação e movimentos.

06. Vá além

Nós cobrimos muito código aqui, mas fundamentalmente Espero que você possa ver como estamos tomando dados e aplicando-o a elementos visuais como tamanho, posição, comprimento, peso e cor.

Para ir mais longe, brincar com o número de arcos, grupos e ângulos. Alterar as gamas de cores e criar novas classes para desenhar formas diferentes.

Neste exemplo foram utilizados dados que está constantemente fluindo e, juntamente com uma taxa de quadros rápido, que cria a ilusão de animação. No entanto, nem todos os dados são assim e pode atualizar mais lentamente. Para dados mais lentas, você ainda pode criar animação suave por 'interpolação' a ​​animação de seus formas entre o seu atual e suas dimensões alvo.

Boa sorte com sua próxima animação dirigida por dados!

Este artigo foi originalmente publicado em questão 320 de internet , 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 do aplicativo
• 12 grandes recursos de animação CSS