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.

Creative Coding Madrid

AvFloss

CoderDojo

Dio3Stu

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

julian-perez.com/slides/idgenp5

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

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

Id. Generativa - Contexto

Arte Generativo - 60's

• 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.

Id. Generativa - Contexto

Diseño Generativo

• 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

"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

Id. Generativa - Contexto

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

Id. Generativa - Herramientas

• Processing
• OpenFrameworks
• paper.js (Adobe Illustrator)
• Max/Msp 
• ...

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

* Why MIT Media Lab Scrapped Its Old Logo After Just Three Years

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

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

A esto se le llama "compilar"

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);

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);

width

height

rect(150,75);

fill(255,0,0);

stroke(255);

strokeWeight(2);

triangle(30, 75, 58, 20, 86, 75);

ellipse(30, 75, 50,50);

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

egg huevo = 0;

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

• Español
  • Air Room (vídeos)
• Inglés
  • Fun Programming (web)
  • Daniel Shiffman (vídeos)
  • Intro to P5 (pdf)
  • Type+Code (pdf)
  • Tutoriales processing.org (web)

Práctica_01: Retículas

Práctica_01: Retículas

*Athos Bulçao

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