Som e Imagem em Sintonia. integrando áudio e visualização

By peterpm

Som e Imagem em Sintonia: integrando áudio e visualização

((Criação de post sobre a integração do áudio e bibliotecas de visualização, a criação das funções para manipular o áudio e gerando visualizações. Trazer exemplos de código e visualizações.))

Podemos abordar a sincronização audiovisual de diversas formas. Ela pode ser absolutamente automatica, sendo a resultante de uma analise “black box”, por exemplo os visualizadores baseados em MilkDrop. Ela pode ser instrinsicamente manual, onde cada frame foi construido sem uma relação direta, sendo indiretamente associado pelo artista.

E temos o meio termo, todo o resto. Nesse meio termo é onde a maior parte de toda criação audiovisual certamente vai residir. Por exemplo, ao customizar um preset de milkdrop, ele não é mais automatico, e sim um reflexo da programação do artista, ou quando uma analise é feita e um relatorio obtido e com isso os frames a serem desenhados são mapeados em pontos chaves.

Ou quando temos um equilibrio ainda maior, quando a arte visual é gerada por parametros configuraveis, mas que se atualizam ao longo da obra, refletindo analises de momento-a-momento do que ocorre no som.

Aqui, vamos trabalhar nesse ponto de equilibrio.

Para isso, precisamos então de duas coisas: Um analisador e um executor.

Atualmente, temos diversos executores: Godot, Blender, JSs(P5, etc).

Quanto aos analisadores, Godot e Blender oferecem suporte nativo a analise spectral. Tambem existem bibliotecas javascript que suportam analise de audio, tal como a Tone.JS.

Sendo assim, temos 3 Analisadores e 3 Executores. Isso nos permite uma liberdade criativa implementacional já avantajada.

Para cada analisador temos 3 executores. Isso nos oferece 3*3=9. 9 possibilidades de fluxos:

(CRIAR TABELA DE VERDADE)

ANALISADOR EXECUTOR POSSIVEL Blender Blender Certamente Blender Godot Talvez Blender P5.js Complexo

Godot Blender Complexo Godot Godot Certamente Godot P5.js Certamente

Tone.js Blender Complexo Tone.js Godot Certamente Tone.js P5.js Certamente

A priori o que se deve perguntar é: É possivel todos os 9 fluxos realmente existirem? A tabela acima nos oferece uma primeira suposição quanto a sua exequibilidade.

Vamos focar apenas nos que são certamente implementaveis, porem, antes, discutiremos sobre as outras opções.

Do Blender para o P5.js é Complexo atualmente pois ainda não temos a ponte javascript standalone implementada. Ela é necessaria para que outros programas alem de “browser based” possam utilizar javascript em seu fluxo.

Do Godot para o Blender é Complexo pois não existe uma metodologia aparente que permita exportar um projeto do Godot para o Blender. É possivel sim implementar algo que habilite essa interação, mas isso não foi delineado.

Do Tone.js para o Blender é Complexo pela mesma razão anterior. A falta da ponte standalone. Nesse caso, é até possivel trabalhar sem ela, pois poderiamos exportar um arquivo de analise do Tone.js. Mas isso faria necessario toda a criação de um exportador no Javascript e um importador em Python no Blender.

Agora, quanto a analisar no Blender e executar no Godot, é de fato Talvez possivel pois existe o fluxo de exportação/importação de animação pelo formato de arquivo gtlf. Embora isso meio que ja utilize o blender na fase de animação, poderia-se utilizar sub-objetos coringas, que apenas mapeiam a analise, para subsequente utilização interna como operadores dentro do Godot.

Bom, com isso nos restam 5 fluxos cuja implementação é direta:

Dessas, 3 são Certamente possiveis por trivialidade por estarmos no mesmo ecosistema: Do Blender para o Blender; Do Godot para o Godot; E do Tone.js para o P5.js. Ja aqui, teriamos duas formas, uma diretamente no javascript, e a outra utilizando duas pontes JS, e a logica de mapeamento ocorrendo fora do javascript.

Com isso, nos restam duas implementações interessantes que utilizam a ponte Godot-JS:

Do Godot para o P5.js e do Tone.js para o Godot.

Com isso, temos 6 caminhos de implementação a explorar. Vamos implementar cada um desses:

Vamos usar a faixa “Tecnoancestralidade”, como base de analise.

1)Blender -> Blender:

Abra o Blender 4.4.0; Ao ter o programa iniciado, clique em “New file: General”; Crepe Indo diretamete a analise, devemos configurar um pouco a interface. Ao clicar no “reloginho” do canto inferior esquerdo, podemos selecionar “Graph Editor”. Crepe Crepe Agora, para podermos observar a mudança, devemos clicar em qualquer local da região da linha vermelha destacada no exemplo, e arrastar para cima. Crepe Isso, vai exibir a timeline do “Graph Editor” que foi selecionado. Crepe Podemos agora começar a importação e analise do audio em questão. Para isso, vamos primeiro escolher um parametro a ser modulado. Neste exemplo de caso, vamos animar a Escala do cubo padrão. Tendo o cubo selecionado, e a aba em destauque dentro do quadrado vermelho habilitada, podemos encontrar os parametros de Escala. Crepe Podemos clicar em qualquer um dos eixos apontados com o botão direito, e devemos selecionar “Insert Keyframes”. Crepe Podemos ver que agora existe uma linha do tempo populada. Devemos expandir clicando na setinha destacada, iterativamente, até que toda a arvore seja expandida. Crepe Vamos então começar o processo de mapeamento. Selecionamos um dos eixos, “X Scale”, por exemplo, e depois clicaremos em “Channel” e “Sound to Samples”. Vamos repetir isso para os outros dois eixos, “Y Scale” e “Z Scale” de forma analoga. Crepe Temos agora a interface de carregamento e configuração da analise. Devemos navegar até o arquivo desejado. Podemos então configurar os parametros. Crepe Como vamos iterar em 3 vezes, devemos então trabalhar os parametros baseando-se nessa constrição. Os parametros que vamos trabalhar são os Lowest e Highest. Estes definem o chão e o teto das frequencias a serem analisadas. Como vamos trabalhar com 3 analises, vamos dividir a tessitura do arquivo de forma a serem regiões Grave, Media e Aguda.

Temos de 20 a 20 mil Herts como escopo da audição humana. Vamos ter que dividir 20000-20 em 3 regiões igulamente espaçadas exponencialmente, pois a percepção de audio é exponencial. 20000-20 = 19980. Vamos calcular o log2 desse valor, e obtemos 14,286268963. Ao dividir por 3, 4,762089654 é nosso intervalo. Então, podemos configurar uma formula para os pontos como 20+(2^((p-1)*4,762089654)). Não é uma formula perfeitamente ajustada, porem entrega os pontos. Temos então para os pontos p de 1 a 4:

1 21 2 47 3 756 4 19999

São valores truncados acima, porem bem aproximados. Vamos ajustar um pouco e obtemos então as pontos arredondados: 20-50-800-20000. Conseguimos nossos pontos, e portando, nossas regiões: 20-50, 50-800 e 800-20000.

Como vimos na ultima imagem acima, vamos inserir os valores de cada região, para cada um dos eixos.

Apos feita as 3 iterações, poderemos ver na timeline, 3 linhas coloridas distintas, cada uma sendo o mapeamento de uma das regiões do audio. Crepe

Ao apertar a barra de espaço, vamos poder ver a animação ocorrer na tela.

2)Godot -> Godot:

3)Tone.js -> P5.js (Direto):

4)Tone.js -> P5.js (Indireto):

5)Godot -> P5.js:

6)Tone.js -> Godot:

Share: X (Twitter) Facebook LinkedIn