top of page

Caminos

Un proyecto de arte generativo por Juan Rodríguez García

  • Instagram
  • Twitter

"Caminos" es un proyecto de arte generativo creado para existir en la blockchain de Etherum. Este proyecto es creado para el evento “Bright Moments Mexico City Collection” Generando 1000 piezas de arte únicas mediante un sistema numérico hexadecimal que es creado a partir de la generación de un nuevo token.

 

Este proyecto está constituido por dos líneas principales de trabajo. Por un lado, está la parte técnica y visual, planteada a través de un algoritmo desarrollado durante estos últimos meses y que será descrito en este documento; y por otro lado el esquema conceptual.

 

"Caminos" es la relación del trabajo del artista con el uso de colores y geometría a través de los los patrones, situaciones, personas y objetos en los mercados, las calles, los edificios, los colores y demás elementos que consituyen la ciudad. Esta obra es un tributo a esa cultura, similar a una ciudad que se va creando mediante capas, dando como resultado un caos formado a partir del color, de diversas geometrías y más elementos que van cambiando a través del tiempo.

La composicición final de este proyecto es conformada por 5 capas que van creandose con el paso de los segundos dentro de la obra. Con las teclas 1 - 5 puedes interactuar con cada capa que va generando la composición final dando la posibilidad al usuario de tener 5 piezas dentro de una obra, pero sobre todo generar una experiencia que le permita tomarse el tiempo necesario para explorar, encontrar y disfrutar distintos patrones y elementos dentro de cada capa y dentro de la composición final. Asi como explorar la ciudad, sus distintos espacios, situaciones y cambios con el paso de los años.

Este proyecto de arte generativo es creado con código usando la librería p5.js de JavaScript, creada por Lauren Lee McCarthy.

En términos técnicos, el proyecto plantea un esquema muy sencillo para generar la idea y composición general. Todo el comportamiento de la geometría es creado a partir de una serie de puntos (ya se explicará la ubicación de estos puntos más adelante) afectados por una función de recursión dentro del código.

 

Esta función recibe los datos de ubicación de los puntos iniciales y a través de una función trigonométrica genera una nueva ubicación para ese punto mediante su ubicación anterior, un nuevo ángulo y una distancia entre la ubicación anterior y la nueva. Esto se repetirá en múltiples ocasiones gracias a la función de recursión.

Los datos de los ángulos dentro de la función trigonométrica son otorgados a través de funciones matemáticas de noise mediante la librería “opensimplexnoise.js”.

Los recorridos generados a través de la función de recursión plantean 4 esquemas (retícula, isométrico, curvo, isométrico - curvo, retícula - curvo) en cuanto a su movimiento dentro del canvas, y mediante la combinación de diversos parámetros y variables dentro de la función de noise, permite crear también esquemas que van desordenando el planteamiento inicial.

Retícula

Retícula quebrada

Retícula desordenada

Isométrico

01.PNG
1.png
2.png
3.png

Curvo

curvo2.PNG
4.png
6.png
5.png

Isométrico - curvo

isocome.PNG
7.png
9.png
8.png

Retícula - curvo

combre.PNG
10.png
11.png
12.png

Puntos iniciales

Las imágenes presentadas al igual que el código, representa el esquema general del algoritmo para el proyecto. Estos recorridos creados por la función de recursión son generados a partir de puntos iniciales acomodados de diferentes maneras y se combinan entre sí en la representación final de la obra. 

 

El origen de estos puntos  es generado a partir de una serie de puntos organizados de acuerdo a una serie de esquemas poligonales (4 - 5- 6), donde en mayor medida usa el esquema hexagonal como puntos de partida.

Puntos desde geometría cuadrangular

ca3.png
cua1.png
cua0.png

Puntos desde geometría pentagonal

52.png
53.png
51.png
61.png

Puntos desde geometría hexagonal

63.png
62.png

Elementos combinados

Retícula

Retícula quebrada

Retícula desordenada

Isométrico

iso2.png
iso0.png
iso1.png

Curvo

cur1.png
cur2.png
cur0.png

Isométrico - curvo

idocur1.png
isocur0.png
isovur2.png

Retícula - curvo

retcur2.png
retcur0.png
retcur1.png

Estilo de línea y color

En cuanto al color, la obra utiliza solo una paleta de colores,  sin embargo, lo que lo hace interesante es el uso y la combinación de colores de esa paleta para cada pieza, el grosor y los rellenos de cada geometría.

 

Para las líneas se utiliza una técnica simple de generar la geometría que conforma el esquema visual del proyecto mediante el uso de la recursión para cada punto inicial en tres capas determinadas por los grosores de las líneas que recorren el canvas.

Capa fondo 

La capa del fondo (la de mayor grosor) utiliza dos esquemas para la selección del color. El primer esquema utiliza solo un color aleatorio de la paleta de colores y es usado para todas las líneas que recorren el canvas.

rect0.png
rect1.png
rect2.png

El segundo esquema es una combinación aleatoria de todos los colores de la paleta que es usado para las líneas que recorren el canvas

rect00.png
rect11.png
rect22.png

Capa en medio 

La finalidad de esta capa es generar contraste en el esquema final de la pieza, esta capa siempre utiliza el color negro para resaltar la capa final y las líneas creadas a partir de la función de recursión.

cur2.png
cur0.png
cur1.png
cur0.png
cur1.png
cur2.png

Capa adelante

La capa delantera hace la selección y combinación de color mediante el uso de la función lerp. Esta capa es la final para crear el aspecto visual general del proyecto y es afectada por las mismos parámetros de combinacion de color que los esquemas presentados anteriormente.

cur0.png
cur1.png
cur2.png
cur0.png
cur1.png
cur1.png
cur2.png
cur0.png
cur2.png

Color de relleno en geometrías

Algunas geometrías conservan su color de relleno seleccionado mediante las técnicas de combinación de colores con la función lerp.

No todas las líneas conservan esta propiedad, lo cual genera un aspecto de capas, elementos y geometrías superpuestas dentro de la composición final.

cur2.png
cur0.png
cur1.png
cur0.png
cur1.png
cur2.png
cur2.png
cur1.png
cur0.png

Background

El background está constituido por dos esquemas, ambos utilizan un color aleatorio de la paleta de colores para el fondo de las piezas. El esquema principal mantiene un marco que obtiene otro color aleatorio de la paleta y que interactúa en ciertas ocasiones con el color de las líneas que recorren el canvas. El esquema secundario no utiliza un marco en las composiciones.

Marcos

marcos2.png
marcos0.png
marcos1.png
marcos2.png
marcos1.png
marcos0.png
marcos1.png
marcos2.png
marcos0.png

Las líneas que son creadas a partir de la función de recursión inicial en ocasiones están atrás y otras adelante de los marcos, esto genera una composición donde podemos apreciar elementos contenidos dentro de un espacio pero no del todo, y también los rellenos de las líneas generan una composición con el fondo y los marcos

Fondo sólido

smarco2.png
smarco0.png
smarco1.png
smarco1.png
smarco2.png
smarco2.png
smarco0.png
smarco1.png
smarco0.png

Paleta y uso del color

La obra está consituída por una paleta de 32 colores seleccionada por el artista a través de trabajos previos y 10 modos de combinación y uso del lo color en la paleta. 

Estos 8 modos de color otorgan el color principal a las líneas creada a través de la función de recursión y también al color de relleno en su función de fill.

El modo de color utiliza e interactúa con dos colores principales que son definidos al inicio del programa. Estos dos colores corresponden al color que será utilizado en el fondo final de la pieza y el color del marco.

Color línea: Este modo de color selecciona dos colores de manera aleatoria y a través de una función lerp entre estos dos colores, obtiene el color para las líneas y su fondo.

Color relleno: Este modo realiza la misma seleccion de color para su línea y relleno.

Revuelto

1.png
3.png
2.png

Color línea: En este modo el color de las líneas se obtiene a través de la función de lerp entre el color seleccionado para el marco y un color seleccionado de manera aleatoria.

Color relleno: Este modo de color selecciona dos colores de manera aleatoria y a través de una función lerp entre estos dos colores obtiene el color de relleno.

Marco - revuelto

3.png
2.png
1.png

Color línea: En este modo el color de las líneas se obtiene a través de la función de lerp entre el color seleccionado para el marco y una paleta de grises.

Color relleno: Este modo de color selecciona un color de manera aleatoria y a través de una función lerp entre este color y un color de una paleta de grises obtiene el color de relleno.

Marco  b/n - color extra

1.png
2.png
3.png

Color línea: En este modo el color de las líneas se obtiene a través de la función de lerp entre el color seleccionado para el marco y un color seleccionado de manera aleatoria.

Color relleno: Este modo de color selecciona el color utilizado para el marco y a través de una función lerp entre este color y un color de una paleta de grises obtiene el color de relleno.

Marco  revuelto  - marco b/n

1.png
s3.png
2.png

Color línea: En este modo el color de las líneas se obtiene a través de la función de lerp entre el color seleccionado para el marco y un color seleccionado de manera aleatoria.

Color relleno: Este modo de color selecciona el color utilizado para el fondo y a través de una función lerp entre este color y un color de una paleta de grises obtiene el color de relleno.

Marco  revuelto  - fondo b/n

3.png
2.png
1.png

Color línea: En este modo el color de las líneas se obtiene a través de la función de lerp entre el color seleccionado para el fondo y un color seleccionado de manera aleatoria.

Color relleno: Este modo de color selecciona el color utilizado para el fondo y a través de una función lerp entre este color y un color de una paleta de grises obtiene el color de relleno.

Fondo revuelto  - fondo b/n

2.png
1.png
3.png

Color línea: En este modo el color de las líneas se obtiene a través de la función de lerp entre el color seleccionado para el marco y un color seleccionado de una paleta de grises.

Color relleno: Este modo respeta las mismas reglas para el color de sus líneas y relleno.

Marco b/n - marco b/n

2.png
3.png
1.png

Color línea: En este modo el color de las líneas se obtiene a través de la función de lerp entre el color seleccionado para el marco y un color seleccionado de una paleta de grises.

Color relleno: En este modo el color del relleno se obtiene a través de la función de lerp entre el color seleccionado para el marco y un color seleccionado de manera aleatoria.

Marco b/n - marco revuelto

1.png
2.png
3.png

Color línea: En este modo el color de las líneas se obtiene a través de la función de lerp entre el color seleccionado para el fondo y un color seleccionado de manera aleatoria.

Color relleno: En este modo el color del relleno se obtiene a través de la función de lerp entre el color seleccionado para el fondo y un color seleccionado de la paleta de grises.

Fondo revuelto - fondo b/n

1.png
3.png
2.png

Color línea: En este modo el color de las líneas se obtiene a través de la función de lerp entre el color seleccionado para el fondo y un color seleccionado de la paleta de grises.

Color relleno: En este modo el color del relleno se obtiene a través de la función de lerp entre el color seleccionado para el fondo y un color seleccionado de la paleta de grises.

Fondo b/n - fondo b/n

1.png
2.png
3.png

Interacción

La constitución de la composición final de cada pieza es creada a través de 5 capas que van sobreponiendose una sobre otra con el paso de los segundos. ​Usando las teclas 1 - 5 el usuario puede ir y venir por cada capa que consituye la obra.

1.png
2.png
3.png
4.png
5.png
1.png
1.png
1.png
2.png
3.png
2.png
3.png
2.png
3.png
4.png
4.png
4.png
5.png
5.png
5.png

COMENTARIOS FINALES

Este documento plantea la descripción y explicación del proyecto "Caminos" desde un sentido visual de los conceptos generales que lo componen, el artista plantea que cualquier persona que no tenga ningún conocimiento previo en programación pueda comprender lo que sucede a nivel geométrico y conceptual del proyecto.

BIO

Juan Rodríguez García (@Juanrg92) es un artista generativo, su trabajo explora la relación de conceptos fundamentales del diseño y la programación a través del uso de la tecnología y el código como herramienta de creación y expresión. Imparte clases de código creativo en la Universidad Iberoamericana de Puebla y ha trabajado y colaborado con diversas universidades y centros culturales en Latinoamérica hablando de temas que tienen que ver con código, arte y tecnología.

AGRADECIMIENTOS

Gracias a Seth, Kristi, Stefano, Fed, Liam, Qian y todo el equipo y la comunidad de Bright Moments por creer y apoyar este proyecto y el empuje hacia el arte generativo. A Alida por que sin ella nada de esto hubiera sido posible, pero sobre todo agradezco conocerla y su amistad, así como la de otros increíbles artistas y personas que este proceso me ha permitido conocer. A la comunidad de artistas y personas de processing y p5.js alrededor del mundo.

A mi madre, mis abuelos y toda mi familia por su apoyo incondicional, este proyecto es gracias a todos ustedes.

bottom of page