Expe­rimen­tos Visuais com Código: Generativo

Conceitos

Apesar do uso do termo generativo ser mais amplamente utilizado nos dias atuais, o termo mais adequado seria gerativo vindo da palavra gerar. Para facilitar futuras pesquisas e ficar em consonância com as referências apresentadas, por enquanto utilizarei o termo generativo.

Definição

O que faz um trabalho ser generativo e o que é arte/música/design/etc generativo?

“Arte generativa se refere a qualquer prática artística na qual o artista usa um sistema, […] que é colocado em movimento com algum grau de autonomia, contribuindo para ou resultando em um trabalho completo de arte.” — Philip Galanter

A partir dessa definição é possível traçar algumas características para construirmos um trabalho generativo:

1. Sistema

É preciso criar um sistema – que a grosso modo é um conjunto de elementos ou regras que estabelecem uma relação entre si — e esse sistema pode ser de diversas naturezas: um conjunto de regras em linguagem natural, um programa de computador, uma máquina, entre outras possibilidades.

2. Autonomia

O sistema criado precisa ter uma certa autonomia em relação a quem o criou, ou seja, algumas ou todas as decisões de funcionamento deste devem estar sobre o controle do próprio sistema.

3. Variabilidade

O resultado ou funcionamento desse sistema deve apresentar variações toda vez que for posto em execução.

Sendo assim qualquer trabalho que apresente esses elementos podem ser definidos como generativo, independente do meio utilizado ou aplicação.

Estudos de caso

Wall Drawings de Sol LeWitt

Série de trabalhos do artista plástico Sol LeWitt em que ele propõe a partir de uma lista de instruções desenhos para serem feitos diretamente nas paredes da galeria ao invés de mandar uma obra ou ele mesmo fazer uma pintura. Algumas instruções apresentavam uma abertura para gerar resultados diferentes, como por exemplo: deixar que o executor da obra escolha um determinado módulo para desenhar ou utilizar regras com elementos manuais.

Uma pessoa de costa para a foto desenhando linhas coloridas consecutivas em uma parade branca. Ela está executando o WALL DRAWING 797 de Sol LeWitt.
WALL DRAWING 797 de Sol LeWitt sendo executada. Fonte Massmoca.
Uma serie de linhas tortas desenhadas uma na sequência da outra, cada linha acompanha o desenho da linha anterior. Cada linha tem uma cor: azul, amarelo e vermelho.
WALL DRAWING 797: Com uma caneta desenhar uma linha preta e irregular no topo da parede. Depois uma outra pessoa tenta copiar o desenho anterior (sem toca-la) usando uma caneta vermelha. Uma terceira pessoa faz a mesma coisa usando uma caneta amarela. A quarta pessoa faz o mesmo utilizando uma caneta azul. Segue-se repetindo esta lógica a partir da segunda pessoa até chegar a base da parede. Fonte Massmoca.
Módulos do WALL DRAWING 122, o texto azul em cima da folha com descrição dos módulos e abaixo uma série de módulos também desenhados em azul.
Módulos usados no WALL DRAWING 122, traduzindo para português: 'Todas as combinações de duas linhas se cruzando arranjadas aleatoriamente usando arcos a partir dos cantos, arcos a partir dos lados, linhas retas, linhas tortas e tracejadas. Fonte Massmoca.
Paredes de uma galeria com o WALL DRAWING 122, é visto vários módulos quadrados, cada módulo possui 2 linhas que variam entre algumas possibilidades como linhas retas, tracejadas, curvas ou tortas. As linhas são desenhadas em azul sobre parede branca.
Exemplo da aplicação das instruções de WALL DRAWING 122. Fonte Massmoca.

Desenho() de Alexandre Villares

Nessse trabalho o artista visual Alexandre Villares cria uma publicação impressa generativa, onde cada vez que ele executa o código é gerada uma nova publicação. O código para criar os próprios desenhos da publicação fazem parte da arte final.

Paredes de uma galeria com o WALL DRAWING 122, é visto vários módulos quadrados, cada módulo possui 2 linhas que variam entre algumas possibilidades como linhas retas, tracejadas, curvas ou tortas. As linhas são desenhadas em azul sobre parede branca.
Algumas possibilidades da publicação Desenho(). Fonte Alexandre Villares.

Plotagens Contrast (Monica Rizzolli & Tony de Marco)

Contrast é o nome da parceria entre Monica Rizzolli e Tony de Marco, onde eles criam diversas artes que misturam conceitos computacionais, ilustração e tipografia para produzir em série peças únicas. Destaco aqui a série de desenhos feitos com plotter de caneta.

Desenho feito com plotter de caneta em preto sobre papel branco. 4 conjuntos aparecem na folha: desenho que lembra raizes; linhas grossas e retas que se assemelham a um labirinto; 2 figuras iguais feitas com formas geométricas simples que se assemelham a um pássaro; e uma linha continua que se emaranha.
Desenhos em plotter de caneta por Contrast. Fonte: Contrast.
Desenho feito com plotter de caneta. Uma grande área da folha é ocupada por uma mancha preta com alguns pontos quadrados e linhas brancas em seu interior, uma figura de forma geométrica parecida com urso está ao lado da mancha. O desenho é feito em preto sobre branco.
Desenhos em plotter de caneta por Contrast. Fonte: Contrast.
Desenho feito com plotter de caneta em preto sobre papel branco. A partir de módulos circulares uma figura é desenhada a partir do centro da folha, o desenho é todo linear e alguns módulos apresentam um preenchimento preto.
Desenhos em plotter de caneta por Contrast. Fonte: Contrast.

Projeto U+2194

Trabalho pessoal desenvolvido durante a graduação. Nesse projeto para entender as contribuições de trabalhos experimentais no aprendizado de desenvolvimento de tipos, criamos um protótipo de sistema de fontes generativas.

Vídeo resumo com todas as entregas realizadas durante o trabalho.

Todo a documentação do projeto esta no Github: https://github.com/guilhermesv/TCC-ProjetoU2194

Este trabalho foi desenvolvido com Caio Grabalos, Eder Felix, Giuliana Menezes, Gustavo Kone, Jéssica Breda e Thiago Correia

Recortes

Publicação impressa criada com colagens generativas. O código produz duas variantes de arte que são combinadas para criar as imagens: grades de elementos lineares e recortes de fotos. As geradas no código são impressas, recortadas em formatos variados e inseridas em um saco plástico. Cada publicação possui um arranjo único de recortes.

Animação com várias composições abstratas aparecendo em sequência. As composições são feitas com pedaços de fotografias e elementos lineares geométricos. O fundo da cada composição varia entre azul, preto e vermelho.
Exemplo das composições gerada para a publicação Recortes antes de serem recortadas. Mais informações
Pedaços de papéis de diversos tamanhos estão dentro de uma saco plástico transparente. Cada papel possui impresso uma arte feita com elementos lineares geométricos, e recortes fotográficos. Predomina as cores azul, vermelho e amarelo. Um papel azul claro contém informações básicas sobre a publicação: título, e-mail da editora, ano de publicação e Qrcode para o código da publicação.
Exemplo de conjunto de impressos da publicação Recortes. Mais informações
Todos os papéis que estavam dentro do saco plástico da publicação empilhados criando uma composição truncada de formas geométricas, recortes fotográficos, desenhos de linhas brancas. As fotos são sempre em preto e branco e as linhas brancas, aplicadas sobre fundos coloridos.
Exemplo de conjunto de impressos da publicação Recortes. Mais informações

Demons­tra­ções

Arquivos criados durante ou para demonstração nas aulas práticas.

Acessar download dos arquivos

Exercícios

Exercício 01

Adicionar alguma aleatoriedade para os exercícios desenvolvidos na aula anterior.

Losangos, círculos e estrelas nas cores laranja, verde e azul respectivamente sobre um fundo azul aparecem intercalados de maneira aleatória.
Exemplo de resolução: Foi acrescentado variações de tamanho e quantidade de elementos no padrão desenvolvido na primeira aula.

Exercício 02

Criar uma arte generativa utilizando:

  • Pelo menos 2 nós apresentados durante esta aula;
  • Acrescentar um novo nó que não foi citado nas aulas.
O verso 'O saci pererê vai dançar de uma perna só' aparece composto com as letras distorcidas e rotacionadas sobre um fundo preto, as palavras são pintadas de azul e branco de forma intercalada.
Exemplo de resolução: Utilizando o nó para criação de texto, criei uma composição tipográfica que distorce e rotaciona as letras das palavras de forma aleatória.

Desafio:

O projeto Recode propõe para comunidade de artista computacionais e interessados na área recriar artes computacionais em uma linguagem de programação mais contemporânea (Processing).

Inspirado por esse projeto a proposta deste desafio é recriar algumas das artes abaixo:

Azulejos Athos Bulcão

Parede de azulejos branco com grafismos azuis. Cada azulejo possui um desenho de triangulo ou retangulo e são colocados de forma aleatória gerando uma composição sem padrão aparente.
Azulejos de Athos Bulcão. Fonte: Vogue

Steven Cullinane, Diamond Theory de 1977

Uma serie de desenhos feitos a partir de triângulos rotacionados organizados em 9 colunas e 8 linhas. Os desenhos tem individuais tem a mesma altura e largura e os triangulas que os compões são organizados de maneira simétrica, o que aparece do lado esquerdo aparece do lado direito e o que aparece em cima, aparece em baixo, porém sempre refletido.
Steven Cullinane, Diamond Theory de 1977. Fonte: Computer Graphics and Art

Arte exemplo do NodeBox 3

3 formas abstratas são desenhadas conectando alguns pontos de uma malha de 5 por 5. Cada uma dessas formas são preenchidas com uma cor: azul escuro, azul claro e branco.
Arte de exemplo na página de sobre na site oficial do NodeBox 3. Fonte: NodeBox 3

Dicas

  • Olhe para a arte e tente abstrair quais os elementos essenciais e suas relações;
  • Decomponha a arte em etapas para serem desenhadas;
  • Quando tiver os elementos principais construídos, acrescente aleatoriedade;
  • Nas minhas soluções, precisei utilizar subnetworks na reprodução da arte do Steven Cullinane e do site do NodeBox. Na documentação do NodeBox tem um execelente tutorial, acesse neste link.

Resolução dos exercícios

Todas as sugestões de resoluções dos exercícios e desafio podem ser baixadas no link abaixo:

Acessar download dos arquivos

Dúvidas, de como baixar o arquivo do GitHub? Clique aqui