El arte generativo es una técnica en la que el artista crea sistemas, generalmente en forma de algoritmos, que generan obras de arte de forma autónoma. Estos sistemas pueden producir infinitos resultados a partir de un conjunto inicial de reglas, lo que hace que el proceso sea fascinante y lleno de posibilidades. En este artículo nos adentraremos en el mundo del arte generativo utilizando JavaScript y, más concretamente, la popular biblioteca p5.js.

¿Qué es el arte generativo?

El arte generativo se basa en la creación de sistemas que pueden generar un número infinito de variaciones de una obra de arte. Estos sistemas pueden controlarse mediante reglas específicas, algoritmos matemáticos o incluso aleatoriedad. Con cada ejecución del sistema, se puede producir una obra de arte nueva, única y visualmente interesante.

Esta forma de arte está profundamente conectada con la programación, ya que las reglas y el código definen cómo se crean los resultados visuales. Los artistas generativos utilizan algoritmos para definir patrones, colores, formas y movimientos, haciendo de cada obra un proceso de descubrimiento.

¿Por qué JavaScript?

JavaScript es un lenguaje versátil y accesible que se ejecuta directamente en navegadores web, lo que permite la visualización inmediata de resultados de arte generativo. Además, gracias a bibliotecas como p5.js, es posible crear gráficos complejos con sólo unas pocas líneas de código.

p5.js es una biblioteca de JavaScript diseñada específicamente para crear gráficos visuales e interactivos. Su simplicidad lo convierte en una herramienta ideal para comenzar a explorar el arte generativo.

Primeros pasos con p5.js

Configurar el entorno

Para comenzar a crear arte generativo con JavaScript, todo lo que necesitas es un navegador y un editor de código. Puedes usar el editor web p5.js o descargar la biblioteca y agregarla a tu proyecto.

El esqueleto básico de un boceto p5.js

Cada boceto de p5.js está estructurado en dos funciones principales:

• setup(): Esta función se ejecuta una vez al principio. Es donde configuramos el lienzo, los colores y los parámetros iniciales.
• draw(): Esta función se ejecuta repetidamente en un bucle. Aquí colocamos las instrucciones para dibujar y crear los elementos visuales.

Aquí tienes un ejemplo básico:

function setup() {
  createCanvas(800, 800); // Create an 800x800 pixel canvas
  background(255); // White background
}

function draw() {
  noLoop(); // Prevent the draw function from looping
  for (let i = 0; i 



En este boceto básico, creamos un lienzo en blanco y dibujamos 100 círculos con colores aleatorios, cada uno colocado al azar. La belleza del arte generativo radica en la variabilidad de los resultados. Con cada ejecución del código, los círculos aparecerán en diferentes ubicaciones y con diferentes colores.


  
  
  Crear patrones con matemáticas


El arte generativo a menudo combina la aleatoriedad con estructuras matemáticas precisas. Veamos un ejemplo donde generamos un patrón geométrico basado en formas regulares y movimientos cíclicos:



function setup() {
  createCanvas(800, 800);
  background(255);
  noFill();
  stroke(0, 50);
}

function draw() {
  translate(width / 2, height / 2); // Move the origin to the center
  let radius = 300;
  for (let i = 0; i 



En este ejemplo, usamos funciones trigonométricas como cos() y sin() para distribuir 100 círculos alrededor del centro del lienzo en un patrón circular. La belleza de las matemáticas en el arte generativo es que puedes usar ecuaciones simples para crear patrones complejos y sorprendentes.


  
  
  Agregar interactividad


Una de las grandes ventajas de trabajar con JavaScript y p5.js es la facilidad con la que puedes agregar interactividad a tus creaciones. A continuación se muestra un ejemplo donde los colores de un patrón cambian según la posición del mouse:



function setup() {
  createCanvas(800, 800);
}

function draw() {
  background(255);
  let numLines = 50;
  let spacing = width / numLines;

  for (let i = 0; i 



En este boceto, el color de las líneas cambia según la posición del mouse. La interactividad es un componente esencial del arte generativo, ya que permite al espectador influir directamente en la obra de arte.


  
  
  Conclusión


El arte generativo con JavaScript abre un mundo de posibilidades creativas. Usando p5.js, podemos transformar ecuaciones matemáticas, funciones aleatorias e interacciones del usuario en imágenes dinámicas y sorprendentes. Lo mejor es que, gracias a la flexibilidad de este entorno, los resultados son únicos y siempre diferentes en cada ejecución.

Explorar el arte generativo es una excelente manera de combinar programación y creatividad. ¡Experimenta con diferentes formas, colores y patrones para ver hasta dónde puedes llevar tu propia obra de arte generativa!