Escrito por: Ali Spittel

A arte gerativa (também conhecida como arte generativa) pode ser um tópico intimidante – parece que há muita matemática envolvida– sem contar que a arte é complicada em si mesma!

Ela, porém, não precisa ser difícil – você pode criar algumas coisas muito legais sem ter um diploma de matemática ou de arte. Este artigo vai detalhar o que é arte gerativa e como você pode começar a criar sua própria arte generativa.

Primeiro, o que é a code art?

Code art é qualquer tipo de arte criada usando código. Existem infinitos exemplos no CodePen — um exemplo é a arte em CSS.

O que é a arte gerativa?

Muitas vezes, a arte gerativa se inspira na arte moderna, especialmente na arte pop que faz uso pesado de padrões geométricos ordenados.

No entanto, é uma categoria muito ampla e rica de arte criada com código com uma característica central. A arte gerativa incorpora um sistema autogovernado ou autônomo de algum modo.

A aleatoriedade é um tipo de sistema autônomo. Ao incorporar o acaso em uma peça de arte de código, você obtém uma peça de arte diferente e completamente única cada vez que executa seu script, carrega sua página ou responde a alguma interação do usuário.

Existem, também, sistemas autônomos mais ordenados. Um exemplo é o fractal de Mandelbrot, derivado de uma equação enganosamente simples.

Também podemos integrar ambas as abordagens, misturando ordem e caos!

A obra torna-se uma colaboração entre o computador e o artista. Alguns aspectos do trabalho artístico são controlados pelo codificador, mas não todos. O artista controla tanto a aleatoriedade quanto a ordem na arte.

De certo modo, com um sistema autônomo, o artista abre mão do controle sobre sua arte – o computador faz isso por ele. Uma perspectiva de nuances diferentes surge quando um novo processo criativo é considerado.

O codificador-artista se envolve em um ciclo de feedback onde ele está constantemente ajustando um sistema para produzir resultados mais desejáveis e muitas vezes mais surpreendentes.

Esse processo abraça a experimentação e "acertos" do acaso de um modo que remodela o papel do artista. Como artistas gerativos, usamos os conceitos básicos de código como laços, fluxo de controle e funções especializadas. Em seguida, nós os misturamos a forças, muitas vezes imprevisíveis, para produzir resultados completamente únicos, diferentes de qualquer outra coisa existente.

Exemplos de arte gerativa

As flores, de Kate Compton

Cellular Automata and the Edge of Chaos

Arte gerativa animada multicolorida, de Phil Nash

Blobs impressionistas, de Murasaki Uma

Árvore gerada, de Miriam Nadler

O que vai em uma obra de arte gerativa?

• A aleatoriedade é crucial para criar arte gerativa. A arte deve ser diferente cada vez que você executa o script de geração. A aleatoriedade, portanto, é, na maioria das vezes, grande parte disso.
• Algoritmos — implementar um algoritmo visualmente, muitas vezes, pode gerar artes incríveis, como, por exemplo, a árvore binária acima.
• Geometria — A maioria das artes gerativas incorpora formas. A matemática da aula de geometria do ensino médio pode ajudar a criar alguns efeitos muito legais.

Como abordar uma obra de arte gerativa?

Existem duas estratégias principais para criar arte gerativa, embora a maioria seja um meio termo entre as duas estratégias.

A primeira é não ter resultados em mente e ver o que o computador gera enquanto você brinca.

A segunda é ter uma ideia muito finalizada de como você quer que a arte se pareça, e deixar que a aleatoriedade mude apenas um pouco o resultado.

Por onde começar?

Se você conhece JavaScript, a biblioteca p5.js é um ótimo lugar para se começar. Seu objetivo é "tornar a programação acessível para artistas, designers, educadores e iniciantes". É um wrapper da Canvas API, simplificando bastante a matemática envolvida. Ela tem como foco o desenho, mas você também pode fazer interações de som, vídeo ou de webcams com ele, se estiver interessado nessas formas de arte!

Uma rápida introdução ao P5

Primeiramente, carregue a CDN do p5. Depois, no arquivo do JavaScript, adicione duas funções que serão usadas em quase todos os scripts do p5: setup e draw. Esses nomes são necessários e o p5 os chamará.

setup é chamada quando o programa é iniciado. Você, provavelmente, criará uma tela para desenhar nela usando a função createCanvas. Você também pode definir alguns padrões aqui. Essa função é chamada somente desta vez!

draw é chamada após a chamada de setup, sendo executada constantemente, até que você chame noLoop, o que evitará que ela seja executada novamente. Você pode controlar quantas vezes draw é executada a cada segundo com a função frameRate.

Para a arte gerativa, eu geralmente coloco noLoop na função setup, o que faz com que draw seja executada apenas uma vez, não constantemente.

Aqui temos um exemplo de template de início do p5 starter no CodePen.

Como falamos tanto sobre a importância da aleatoriedade para a arte gerativa, outra função importante no p5 é a random. Ela funciona de modo semelhante à função Math.random do JavaScript, mas você pode definir um intervalo para os números para não precisar fazer tanta matemática para obter o número em um formato útil.

Linhas no p5

Você pode criar uma linha no p5.js assim:

line(startX, startY, endX, endY)

Então, você pode gerar algumas linhas aleatoriamente e criar uma obra de arte gerativa assim:

Até mesmo exemplos simples de scripts podem gerar obras de arte muito legais!

Formas no p5

Também é possível criar formas no p5 — como círculos, triângulos e quadrados.

Aqui temos exemplos de como criar formas com o p5:

// círculo
ellipse(xCoordinate, yCoordinate, width, height);

// quadrado
rect(xCoordinate, yCoordinate, width, height);

// triângulo
triangle(xCoordinate1, yCoordinate1, x2, y2, x3, y3);

Depois, podemos criar mais formas para gerar algo mais divertido!

Movimento no p5

Podemos adicionar movimento aos nossos desenhos removendo a função noLoop da função setup — confira!

Cores

Você também pode brincar com a cor com a arte generativa escolhendo cores aleatoriamente. Você pode fazer isso matematicamente por meio de valores RGB ou pode gerar uma paleta de cores com seu seletor de cores favorito (estamos usando este).

Você pode definir a cor de preenchimento com a função color. Ela recebe muitos formatos diferentes, como nomes de cores, RGBAs e código hexadecimal.

Você também pode alterar a cor do contorno usando stroke. Também é possível remover essa estrutura de tópicos usando noStroke ou deixá-la com uma largura diferente, com strokeWeight.

Juntando tudo

Uma vez que tenhamos todas essas peças no lugar, podemos combinar as técnicas para criar algumas coisas muito legais.

Outra estratégia: ajustar tutoriais

Você também pode criar arte gerativa muito legal pegando o trabalho de outra pessoa e construindo a partir dele. Por exemplo, aqui está o resultado de um tutorial de Dan Shiffman:

Aqui estão dois ajustes dele usando efeitos diferentes na criação:

Aqui você vê uma coleção do Codepen com muito mais!

Você pode seguir tutoriais, fazer o fork de projetos do CodePen ou de projetos do Glitch e criar algo novo e exclusivo. Não se esqueça, porém, de dar o crédito ao artista original.

Ficha informativa

Aqui você tem uma ficha informativa com todas as funcionalidades do P5 que usamos neste tutorial.

Saiba mais

• Generative Artistry
• Coding Train
• Talk, de Tim Holman

Sobre os autores

Este artigo foi escrito em conjunto com James Reichard. Caso você crie sua própria arte, não se esqueça de nos enviar um Tweet sobre ela! (Ali e James).

Publicação original em dev.to.