Identidad Generativa con Processing

Escuela de Verano Arte Diez

Junio 2019

Julían Pérez

info@julian-perez.com

BIO

Artista visual interesado en cómo nos relacionamos con los nuevos medios e Internet.

 

Participo activamente en proyectos que promuevan la Cultura Libre de manera colaborativa y trabajo con proyectos y comunidades que giran en torno a los datos como material artístico, la programación creativa, narrativas digitales y tecnologías del directo.

Estructura del taller

  • Identidad Generativa
    • Definición, Contexto, Herramientas, Ejemplos
  • Processing
    • Qué es?, Introducción, Consejos, Recursos
  • Prácticas
    • ​Calentando motores
    • Retículas
    • PVectors
    • Tipografía
  • Cierre: Ideas para una id. generativa

Identidad Generativa

Dinámica

Procedural

Arte generativo

Automatizado

Único

Flexible

Computacional

Variaciones

Código

Algorítmico

Sistema

Método

Herramienta

?

Evolutivo

Id. Generativa - Definición

Una identidad generativa es una identidad visual que evoluciona.
La evolución se acciona por un bucle de retroalimentación que modifica la identidad visual existente. Las modificaciones se pueden realizar por la influencia de una fuente externa o un diseñador

- "Sistemas visuales en identidades dinámicas", pag.238. Martin Lorenz

Id. Generativa - Contexto

Arte Computacional - finales 50's

Desmond Paul Henry

Picture by Drawing Machine 1, c. 1960

  • Acceso limitado a los ordenadores: departamientos de investigación científica en universidades, ejército, ...
  • Ordenador como herramienta creativa

"Schotter (Gravel)" de Georg Nees. 1968

Id. Generativa - Contexto

  • Sistema autónomo no-humano que responde a una serie de reglas definidas por el/la artista
  • No sólo son obras realizadas por ordenador, también pueden ser sistemas químicos, mecánicos, biologicos, etc.

"Path" de Casey Reas. 2001

"(Dés)Ordres" de Vera Molnár. 1974

Id. Generativa - Contexto

  • Proceso iterativo que implica un programa que genera un cierto número de resultados que cumplen con ciertas restricciones
  • Resultados: imágenes, sonidos, mod. arquitectónicos, animación, etc
  • Herramientas + accesibles y herramientas que toman el dis. generativo como punto de partida.

Id. Generativa - Contexto

Identidad Visual Flexible - ??

"Una gran cantidad de estudios y consultoras de diseño gráfico empiezan a abandonar la idea del logo como pieza central de la identidad visual y comienzan a dedicarse al desarrollo de sistemas visuales que controlen dichas identidades" - Martin Lorenz

Cliente: AOL

 Diseño: Wolff Olins 

Cliente: City of Melbourne

 Diseño: Landor

Id. Generativa - Contexto

Otras influencias

  • Diseño paramétrico
  • Arte Óptico
  • Arte minimalista, conceptual
  • Arte abstracto
  • Visualización de datos

WallDrawing #118 de Sol Lewitt. 1971

Instrucciones para operarios de la pintura mural

Id. Generativa - Herramientas

Id. Generativa - Ejemplos

MIT MEDIA LAB - 2011

Studio TheGreenEyl en colaboración con

Richard The & E Rook Kang

Id. Generativa - Ejemplos

MIT MEDIA LAB - 2014

Michael Bierut - Pentagram

Id. Generativa - Ejemplos

BROADGATE - 2018

dn&co

Id. Generativa - Ejemplos

LoveBytes. Faces - 2007

Universal Everything

en colab. Karsten Schmidt

Id. Generativa - Ejemplos

AIA Heritage Ball 2015

Natasha Jen - Pentagram

Processing

  • Herramienta orientada a enseñar a programar en un contexto visual a usuarixs no programadores en el ámbito de las artes visuales, diseño gráfico, arquitectura, etc.
  • Librería gráfica e IDE
  • Software Libre
  • Basado en Java
  • Precursor de Arduino, Fritzing, p5js
  • Creadores: Ben Fry & Casey Reas. 2001
  • Processing Foundation
  • Comunidad

Introducción a Processing

IDE (Entorno de Desarrollo Integrado)

El IDE transforma nuestro código a lenguaje máquina: ceros y unos

 

A esto se le llama "compilar"

Introducción a Processing

Píxels

Unidad mínima homogénea de color que forma parte de una imagen digital en pantalla.

 

En processing es un elemento con el que trabajaremos constantemente. Por ejemplo para definir el tamaño de nuestro canvas (lienzo) lo hacemos con la función size();

size(720,480);

Introducción a Processing

Colores

Se expresan por combinación de tres canales con valores de 0 a 255 (RGB) o de 0 a 100 (HSB).

 

Escala de grises un sólo canal de 0 a 255.

 

Se puede utilizar alpha como segundo valor en escala de grises o cuarto en RGB y va de 0 a 100.

fill(255,255,0,50);

Introducción a Processing

Coordenadas

width

height

Introducción a Processing

Formas

rect(150,75);
fill(255,0,0);
stroke(255);
strokeWeight(2);
triangle(30, 75, 58, 20, 86, 75);
ellipse(30, 75, 50,50);

Introducción a Processing

Tipos de datos (más comunes)

int x = 0;
float velocidad = 90.58;
boolean encendido = false;
char caracter1 = 'a';
String frase1 = "ola k ase";
egg huevo = 0;

Introducción a Processing

println();

String s = "The size is ";
int w = 1920;
int h = 1080;
println(s);
println(w, "x", h);

 

Salida en el área de consola:
The size is
1920 x 1080

Útil para saber en todo momento que valores están devolviendo nuestras variables. También para comprobar si una función se está ejecuntando

Consejos

  • Interiorizar bien cada paso. Si tienes dudas mejor preguntar y que quede claro
  • Intenta averiguar porqué tu código no funciona. Revisa la consola de errores.
  • Acuérdate de terminar cada línea con ";" y de cerrar las llaves "{}" "[]" y los paréntesis "()"
  • Anota tus propios comentarios (//aquíTuComentario) en el código para que te aclares tú mismo
  • Si una función no la entiendes siempre puedes acudir al manual de referencia
  • Apunta tus ideas para una id. generativa durante el taller

Recursos de introducción

Calentando motores!!!

  • line, rect, ellipse
  • PGraphics
  • random vs noise
  • condicional if
  • bucle for

Práctica_01: Retículas

Práctica_01: Retículas

Práctica_01: Retículas

  • definir la forma a repetir
  • bucle for para crear matriz 2D
  • variar la posición o estilo por cada iteración:
    • random array[]
    • ó con switch(){case 0:... case 1:....}

Práctica_01: Retículas

Bucle for

for(init; check; update){

          statement;

}

for(int i = 0; i <width; i = i+5){

          line(i, 0, i, height);

}

Práctica_02: + Retículas

SpaceInvaders

Práctica_02: SpaceInvaders

  • Clases y objetos
  • Array[]
  • exportad: png, pdf

Práctica_03: PVectors

Ejemplo: Bordeaux Metropole

Práctica_04: Tipografía

Ejemplo: Temporis

Ideas para una Id. Generativa

GRACIAS!!

julian-perez.com

info@julian-perez.com

twitter - mastodon