FACILITA PCD@PORTO 2025

Arte Generativa: Aplicação no Código

Este projeto utiliza arte generativa para criar imagens e texto de maneira dinâmica, gerando resultados únicos a cada execução. Através de técnicas de interpolação, distorção e movimento, a animação desenvolve-se a partir de algoritmos de ruído e manipulação de imagens. O uso da arte generativa permite que cada visualização seja diferente, refletindo a natureza imprevisível e criativa da computação visual.

Processo de Arte Generativa no Código

1. Seleção e Manipulação de Imagens: As imagens carregadas são divididas em seções e alteradas por interpolação e distorções baseadas em ruído. A arte gerada é única em cada execução, pois depende de variáveis como o tempo, a posição e a intensidade das distorções, características centrais da arte generativa.
2. Criação de Texto com Efeitos Glitch: O texto gerado aleatoriamente no canvas também segue um comportamento generativo. Com palavras de temática inspiradora, ele aparece de forma distorcida, com variações na opacidade, tamanho e movimento. O efeito glitch em textos é um exemplo de como a arte generativa pode ser aplicada para criar experiências visuais imersivas.
3. Interatividade e Aleatoriedade: A aleatoriedade no tempo de troca das imagens, a seleção de palavras e o ruído aplicado ao movimento das seções garantem que o produto final seja sempre novo e surpreendente, refletindo o conceito de arte generativa, onde o processo é guiado por regras algorítmicas que geram resultados imprevisíveis.

1. Função easeInOutQuint

Esta função é uma implementação de uma interpolação “ease-in-out” do tipo quint, usada para suavizar a transição entre os dois estados da animação. Ela acelera e desacelera o movimento, criando um efeito mais fluido.

• Como funciona:
  • Se o tempo de interpolação (t) é menor que 0.5, aplica uma aceleração crescente (5º grau de polinômio).
  • Caso contrário, desacelera, voltando ao estado final suavemente.

2. Constantes e Variáveis

• N_ANIM e N_WAIT: Controlam a duração da animação e o tempo de espera entre animações. N_ANIM é o número de quadros para a animação em si, e N_WAIT define quanto tempo a animação espera antes de reiniciar.
• n: Define o tamanho da grade que será usada para dividir as imagens em seções menores. Deve ser um número ímpar para se ajustar à paleta.
• sections1 e sections2: Arrays bidimensionais que armazenam as seções das imagens divididas. Cada imagem é dividida em uma grade de n x n.
• weights1 e weights2: Arrays que armazenam os pesos das seções da imagem, controlando a intensidade da animação.
• imgLinks: Array que contém os links das imagens a serem carregadas.
• words: Lista de palavras inspiradoras usadas para o texto com glitch (efeito de distorção).
• images: Armazena as imagens carregadas que serão usadas na animação.
• nextChangeTime: Armazena o tempo de mudança entre as imagens.
• noiseSeedX e noiseSeedY: Sementes usadas para o efeito de ruído no texto.

3. Função preload

A função preload carrega a fonte necessária para o texto e as imagens a partir de links. As imagens são carregadas de forma assíncrona, com sucesso ou falha sendo registrado no console.

4. Função setup

Configurações iniciais do ambiente de trabalho:

• Cria um canvas de tamanho 1333×2000 pixels.
• Define a inicialização das imagens e a grade de seções.
• Define o intervalo de tempo para a troca de imagens aleatoriamente entre 5 e 30 segundos.
• Inicializa os pesos das imagens com valores padrão e define as sementes para o ruído.

5. Função draw

Esta função é chamada continuamente, atualizando o que é exibido no canvas.

• Troca de Imagens: A cada intervalo de tempo, a função verifica se chegou o momento de trocar as imagens e atualiza a grade de seções.
• Interpolação: A cada quadro, a animação interpola suavemente entre os pesos das imagens, criando uma transição visual fluida.
• Exibição de Imagens: As seções das imagens são misturadas, com uma distorção aplicada por ruído e movimento sinusoidal.
• Texto com Glitch: A função drawGlitchText é chamada para gerar texto distorcido que aparece de forma aleatória em diferentes posições e tamanhos, com efeitos de deslocamento e variação de opacidade.
• Captura de Imagens: A cada 10 segundos, o canvas é salvo como uma imagem PNG com um nome único.

6. Função chooseRandomImages

Escolhe duas imagens aleatórias do array images para serem usadas na animação.

7. Função updateSections

Divida as imagens selecionadas em n x n seções menores. Cada seção é uma parte da imagem que será usada na composição final.

8. Função drawGlitchText

Esta função desenha um texto distorcido na tela com os seguintes efeitos:

• Texto aleatório: Uma palavra aleatória é selecionada da lista words.
• Posição aleatória: O texto aparece em uma posição aleatória no canvas.
• Tamanho e opacidade aleatória: O texto varia em tamanho e opacidade.
• Efeito Glitch: O texto é deslocado com variações de distorção.

9. Função setNewChangeTime

Define o próximo tempo de troca de imagens, variando entre 5 e 30 segundos. Esta função é chamada após cada troca de imagens para garantir que o tempo entre as trocas seja aleatório.

Comportamento Visual e Interação

• Animação das Imagens: As imagens selecionadas passam por uma interpolação suave, com as seções sendo misturadas e exibidas de forma fluida. O movimento da mistura das imagens é enfatizado por distorções sinusoidais e ruído.
• Texto com Glitch: O efeito de glitch no texto adiciona um elemento dinâmico, onde palavras relacionadas à singularidade e ao maravilhamento humano aparecem de forma distorcida, gerando um efeito visual impactante e mutável.

Conclusão

Este código combina arte generativa com animação interativa. Através da interpolação de seções de imagens e a adição de texto distorcido, ele cria uma experiência visual dinâmica que explora a singularidade e a maravilha humana, ao mesmo tempo em que utiliza efeitos avançados como interpolação, distorção, movimento e ruído.