El arte generativo puede ser un tema intimidante: parece que hay muchas matemáticas involucradas, ¡y el arte es complicado en sí mismo!

Pero no tiene por qué ser difícil: puedes construir algunas cosas realmente geniales sin un título en matemáticas o arte. Esta publicación desglosará qué es el arte generativo y cómo puedes comenzar a construir tu propio arte generativo.

Primero, ¿qué es el arte de código?

El arte de código (Code art) es cualquier arte que se construye usando código. Hay infinidad de ejemplos en CodePen — por ejemplo CSS art.

¿Qué es el arte generativo?

A menudo, el arte generativo se inspira en el arte moderno, especialmente en el arte pop, que hace un uso intensivo de patrones geométricos ordenados.

Sin embargo, es una categoría muy amplia y rica de arte creado con código con una característica central. El arte generativo incorpora un sistema autogobernado o autónomo de alguna manera.

La aleatoriedad es un tipo de sistema autónomo. Al incorporar el azar en una pieza de código, obtienes una pieza de arte diferente y completamente única cada vez que ejecutas tu script, cargas tu página o respondes a alguna interacción del usuario.

También existen sistemas autónomos más ordenados. Un ejemplo es el Fractal de Mandelbrot, derivado de una ecuación engañosamente simple.

¡También podemos integrar ambos enfoques, mezclando orden y caos!

La obra de arte se convierte en una colaboración entre la computadora y el artista. El programador controla algunos aspectos de la obra de arte, pero no todos. El artista controla tanto la aleatoriedad como el orden en el arte.

En cierto modo, con un sistema autónomo, el artista cede el control de su arte y la computadora lo hace por él. Una perspectiva más matizada surge cuando se considera un nuevo proceso creativo.

El codificador-artista se involucra en un circuito de retroalimentación en el que constantemente modifica un sistema para producir resultados más deseables y, a menudo, más sorprendentes.

Este proceso abarca la experimentación y coincidencias de una manera que remodela el papel del artista. Como artistas generativos, usamos los conceptos básicos del código como bucles, flujo de control y funciones especializadas. Luego los combinamos con fuerzas a menudo impredecibles, para producir resultados completamente únicos, diferentes a cualquier otra cosa que exista.

Ejemplos de arte generativo

Kate Compton’s Flowers

Cellular Automata and the Edge of Chaos

Arte generativo animado en multicolor por Phil Nash

Gotas impresionistas de Murasaki Uma

Árbol generado por Miriam Nadler

¿Qué entra en una pieza de arte generativo?

• La aleatoriedad es crucial para crear arte generativo. El arte debe ser diferente cada vez que ejecute el script de generación, por lo que la aleatoriedad suele ser una gran parte de eso.
• Algoritmos: la implementación visual de un algoritmo a menudo puede generar un arte increíble, por ejemplo, el árbol binario anterior.
• Geometría: la mayoría del arte generativo incorpora formas, y las matemáticas de la clase de geometría de la escuela secundaria pueden ayudar en algunos efectos realmente geniales.

¿Cómo abordar una obra de arte generativo?

Hay dos estrategias principales para crear arte generativo, aunque la mayoría se ubicará entre las dos estrategias.

La primera es no tener resultados en mente y ver lo que genera la computadora mientras experimentas.

La segunda es que tienes una idea muy finalizada de cómo quieres que se vea el arte, y la aleatoriedad solo cambia ligeramente el resultado final.

¿Por dónde deberías empezar?

Si sabes JavaScript, p5.js es un excelente lugar para comenzar. Su objetivo es "hacer que la codificación sea accesible para artistas, diseñadores, educadores y principiantes". Es un contenedor en la API de Canvas y simplifica mucho las matemáticas. Se enfoca en el dibujo, pero también puede interactuar con el sonido, el video o la cámara web si estás interesado en esas formas de arte.

Una introducción rápida a P5

Primero, carga en el p5 CDN.  Luego, en tu archivo JavaScript, agrega dos funciones que se usarán en casi todos los scripts de p5: setup y  draw. Estos nombres son necesarios para que p5 los llame.

setup es llamado cuando se inicia el programa. Probablemente, crearás un lienzo para dibujar dentro de él usando la función createCanvas, y puedes establecer algunos valores predeterminados allí. ¡Solo se llama una vez!

draw se llama después de la configuración, y se ejecuta constantemente hasta que llames noLoop, lo que evitará que se ejecute nuevamente.  draw puede controlar cuántas veces se ejecuta la función frameRate.

Con el arte generativo, yo generalmente pongo  noLoop en la función setup, lo que hace que  draw solo se ejecute una vez en lugar de continuamente.

Aquí tienes una plantilla de inicio p5 en CodePen

Ya que hemos hablado tanto sobre la importancia de la aleatoriedad para el arte generativo, otra función importante en p5 es random. Funciona de manera similar a Math.random en JavaScrpit, pero puedes establecer un rango para los números para que no tenga que hacer tantas matemáticas para obtener el número en un formato útil.

Líneas P5

Puedes crear una línea en p5.js como esta:

line(startX, startY, endX, endY)

Luego, puedes generar aleatoriamente un montón de líneas y crear una simple obra de arte generativo como esta:

¡Incluso scripts supersimples pueden generar obras de arte geniales!

Formas P5

También puedes crear formas con p5, como círculos, triángulos y cuadrados.

Aquí hay un ejemplo de cómo crear algunas formas con p5:

// circle ellipse(xCoordinate, yCoordinate, width, height) 

// square rect(xCoordinate, yCoordinate, width, height) 

// triangle triangle(xCoordinate1, yCoordinate1, x2, y2, x3, y3)

¡Luego, podemos crear algunas formas más para construir algo más divertido!

Movimiento P5

Podemos agregar movimiento a nuestros dibujos eliminando la llamada a la función noLoop  en la función de configuración setup  ¡Mira esto!

Color

También puedes jugar con el color con el arte generativo eligiendo colores al azar. Puedes hacer esto matemáticamente a través de valores RGB, o puedes generar una paleta de colores con tu selector de color favorito (hemos estado usando este).

Puedes establecer el color de relleno con la función de  color . Esta toma un montón de formatos diferentes, como colores con nombre, RGBA y códigos hexadecimales.

También puedes cambiar el color del contorno usando  stroke. También puedes eliminar ese contorno usando noStroke o hacer que tenga un ancho diferente con strokeWeight.

Poniéndolo todo junto

Una vez que tengamos todas esas piezas en su lugar, podemos combinar las técnicas para construir algunas cosas realmente geniales.

Otra estrategia: tutoriales de ajuste:

También puedes generar arte generativo realmente genial, tomando el trabajo de otra persona y construyendo a partir de él. Por ejemplo, aquí está el resultado de un tutorial de Dan Shiffman:

Aquí hay dos ajustes para crear diferentes efectos:

¡Aquí hay una colección de Codepen con aún más!

Puedes seguir tutoriales, bifurcar CodePens o proyectos Glitch y crear algo nuevo y único. Solo asegúrate de darle algo de crédito al artista original también.

Ficha de ayuda

Aquí hay una ficha de ayuda con toda la funcionalidad de P5 que usamos para este tutorial.

Ponte en contacto

Esta publicación fue co-escrita con James Reichard. Si creas tu propio arte, ¡asegúrate de enviarnos un Tweet! (Ali and James).

Publicado originalmente en dev.to.