Design de Shader de Líquido Iridescente

Um Aspecto de Óleo sobre Água Construído com Matemática

Iridescent Liquid é um exemplo oficial do OpenDesign construído em torno de uma única prévia WebGL, e não de um conjunto de telas de aplicativo. Seu título, “LIQUID IRIDESCENCE”, aparece sobre um campo saturado de formas fluidas em violeta, ciano, rosa e rosé. A composição faz do canvas o assunto principal e mantém o texto explicativo próximo ao percurso de leitura no canto inferior esquerdo.

O texto de apoio descreve o efeito como um “living oil-on-water field” (campo vivo de óleo sobre água). A implementação renderiza um triângulo em tela cheia com ruído procedural, e não uma malha esférica ou uma textura fotográfica. Isso permite sugerir um material fluido sem representar um objeto literal. A linguagem do material é uma metáfora visual, não prova de uma simulação fisicamente precisa de óleo ou água.

No topo, “OPENDESIGN · WEBGL PREVIEW” identifica o contexto e “REAL-TIME · GPU” enquadra a abordagem de renderização. Esses rótulos orientam o observador antes da leitura do título maior, mas devem ser tratados como texto descritivo da interface, e não como prova de taxa de quadros medida ou de desempenho em produção.

01

Canvas Contínuo

O campo visual preenche a composição, de modo que o movimento continua sendo o conteúdo principal, e não um pano de fundo para painéis separados.

02

Contraste Texturizado

As letras brancas grandes separam a mensagem editorial do denso campo de cor, embora seu posicionamento precise permanecer estável enquanto o fundo muda.

Onde o Design Funciona Bem

Este trabalho é mais útil como referência para fundos visuais interativos, estudos de arte generativa e demonstrações de programação criativa. Ele mostra como uma página pode comunicar um experimento visual com apenas uma descrição curta, um título grande e uma indicação direta de interação. É menos adequado para interfaces densas em informação, porque a superfície animada compete com rótulos pequenos e conteúdo detalhado.

A frase “MOVE THE CURSOR ↗” transforma o observador passivo em participante. Os estados fornecidos mostram o mesmo canvas com diferentes limites de cor e arranjos de ondulações, enquanto a sobreposição permanece consistente. Essa combinação torna a mudança de estado legível: a composição muda, mas a área de leitura não.

Composição e Movimento

O design usa uma ordem de leitura vertical forte: rótulos de contexto no topo, o título superdimensionado “LIQUID IRIDESCENCE” perto do canto inferior esquerdo, o texto explicativo abaixo dele e a instrução do cursor no canto inferior direito. Isso distribui a atenção pelo canvas largo e mantém a mensagem principal agrupada em um único bloco legível.

As capturas mostram três estados do mesmo canvas de shader, e não telas independentes. Nelas, o título e a frase de apoio permanecem no lugar, enquanto as correntes ao redor passam de regiões predominantemente ciano para trechos mais magenta, rosa, verde-azulado e ocre. A sobreposição estável dá ao movimento um ponto de referência; em contrapartida, o fundo pode reduzir o contraste atrás de partes do texto.

O shader de fragmento usa ruído de seis camadas por meio de dois campos de distorção encadeados. Uma atração ponderada pela distância a partir do ponteiro curva as coordenadas de amostragem, e uma paleta baseada em cossenos somada a termos de crista brilhantes cria as correntes iridescentes. A cada quadro, as duas coordenadas do ponteiro se aproximam de seus alvos em uma quantidade igual à diferença restante multiplicada pelo coeficiente 0.06 do código, enquanto o tempo decorrido continua alterando o campo. A instrução no canto inferior direito é texto fixo, e não um controle clicável.

A Cor como Estrutura

A paleta não é um gradiente único. Ela é organizada como amplas correntes coloridas delimitadas por contornos claros e luminosos. Ciano e verde-azulado trazem interrupções mais frias dentro do campo dominante de magenta e violeta, enquanto linhas rosa-claras revelam a direção do fluxo. Essa variação ajuda o canvas a parecer dimensional sem acrescentar geometria literal.

Área de Leitura Estável

A sobreposição repetida demonstra um padrão prático de interação: preservar o título e a instrução enquanto a arte varia. Uma recriação deve manter essa relação intacta e depois testar se a paleta escolhida deixa contraste suficiente sob o texto.

Limite de Capacidades

Este artefato é um exemplo de design e renderização. As evidências fornecidas sustentam estados visíveis do canvas WebGL, o tratamento local da resposta ao ponteiro, o redimensionamento e um loop de animação. Elas não verificam serviços conectados, armazenamento, implantação em produção, taxas de quadros medidas nem o modelo original de geração. As três capturas devem, portanto, ser lidas como estados visuais de uma única composição, e não como prova de fluxos de trabalho separados ou de desempenho testado.

Como Adaptar

Para uma nova versão, preserve a relação entre movimento procedural e enquadramento editorial e altere uma variável de cada vez: paleta, escala das ondulações, posição do título ou influência do ponteiro. Mantenha a mudança observável no canvas e descreva o comportamento proposto como proposto, e não como uma capacidade existente.