El arte generativo es una forma innovadora de crear obras de arte, que en su totalidad o en parte son generadas por un sistema autónomo, como el código de un programa de computadora.
¡Te invito a aprender cómo crear tus primeras obras de arte generativo usando el lenguaje Processing!.
Como ejemplo de arte generativo con processing, vas a crear un algoritmo que imite las composiciones del pintor neerlandés Piet Mondrian.
Prueba cambiando:
Los valores de las variables.
Círculos, triángulos,.. en lugar de rectángulos.
Distintos colores .
Lumen dice ¿Cómo tiene que quedar?
Aquí puedes ver un ejemplo del resultado que se espera obtener.
2. Transformación de la imagen
Transformaciones en el sistema de coordenadas.
En los siguientes ejemplos copia en el IDE de Processing el código y comprueba el resultado.
Modificalas variables para ver cómo afecta a la visualización.
Translación
Translación
Función
Resultado
translate(x, y)
mueve el origen, el vértice superior izquierdo
pushMatrix()
guarda usando la función translate(x, y)
popMatrix()
recupera la translación guardada con pushMatrix()
En el siguiente ejemplo se puede ver cómo funciona, el mismo rectángulo antes y después de la translación:
Rotación
La function rotate() rota las coordenadas de las superficies un ángulo definido en los parámetros de la rotación.
rotate(ángulo);
El ángulo siempre se refiere al origen (0,0) y debe ser especificado en radianes.
Los valores positivos giran a favor del reloj y los negativos en contra.
El ángulo de rotación es acumulativo.
En el siguiente ejemplo se muestra cómo funciona la función rotación.
Escala
La function scale() se emplea para modificar el tamaño del objeto.
scale(size) --> usaremos un parámetro para escalar el tamaño en todas sus dimensiones. scale(xsize, ysize) --> dos parámetros para escalar en las dos dimensiones.
La escala se expresa en porcentajes, en el siguiente ejemplo se muestra cómo funciona.
Transformaciones combinadas
Estos efectos pueden ser amplificados y combinados usando estructuras FOR para conseguir efectos llamativos.
Una técnica básica consiste en hacer depender la transformación de una variable que cambia con un IF o un ciclo FOR.
Las funciones de transformación como rotar() son aditivas y a medida que cambia la variable se produce la transformación.
También es muy útil utilizar las variables widht y height para centrar la animación.
Vídeo
En el siguiente vídeo puedes ver cómo aplicar y combinar estas transformaciones para conseguir efectos llamativos:
3. Crear Animaciones
Como ya hemos comentado, cada programa tiene solo un setup() y un draw(). Cuando el programa comienza el código fuera de setup y del draw se ejecuta. Después, el código dentro del bloque setup() se ejecuta una vez y por último el código dentro de bloquel draw() se ejecuta repetidamente cada frame hasta que el programa se pare.
Para controlar la animación, se usan las funciones:
Animación
Función
Descripción
frameRate()
Cambia y controla el número de frames por segundo. La velocidad se mide en frames por segundo (fps).
frameCount
La variable frameCount siempre contiene el número de frames recorridos.
noLoop()
Evita que Processing ejecute continuamente el código dentro de draw() . Si se llama a loop(), el código en draw() comienza a ejecutarse continuamente de nuevo. Si usa noLoop() en setup(), debe ser la última línea dentro del bloque.
Si cambiamos los elementos visuales en cada frame, creamos una animación.
En el siguiente ejemplo coloreamos dibujando línea a línea, creando una animación:
Tarea:
Incluye un condicional para reiniciar la variable y que la línea vuelva a 0. Además, cambia la línea por un círculo y el color del mismo para que cambie progresivamente.
Lumen dice Si estás un poco perdido o perdida..
Recuerda que puedes utilizar un IF para el condicional y FILL para el color de relleno que puedes hacer dependiente de la variable.
La velocidad la puedes cambiar variando el frameRate().
Debe quedar algo similar a esta animación:
4. Controlar las transformaciones
Lee las indicaciones y después, copia en siguiente código y practica cambiando los valores de las variables para ver el resultado.
Las funciones push() y pop() permiten un mayor control sobre las transformaciones.
La función push() guarda el sistema de coordenadas actual en la pila y pop() restaura el sistema de coordenadas anterior.
La función map() o de mapeo, se usa para asignar un número de un rango a otro. En el ejemplo a la variable "i" que varía de 1 a 12 se reparte en un nuevo rango que varía de 0 a 255.
Clic para aumentar
5. Completa el código y pruébalo
Visualiza el siguiente vídeo y después completa el código y pruébalo en el IDE de Processing.
