Diseñar con código

Programación p5.js para el diseño y las artes

Arte Versionado

El objetivo del reto era reinterpretar una obra de un artista cuyo nombre comenzara con la misma inicial que el mío.

Escogí a Alphonse Mucha, una figura clave del Art Nouveau, y reinterpreté uno de sus retratos femeninos más icónicos.

El ejercicio debía realizarse íntegramente en p5.js utilizando formas básicas, curvas y coordenadas, con una paleta máxima de tres colores más variaciones de transparencia.

También integré funciones como arc(), vertex() y curveVertex(), así como un sistema de capas simple para estructurar la ilustración.

La parte más interesante del proceso fue traducir la estética ornamental de Mucha, a un lenguaje geométrico, plano y digital.

Este proyecto me permitió combinar dibujo, diseño y programación, trabajando la precisión mediante coordenadas y la ilustración generativa.

Obra original (Referencia)

Alphonse Mucha – Zodiac. Dominio público
Imagen usada exclusivamente con fines educativos para una reinterpretación no comercial.

Mi reinterpretación en p5.js

Proceso

Elección de la paleta (3 colores + variaciones tonales).

Boceto inicial para definir las proporciones.

Construcción del rostro y el cabello mediante formas básicas.

Uso de círculos y arcos para recrear los motivos ornamentales.

Simplificación del diseño original para adaptarlo a un estilo más geométrico.

Arte interactivo

Funcionalidades implementadas

Slider de color del fondo
Permite modificar el tono del fondo recorriendo todo el espectro cromático.

Movimiento de los círculos zodiacales
Los círculos que rodean la figura pueden desplazarse con las flechas del teclado, aportando dinamismo.

Interacción con el ratón
El arco principal cambia de color según la posición del ratón en el eje Y.

Uso de dist()
La decoración derecha del arco reacciona al acercamiento del ratón, destacando esa zona con colores más vivos.

Funciones propias
Creé funciones específicas para dibujar las hojas y las estrellas, optimizando y ordenando el código.

Escalado con map()
El tamaño de los círculos interiores del zodiaco varía según la posición del ratón en el eje X.

Cambio de cursor
Utilicé cursor() para modificar la apariencia del puntero al entrar en el arco principal.

Cambio de color con el teclado
Al pulsar la tecla “C”, los labios se tiñen de rojo temporalmente mediante estructuras condicionales.

RESULTADO FINAL