Arte interactivo mediante

programación creativa

Carlos Izquierdo @arcoglanz

Introducción a Processing
Processing es un entorno de programación creativa y un lenguaje basado en Java diseñado específicamente para artistas
visuales, diseñadores y entusiastas creativos.

Desarrollado por Casey Reas y Ben Fry en el MIT Media Lab en 2001, este proyecto surgió con el propósito de simplificar la
creación de gráficos y visualizaciones interactivas.

Processing es una herramienta de código que permite crear arte generativo, interactivo, visualización de datos,
animaciones y prototipos de diseño.

Su sintaxis amigable y la rapidez con la que se pueden obtener resultados visuales lo convierten en una opción ideal para
aquellos que desean explorar conceptos creativos a través de la programación.

Web de processing y dónde encontrar las cosas.

https://processing.org/
Introducción a Processing
Entorno
Estructura básica. Setup y draw.
El fundamento de cualquier sketch (boceto) de Processing está basado en dos funciones: setup() and draw(). En resumen, setup() define los detalles
del sketch, es donde las informaciones básicas se almacenan, y por ejemplo, contiene la función size(), mientras que draw() define lo que pasa en el
tiempo.

void setup(){

void draw(){

size()

La función size() define el tamaño del sketch en píxeles. Tiene dos parámetros, el primero define el ancho (width) y el segundo el alto (height):

void setup(){

size(400,400);

}
Estructura básica. Setup y draw.
El bucle de draw()

Una vez que el ordenador ha verificado la función setup(), el bucle draw() comienza a ejecutarse. El código que
colocarás entre los corchetes {} de la sección de dibujo se ejecutará de arriba a abajo, una y otra vez, 30 veces por
segundo, hasta que detengas el programa.

void draw(){

// ejecuta la animación

El sketch de Processing es como una película stop-motion: cada ejecución del bucle de dibujo representa un solo
fotograma de su animación.

Sintaxis: punto y coma, sensibilidad a las mayúsculas, autoformato.

Background
En la mayoría de los casos, la función background() debe ser la primera dentro del bucle draw() y toma un color como parámetro. Sirve para pintar todo el fondo del sketch.

void draw(){

background(0);

En este ejemplo, el fondo está configurado en negro. El 0 representa un valor de color.

La propiedad de fondo toma un valor como color. Ese valor se puede expresar de varias maneras diferentes:

→ Un único número entero entre 0 y 255: este estilo siempre es en escala de grises

background(0);

→ Un valor RGB

background(0, 0, 0);

→ Un valor RGB(A)

background(0, 0, 0, 1);
Background
Resumen. Sketch hasta el momento:

void setup(){

size(400,400);

void draw(){

background(0);

}
Dibujar figuras básicas con primitivos 2D
Sistema de coordenadas.

Processing empieza a contar píxeles desde la esquina superior izquierda.

Cuadrado:

square(120, 100, 220);

Círculo:

circle(224, 184, 220);

Las funciones se colocan dentro de void draw.

Dibujar figuras básicas con primitivos 2D
Dibujar figuras básicas con primitivos 2D
Generalizaciones del cuadrado y el círculo.

Rectángulo:

rect(120, 80, 220, 220);

El modo por defecto es rectMode(CORNER), siendo los dos primeros parámetros la esquina superior izquierda del rectángulo, y los
siguientes ancho y alto.

rectMode(CORNERS) interpreta los dos primeros parámetros como una esquina, y los dos últimos como la esquina opuesta.

rectMode(CENTER) interpreta los dos primeros parámetros como el punto central, y los dos últimos como ancho y alto.

rectMode(RADIUS) interpreta los dos primeros parámetros como el punto central, y los últimos como la mitad del ancho y alto.
Dibujar figuras básicas con primitivos 2D
Generalizaciones del cuadrado y el círculo.

Elipse:

ellipse(224, 184, 220, 220);

El modo por defecto es ellipseMode(CENTER), que interpreta los dos primeros parámetros como el punto central, y los
dos últimos como ancho y alto.

ellipseMode(RADIUS) interpreta los dos primeros parámetros como el punto central, y los dos últimos como la mitad del
ancho y el alto.

ellipseMode(CORNER) interpreta los dos primeros parámetros como la esquina superior izquierda de la forma, y los dos
últimos como ancho y alto.

ellipseMode(CORNERS) interpreta los dos primeros parámetros como una esquina de la “caja” que contiene la elipse, y
los otros como la esquina opuesta.
Dibujar figuras básicas con primitivos 2D
La importancia del orden de los elementos en el código (lo último en escribirse queda por delante en la visualización).

void setup() {

size(400, 400);

void draw() {

background(0);

rect(200, 150, 100, 100);

ellipse(200, 150, 100, 100);

}
Dibujar figuras básicas con primitivos 2D
Líneas

line()

line(x1,y1,x2,y2);

Cuatro parámetros, los datos x e y del punto inicial y el punto final.

triangle()

triangle(x1,y1,x2,y2,x3,y3);

6 parámetros, los datos x e y de cada punto. Punto 1 abajo izquierda, 2 arriba centro, 3 abajo derecha.
Dibujar figuras básicas con primitivos 2D
En caso de querer formar figuras con 4 o más puntos, lo recomendable es el siguiente método:

beginShape();

vertex(200,110);

vertex(250,130);

vertex(230,200);

vertex(170,200);

vertex(150,130);

endShape();
Dibujar figuras básicas con primitivos 2D
Ejercicio

Componer un boceto de alguna forma concreta: una cara, una casa, un coche, una letra, un número.
Color
Fill, noFill, stroke, noStroke, strokeWeight. Escala de grises, Rgb(+alpha), hsb, hexadecimal.

Herramienta de color de processing.

Color
Webs para escoger colores:

huesnap

coolors.co

materialpalette.com

www.colors.commutercreative.com/grid

color.hailpixel.com

colorable.jxnblk.com
Color
Funciones para cambiar el color y el borde de las formas.

Bordes:

stroke()

noStroke()

strokeWeight()

Relleno:

fill()

noFill()

Se escriben antes de la forma a la que se quiere afectar.

Color
Modos de color.

Un sólo dígito entre 0 y 255: escala de grises.

3 dígitos: RGB.

Si se quiere HSB, especificar colorMode:

colorMode(HSB, 360, 100, 100);

4 dígitos: RGB+alpha.

Hexadecimal.
Color
Color aleatorio.

Antes del setup:

color[] colors = { #191716,#E6AF2E,#E0E2DB};

A la hora de elegir color:

(colors[(int)random(colors.length)]);
Aleatoriedad
Posicionar elementos como

random(-100,100);

Variables width y height

función frameRate(2);

función noLoop();

junto con

void mousePressed() {

redraw();

}
Aleatoriedad
Para usar random en lugar de un valor concreto, podemos definir el rango en el que ese valor aleatorio se moverá.
Puede ser con un sólo valor: random(50); que indica que se moverá entre 0 y el valor que elijamos, o definiendo un intervalo concreto: random(50,200).
Partimos del siguiente código.

void setup() {
size(400, 400);
}

void draw() {
noLoop();
background(0);
stroke(50);
strokeWeight(10);
fill(100);
rect(200, 150, 100, 100);
fill(150);
stroke(200);
ellipse(200, 150, 100, 100);
}

void mousePressed() {
redraw();
}
Aleatoriedad
Y hacemos los siguientes cambios:
en cada valor de color (tanto en background, como en fill, como en stroke), sustituimos eso por random(255)

Probamos y ante cada clic el sketch se redibujará con una nueva combinación de colores.

Hacer lo mismo pero considerando los colores en lugar de en escala de grises en RGB.

Por último definir el modo HSB de color, y poner como random sólamente el primer valor (la H), y al máximo los otros
dos (S y B).
colorMode(HSB, 360, 100, 100);

utilizar random hasta el rango máximo, random(359);

Los cambios quedan reflejados en las diapositivas siguientes.

Aleatoriedad
void setup() {
size(400, 400);
}

void draw() {
noLoop();
background(random(255));
stroke(random(255));
strokeWeight(10);
fill(random(255));
rect(200, 150, 100, 100);
fill(random(255));
stroke(random(255));
ellipse(200, 150, 100, 100);
}

void mousePressed() {
redraw();
}
Aleatoriedad
void setup() {
size(400, 400);
}

void draw() {
noLoop();
background(random(255),random(255),random(255));
stroke(random(255),random(255),random(255));
strokeWeight(10);
fill(random(255),random(255),random(255));
rect(200, 150, 100, 100);
fill(random(255),random(255),random(255));
stroke(random(255),random(255),random(255));
ellipse(200, 150, 100, 100);
}

void mousePressed() {
redraw();
}
Aleatoriedad
void setup() {
size(400, 400);
}

void draw() {
colorMode(HSB, 360, 100, 100);
noLoop();
background(random(359),100,100);
stroke(random(359),100,100);
strokeWeight(10);
fill(random(359),100,100);
rect(200, 150, 100, 100);
fill(random(359),100,100);
stroke(random(359),100,100);
ellipse(200, 150, 100, 100);
}

void mousePressed() {
redraw();
}
Guardar imágenes
saveFrame("output/image#####.png");

Se puede poner dentro de

void mousePressed() {}

o dentro de

void keyPressed() {}