Este post aborda um estudo de programação criativa em p5.js, onde combino duas linguagens visuais em um único quadro: uma estrutura 3D rigorosa de cubos em aramado aninhados e uma camada 2D plana inspirada em Sonia Delaunay e no Orfismo. Projetei o resultado especificamente para projeção VJ e performances de música ambiente.
Dois Sistemas em Uma Imagem
Construí a base a partir de quatro cubos em aramado, aninhados uns nos outros. Primeiro, fiz cada cubo girar em um ritmo ligeiramente diferente, criando um compasso mecânico e sereno. Além disso, coloquei pequenos pontos que orbitam e deslizam ao longo das arestas — eles permanecem fiéis à geometria, mas adicionam um pulso vivo, como energia que se move pela estrutura.
Por cima disso, adicionei uma sobreposição órfica: anéis concêntricos e arcos que se sobrepõem, se cruzam e criam uma colagem de movimento. Mantive essa camada intencionalmente plana e gráfica — um contraponto à profundidade dos cubos. Juntos, esses dois sistemas geram uma tensão visual suave que se mantém bem em projeções longas.
Cor como Movimento
Escolhi uma paleta alinhada com os contrastes simultâneos de Delaunay: vermelho, amarelo, azul, laranja, verde, branco e preto. A cor aqui não é decoração — ela conduz a sensação de movimento. Como resultado, a imagem continua mudando mesmo quando a animação é sutil, porque as rotações lentas e os contrastes fortes criam constantemente novas combinações.
Um detalhe importante: trato o branco como espaço em vez de tinta. Deixo segmentos que normalmente seriam brancos transparentes, para que o fundo preto apareça. Assim, os anéis parecem recortados na escuridão — mais claros e com caráter arquitetônico.
Por que se encaixa na música ambiente
A música ambiente não precisa de edição rápida. Em vez disso, precisa de visuais que possam respirar. Por isso mantive a animação lenta e em camadas. Os cubos fornecem estrutura. Os círculos e arcos trazem ritmo e movimento de cor. Além disso, os pontos em órbita formam um pulso constante. Por isso, juntos eles constroem uma tensão discreta que funciona bem em projeção — você pode observá-la por minutos e ainda descobrir novas combinações.
Conecto este estudo de programação criativa diretamente ao meu trabalho de projeção VJ ao vivo em Resolume.
Notas Técnicas — p5.js WEBGL
Desenvolvi a imagem em p5.js no modo WEBGL em 1920×1080. Construi tudo a partir de formas simples e padrões repetidos: anéis como geometria segmentada, arcos como camadas de corte, cubos como aramados. Escrevi o código completo do zero, sem shaders ou dependências externas — apenas composição e movimento.
Finalmente, se quiser explorar mais deste trabalho, visite a visão geral de Programação Criativa ou a página de música do FDR-Sound.
