Psychedelic Graphics 0: Introdução

• Uma introdução para criar visuais psicodélicos para animações e jogos, começando por UV e cálculo de cores para que seja possível acompanhar mesmo sem conhecimento prévio
• Para aplicar cor a um modelo 3D, o essencial é entender mapeamento UV/texturização, que conecta uma área de imagem 2D a uma superfície 3D
• Coordenadas UV são dois valores no intervalo de 0.0 a 1.0 que indicam uma posição sobre a textura, e (0.5, 1.0) corresponde ao ponto em 50% na horizontal e 100% na vertical
• Em gráficos, as cores normalmente são representadas por três valores RGB, e ao converter X e Y do UV em vermelho e verde, a variação das coordenadas aparece como um gradiente de cores
• O código de exemplo define a cor com cálculo independente por pixel em uma única superfície 3D que cobre toda a tela, exigindo uma forma de pensar diferente da programação comum

---

Objetivo e premissas da série

• A série Psychedelic Graphics trata de como criar visuais psicodélicos que podem ser usados em animações e jogos
• Não exige conhecimento prévio de gráficos ou programação, mas experiência com trigonometria e programação ajuda na compreensão
• O objetivo é aprender os princípios básicos dos gráficos psicodélicos usados no exemplo em vídeo
• Embora a maior parte do vídeo tenha sido feita com Blender, as técnicas desta série são fáceis de levar para outros ambientes, e o Blender será abordado na part 3
• A parte 0 e a part 1 avançam em direção a exemplos executados na web

Modelos 3D e mapeamento UV

• Um modelo 3D é uma superfície feita de pontos e faces

  • Computação gráfica parece 3D, mas ao escrever código gráfico muitas vezes é preciso pensar em 2D
  • Ao criar um modelo em um programa de edição 3D, o que se faz na prática é criar vértices (vertices), que são pontos flutuando no espaço, e faces (faces), que conectam esses vértices
  • O modelo é uma superfície oca, e o que aparece na tela é apenas essa superfície
  • Quase todas as formas 3D em jogos e animações acabam se reduzindo a esse tipo de pontos e faces
  • Mesmo modelos que parecem suaves muitas vezes só têm pontos e faces em quantidade suficiente para que as bordas fiquem difíceis de perceber

• Texturas são imagens 2D aplicadas à superfície 3D

  • A forma padrão de adicionar cor a uma superfície 3D é usar mapeamento UV/texturização
  • Assim como uma projeção 2D da Terra pode parecer esticada ou distorcida em algumas regiões, uma imagem 2D aberta a partir das cores de um modelo 3D também pode ficar distorcida
  • Essa imagem 2D aberta contém as cores que serão aplicadas depois à superfície do modelo 3D e é a textura (texture)
  • Uma forma de criar uma textura de imagem é começar com um arquivo de imagem vazio e depois definir, para cada face do objeto 3D, qual parte dessa imagem será usada
  • Superfícies 3D diferentes podem compartilhar a mesma área da textura, e é comum em corpos simétricos pintar só um lado e atribuir a mesma região aos dois lados
  • A área da textura usada por cada face não precisa ter o mesmo tamanho nem a mesma proporção da face 3D real

Pintura de textura e coordenadas UV

• Pintar na textura faz aparecer no modelo

  • Tudo o que for pintado na textura será exibido no modelo 3D
  • A maior parte dos softwares oferece um recurso que, ao pintar diretamente no modelo 3D, colore a textura de imagem correspondente

• Coordenadas UV são posições 2D sobre a textura

  • A área da textura reservada para cada face do modelo 3D é o mapa UV, os dados que conectam parte da textura de imagem ao modelo 3D
  • É possível ver UV como uma coordenada 2D que indica uma posição na textura de imagem
  • Cada face 3D é definida por vários pontos, e quando esses pontos são posicionados sobre a textura de imagem, cada ponto passa a ter uma coordenada UV
  • Em (0.5, 1.0), o primeiro valor 0.5 indica o ponto médio no eixo horizontal, e o segundo valor 1.0 indica o topo no eixo vertical
  • Os dois valores UV normalmente ficam entre 0.0 e 1.0, e em geral se usa o espaço de coordenadas dentro do retângulo delimitado por (0, 0) e (1, 1)
  • Usar 0 e 1 em vez da posição em pixels permite expressar em proporção o quanto se andou para os lados e para cima ou para baixo, e multiplicar por 100 ajuda a entender como porcentagem
  • Os nomes reais das duas dimensões são U e V; como X, Y e Z já são usados para posição 3D, usa-se o nome UV

Cor e tipos de dados em gráficos

• RGB representa cor com três valores

  • As cores em computação gráfica normalmente são representadas em RGB, ou seja, vermelho, verde e azul
  • A quantidade de vermelho, verde e azul em uma cor costuma ser um valor entre 0.0 e 1.0
  • Vermelho é representado por (1.0, 0.0, 0.0), preto por (0.0, 0.0, 0.0) e branco por (1.0, 1.0, 1.0)
  • Notações hexadecimais como 0xff0000, usadas em gráficos para web, representam a mesma informação de outra forma

• Ver UV como cor torna as coordenadas visíveis

  • Ao visualizar coordenadas UV, por convenção usa-se o primeiro valor, X, como vermelho, e o segundo, Y, como verde, deixando o azul em 0.0
  • UV (0, 1) vira a cor (0.0, 1.0, 0.0) e aparece como verde
  • UV (1, 0) vira a cor (1.0, 0.0, 0.0) e aparece como vermelho
  • Ao colorir um retângulo de acordo com a posição UV, quanto mais perto do canto superior esquerdo, mais forte fica o verde, e o canto inferior direito fica vermelho
  • O canto inferior esquerdo fica preto porque vermelho e verde são ambos 0, e o canto superior direito fica amarelo porque contém vermelho e verde

• float, vec2, vec3

  • float é um número decimal, isto é, um número de ponto flutuante
  • vec significa vetor; vec2 é um par de números decimais, e vec3 é um conjunto de três números decimais
  • Como uma cor RGB tem três valores — vermelho, verde e azul — ela é representada como vec3
  • Como UV tem dois valores, X e Y, ele corresponde a vec2

Como o código gráfico de exemplo é executado

• Os exemplos de código desta série não usam um modelo 3D separado, e sim uma única superfície 3D ocupando a tela inteira
• Em vez de adicionar cor com uma textura de imagem, o código decide diretamente as cores sobre a textura
• O fluxo de processamento é o seguinte
  • A câmera da cena 3D calcula qual superfície 3D está visível
  • Usa o mapeamento UV reservado para cada face, isto é, o mapeamento UV, para calcular as coordenadas UV
  • Passa ao código as coordenadas UV calculadas e informações como a posição 3D
  • O código determina a cor daquela posição
• É possível entender esse processamento como algo que acontece milhões de vezes por segundo
• O código gráfico não funciona desenhando diretamente uma linha contínua de um ponto da tela até outro, mas de forma mais próxima a responder qual deve ser a cor de cada posição quando ela é selecionada
• O código escrito não é executado uma única vez para produzir a imagem inteira; ele roda para cada pixel, uma pequena parte da tela
• Por causa da limitação de não poder verificar a cor de outras áreas da tela, programação gráfica exige uma forma de pensar diferente, mesmo para quem já tem experiência com programação comum
• Na part 1, a série continua mostrando como criar visuais interessantes mesmo dentro dessas restrições

[GN⁺]

Comentários do Hacker News

• Sou David Tristram. Fui membro fundador do Raster Masters, um grupo de performance de computação gráfica dos anos 1990, e, como @hopkins disse, criávamos imagens sintetizadas em estações de trabalho Silicon Graphics de ponta para acompanhar música ao vivo de artistas como Grateful Dead, Herbie Hancock e Graham Nash
  Depois de várias mudanças, hoje trabalho principalmente em ambientes de processamento de vídeo 2D, como Resolume Avenue e TouchDesigner. Estes links servem de inspiração

  • Fico curioso para saber quem eram os outros membros do Raster Masters e que histórias malucas aconteceram nos shows do Grateful Dead
    Hoje em dia, mesmo só conectar um projetor ao notebook numa apresentação já parece jogar dados para ver se a imagem vai aparecer, então também fico curioso sobre que projetores, calibração e preparação eram necessários na época para colocar vídeo SGI ao vivo em alta resolução nas telas acima da banda
  • Fico curioso se há links para trabalhos que possamos ver
  • Acho que vi trabalhos deles em alguns shows do Dead por volta de 1992

• Se você quer brincar com gráficos psicodélicos sem descer demais ao baixo nível, hydra é uma boa opção. É um ambiente de live coding baseado em JavaScript, com uma curva de aprendizado suave

  • Fico curioso se existe algo que aceite entrada de música. Eu gostava dos plugins de visualização na época do Winamp, mas hoje parece que esse tipo de arte morreu
  • No dwitter.net também há muitos exemplos de gráficos psicodélicos feitos em JavaScript

• Falando do documento original e de coordenadas UV, antigamente explorei bastante formas de deslocar de maneira interessante as coordenadas de textura UV de cada vértice de uma malha retangular
  Na época eu usava cores por vértice; hoje eu usaria um shader de fragmento (pixel), como os do ShaderToy. Uma abordagem especialmente interessante é advectar as coordenadas de textura ao longo de um campo de fluxo (flow field). Basta usar qualquer campo vetorial 2D e aplicar deslocamentos repetidos a cada coordenada. Mesmo métodos explícitos imprecisos já dão bons resultados
  Quando as coordenadas ficam distorcidas demais, a imagem se torna irreconhecível; uma solução simples é aplicar às coordenadas uma força de “restauração” que as puxe de volta para a posição original. Assim elas ricocheteiam de volta ao lugar, como se você estivesse desamassando pedaços de papel-alumínio espelhado
  Hoje uso feedback junto com esses efeitos de deslocamento. Aplicar deslocamentos muito pequenos repetidamente produz um movimento bastante parecido com fluxo de fluidos

  • O melt em PostScript, do Jeremy Huxtable, funcionava do mesmo jeito. Ele foi quem criou os “Big Brother” Eyes do NeWS, que inspiraram o XEyes
    Ao escolher retângulos aleatórios e copiá-los com offsets aleatórios repetidamente, um efeito muito digital, quadrado e duro também se transforma, por meio de um pouco de aleatoriedade (dithering), em algo suave e orgânico. Funcionava bem até em preto e branco e, no fim das contas, era apenas PostScript
    https://www.donhopkins.com/home/archive/news-tape/fun/melt/m...
    Também há o eye.ps original do Jeremy, “Big Brother”. Era uma demo clássica que mostrava uma janela de olho redondo do NeWS
    https://www.donhopkins.com/home/archive/news-tape/fun/eye/ey...
  • Isso me lembra a diversão simples e de manipulação direta do Kai Power Goo
    LGR: Kai's Power Goo – Classic 90s Funware for PC!
    https://www.youtube.com/watch?v=xt06OSIQ0PE

• Gosto do fato de ser fácil usar shaders que funcionam em imagens no HTML. Minha habilidade nessa área é mediana, mas é divertido ver até onde as pessoas conseguem levar isso
  Só fornecer uma aproximação simples de mapa de profundidade já deixa o resultado muito mais interessante. Alguns anos atrás fiz um projeto semelhante, usando uma técnica parecida para fazer crossfade suave entre imagens com “efeitos interessantes”, e há um texto e uma demo
  https://sheep.horse/2017/9/crossfading_photos_with_webgl_-_b...

• Sinceramente, o artigo Rolling Hills que acompanha este texto é muito mais interessante
  Em especial, achei impressionante a parte, mais ou menos no meio, em que o código abaixo é aplicado a uma imagem estática
  uv.x = uv.x + sin(time + uv.x * 30.0) * 0.02;
uv.y = uv.y + sin(time + uv.y * 30.0) * 0.02;
  Como alguém que já teve várias experiências psicodélicas, isso parece o mais próximo da experiência visual real, ao menos em doses baixas e não heroicas. Acho que ficaria ainda mais parecido se as ondas fossem um pouco mais lentas e a amplitude do movimento fosse ligeiramente reduzida
  Tenho mais interesse em reproduzir alucinações visuais induzidas por substâncias psicodélicas do que em efeitos visuais legais para shows. Claro, respeito os artistas dos dois lados
  Existe um artista que cria vídeos psicodélicos excelentes com ferramentas modernas, mas não consigo lembrar o nome da conta de jeito nenhum. Se eu encontrar, deixo abaixo
  Comparando com essa parte do artigo Rolling Hills, lembro da cena do chá de cogumelos em Midsommar, especialmente a cena da casca da árvore. O efeito de as coisas “respirarem” e fluírem é uma experiência visual realmente única, e é bom ver isso implementado de várias formas

  • Talvez não seja a conta mencionada, mas este canal do YouTube reproduz bem a experiência visual e também aborda outros efeitos
    Os vídeos de observar a natureza, a forma como padrões geométricos começam a se formar e o efeito de “respiração” são fortes. Ele cobre várias substâncias e mostra uma faixa ampla, desde superfícies respirando ou pulsando levemente até “mundos” geométricos completos, como os produzidos por substâncias como DMT
    https://www.youtube.com/@josikinz

• No início dos anos 90, Todd Rundgren lançou o app para Mac Flowfazer. Ele não simulava a experiência, mas ajudava a manter o fluxo desviando a atenção para outra coisa
  Algumas pessoas também o usavam como guia para suas próprias criações
  [1] https://grokware.com/
  [2] https://m.youtube.com/watch?v=3Z4X4FmIhIw
  Aquela era a era dos protetores de tela e da animação de paleta

• Se você gosta desse tipo de coisa e tiver a chance de ver a Fractaled Visions cuidando dos visuais em um show do músico Tipper, vai ser uma experiência incrível
  Foi a representação visual mais precisa de artefatos psicodélicos que já vi. Assisti a um show deles juntos no ano passado, e foi a melhor experiência artística da minha vida. Os visuais da Fractaled Visions tinham uma riqueza e complexidade quase inacreditáveis
  Mesmo sabendo bastante de programação de shaders e afins, alguns efeitos me fizeram pensar: “como diabos fizeram isso?”. O vídeo do set abaixo não captura completamente a experiência, mas transmite a vibe. Ver em 4K a 60 fps foi um nível totalmente diferente
  https://youtu.be/qMcqw12-eSk?si=R5mCaIbR01w3Tbyv

• Falta aqui um link para o ShaderToy: https://www.shadertoy.com

• Isso me lembra o antigo clássico em Flash dessa área, Flashback.swf. Uma renderização em vídeo está aqui: https://m.youtube.com/watch?v=KaSqrx93rS0

  • Foi graças a esse vídeo, na época do Flash, que conheci o grupo de música eletrônica Shpongle
    Essa animação usava um remix de Divine Moments of Truth, provavelmente a versão “Russian Bootleg”. Eu já ouvia música eletrônica antes, mas quando ouvi esse gênero de eletrônica pela primeira vez, foi realmente de explodir a cabeça

• Nesta semana, enquanto trabalhava, escrevi shaders WebGL e fiquei ajustando detalhes para parecerem efeitos de uma câmera física
  Mas, às vezes, quando faço algo errado, o resultado sai parecido com o que aparece neste texto e, sinceramente, é muito mais divertido do que efeitos de imagem padrão
  Os usos visuais podem ser limitados, mas brincar com os modelos que criamos para entender como a computação gráfica funciona é uma ótima forma de aprender cada sistema. Dá para aprender não só gráficos, mas também a matemática básica da programação, como a GPU funciona e se conecta à memória e à CPU, como os olhos funcionam, e como lidar com animação e tempo