Seminarios CREACIÓN Y DIFUSIÓN DE NUEVOS CONTENIDOS AUDIOVISUALES Grado de Comunicación Audiovisual Creación Multimedia Interactiva - Grado en Bellas Artes Universidad de Granada http://utopolis.ugr.es/medialab #medialabUGR

1. Seminario
Act. Feb 2015
Creative Commons by-nc-sa
Creación interactiva para la web:
Processing
Miguel Gea
http://utopolis.ugr.es/mgea
Dpt. Lenguajes y Sistemas Informáticos
Universidad de Granada
http://www.slideshare.net/mgea/creacion-interactiva-web-processing

2. Miguel Gea. Producción interactiva 2
Processing
• Lenguaje de programación y entorno basado en Java (de código
abierto) desarrollado en el MIT media Lab (John Maeda).
https://processing.org/overview/
• Uso para enseñar y producir proyectos multimedia e interactivos de
diseño digital para Web
• Herramientas
• Editor nativo (Windows/Mac/Linux)
• Editor online (sketchpad.cc)
• Plugin para insertar wordpress

3. Miguel Gea. Producción interactiva 3
Processing ejemplos
https://processing.org/examples/storinginput.html
http://airtightinteractive.com/demos/processing_js/noisefield08.html
http://everyware.kr/portfolio/contents/09_oasis/

4. Miguel Gea. Producción interactiva 4
Processing: Sketchpad
http://sketchpad.cc/
! Entorno interactivo en la Web para producir proyectos de Processing.
! Permite colaborar varias personas en un proyecto (compartir y con chat)

5. Miguel Gea. Producción interactiva 5
Processing: lenguaje
! Lenguaje con sintaxis de Java (distingue minúsculas de mayúsculas)
! Funciones (colección de ordenes) poseen argumentos entre paréntesis y terminan en “;”
! Definir variables (de un tipo de dato: int, boolean, string, float) y asignar valor
! Bloques de funciones. Comienzan con “void” y agrupar ordenes entre llaves
! Comentarios. de una línea con doble barra “//” o de varias líneas entre /* … */
int numero; // declarar variables con un nombre (numero) y tipo (valor entero)
/* funciones, agrupan órdenes entre { y } */
void setup() { /* función especial de iniciación de datos */
numero = 3;
}
/* bloques de funciones, agrupan órdenes entre { y } */
void draw() { /* se repite indefinidamente */
clear();
numero = numero +1 ;
println (“contador “,numero);
}
Siempre debe
aparecer esta funcion
en un script (se repite
infinitamente hasta que
acaba programa)
http://processing.org/

6. Miguel Gea. Producción interactiva 6
Processing: lienzo
Canvas /lienzo. Donde se dibuja. Se debe definir un tamaño y los dibujos se incluyen
con coordenadas x e y. El punto (0,0) está en la esquina superior izquierda
! Definir Tamaño lienzo
size (tamx, tamy);
! Constantes
widht // valor de alto
height // valor de ancho
! Modo dibujo y fps
// suavizar líneas
smooth ();
// frames por segundo 30fps
frameRate (30);
http://processing.org/

7. Miguel Gea. Producción interactiva 7
Processing: referencia
Lenguaje, manual de referencia (https://processing.org/reference/)
http://processing.org/

8. Miguel Gea. Producción interactiva 8
Processing / dibujo
! Figuras de dibujo
! Atributos de dibujo
/*se aplican por defecto a partir de ese momento */
background (255); /* fondo lienzo en escala grises */
background (255,233,233); /* color fondo en componentes RGB*/
/* valores de color para figuras de dibujo (borde y rellenos */
stroke (0); stroke(0,0,0); /* color borde, en escala de gris o RGB */
fill (50); fill (50,50,50); /* color relleno de áreas (circulos, triangulos..) */
noFill(); /* sin relleno */
noStroke(); /* sin borde */ strokeWeight(10); /* grosor en pixels del borde */
point (x,y);
line (x1, y1, x2, y2);
rect (x1,y1, ancho, alto);
ellipse (x1,y1, ancho, alto);
triangle(x1, y1, x2, y2, x3, y3);
text (“texto”, x,y);

9. Miguel Gea. Producción interactiva 9
Processing: ejemplo dibujo básico
// dibujo basico
void setup() {
size(300, 300);
background(200);
}
void draw() {
fill(0);
rect (0,150,300,250);
fill (300,100,100);
ellipse(150, 150, 100, 100);
fill (0,100,100);
ellipse(150, 150, 50, 80);
stroke(0,0,250);
line (0,10,300,10); line (0,50,300,50);
line (0,100,300,100);
fill(0,0,250);
triangle(100,20,200,20,150,100);
noStroke(); fill(255);
textSize(20);
text("#medialabUGR",80,280);
} http://studio.sketchpad.cc/sp/pad/view/ro.9jxn3Ouzm1NM3/latest

10. Miguel Gea. Producción interactiva 10
Processing / dibujo
http://processing.org/reference
" Imágenes
/* crear un tipo de dato “especial” para almacenar una imagen */
PImage img;
/* asociar una imagen (se encuentran en carpeta de datos o de internet (mediante URLR) */
img = loadImage("laDefense.jpg");
/* añadir al dibujo en canvas */
void draw() {
image (img, 0, 0);
// posición
image (img,0,0,200, 180); //recortada a 200x180
}
http://studio.sketchpad.cc/sp/pad/view/ro.91SqcwRa8x6BL/latest

11. Miguel Gea. Producción interactiva 11
Processing / tipos datos
Variables de tipo texto ascii ( String, char )
// Definición de variables, asignación y comparación
String texto, texto2; /* cadena de caracteres */
char c = ‘a’; /* un solo carácter, comillas simples */
// Asignación de valor
String texto1 = ”Mi texto”;
texto2 = “otro texto”
// Extracción de un carácter
char c= texto1.charAt(4); /* seleccionado ‘t’*/
// comparación (operación lógica)
if (texto1 == texto2 ) { .. } /* Comparación */
// concatenar textos
texto1 = texto2 + “…adios”; /* une ambos */
// Impresión del texto
text (texto1, 30,30); /* coloca en lienzo el literal que contiene texto1 */
println(texto1); /* lo imprime en la consola de mensajes */
http://processing.org/reference
atributos tamaño texto
textSize(20);

12. Miguel Gea. Producción interactiva 12
Processing / tipos datos
Tipos dato numérico enteros ( int )
// Definición de variables, asignación y comparación
int x, y; /* crear variable */
int x = 3; /* crear variable y asignar valor */
// Asignación de valor
y = 44;
x = y; /* x tendrá el mismo valor que y */
// comparación (operación lógica)
if (x == y ) { .. } /* Comparación igualdad */
if (x >= y ) { .. } /* Comparación mayor o igual que */
// operaciones aritmeticas
x = x +3 ; /* incrementa el valor de x en 3 */
x = y*2; /* x es el doble que el valor de y */
// Impresión del texto
text (x, 30,30); /* coloca en el lienzo el valor de x */
println(x); /* imprime en la consola el valor de x */
http://processing.org/reference

13. Miguel Gea. Producción interactiva 13
Processing / tipos datos float
Tipos dato numérico reales ( float )
float x,y; /* crear variable de tipo real */
// función aleatoria: random()
x = random (10); // nº aleatrio entre 0 y 10
// Dibujo puntillista
float x,y, grosor = 0;
void setup() {
background(255);
size(300, 300);
frameRate(30);
}
void draw() { // this is run repeatedly.
grosor = random(30); // grosor aleatorio
strokeWeight(grosor); // color aleatorio
stroke(random(50), random(255), random(255), 100);
// punto aleatorio
x = random (300); y = random (300);
point (x,y);
}
http://studio.sketchpad.cc/8qLEm6NICG

14. Miguel Gea. Producción interactiva 14
Processing / condicionales
! Condicional (Si.. entonces)
int i;
if (i==2) { /* en caso que i sea igual a 2*/
// incluir acciones
}
else { /* en caso falso se hace esta parte. opcional*/
}
! Condicional (mientras que)
while (i < 10) {
i = i+1;
}
• Repetición (un numero de veces
for ( i=0; i < 100; i++) {
// i++ incrementa de uno en uno; i+=10 de 10 en 10
line(i,0,i, 200);
}
http://processing.org/reference
#
#
#
#

15. Miguel Gea. Producción interactiva 15
Processing: ejemplo dibujo iterativo
int i, x, y;
void setup() {
size (300,300);
}
void draw() {
background(200);
// fondo de círculos blancos sobre negro
for (int y = 0; y <= 300; y += 40) {
for (int x = 0; x <= 300; x += 40) {
fill (224, 140);
ellipse (x, y, 40 , 40);
}
}
}
// diseña el fondo del lienzo
http://studio.sketchpad.cc/sp/pad/view/ro.9trIe6v5vd5KX/latest

16. Miguel Gea. Producción interactiva 16
Processing / interacción mouse
! Mouse (datos variables globales)
mouseX
variable global que contiene con coordenada X del mouse
mouseY
variable global que contiene con coordenada Y del mouse
mousePressed
variable true/false que indica si se ha pulsado
• Acciones sobre mouse (funciones genéricas) de control ratón
void mousePressed() { … } /* pulsar botón del ratón */
void mouseMoved() { … } /* mueve el ratón */
void mouseDragged() { .. } /* arrastrar ratón pulsando botón */
http://processing.org/reference

17. Miguel Gea. Producción interactiva 17
Processing: ejemplo (pulsar/soltar mouse)
// circulo tamaño variable
int x;
void setup() {
x = 40; // radio circulo
size(300, 300);
background(200);
fill(0);
}
void draw() {
if (mousePressed) {
if (x<300) x = x+5;
} else {
if (x > 2) x = x -5;
}
ellipse(150, 150, x, x);
}
http://studio.sketchpad.cc/sp/pad/view/ro.9yf0a5mmjmKbH/latest

18. Miguel Gea. Producción interactiva 18
Processing / interacción teclado
! Teclado (datos/variables globales)
key // tecla pulsada, ejemplo:
// if (code == “b”) { text(“pulsada la B”, 10,10); }
keyCode // detectar teclas especiales (UP, DOWN, LEFT, RIGHT…)
// if (keyCode == UP ) { text(“subir”,10,10); }
• Acciones sobre teclado (funciones genéricas)
void keyPressed() { … }
/* pulsar tecla*/
void keyReleased () { … } /* soltar tecla*/

19. Miguel Gea. Producción interactiva 19
Processing: ejemplo control teclado
int x,y;
void setup() {
x = 40;
y = 250;
size(300, 300);
}
void draw() {
background(200);
fill(20,100,100);
stroke(30);
rect (x,y,50,10);
camino();
if (keyPressed) {
if (key =='x') fire(); //disparar
if(keyCode == UP) y = y -1;
if(keyCode == DOWN) y = y +1;
if(keyCode == LEFT) x = x -1;
if(keyCode == RIGHT) x = x +1;
}
}

20. Miguel Gea. Producción interactiva 20
Processing: ejemplo dibujo colectivo
4 Diciembre 2014 – dibujo colectivo en lienzo http://sketchpad.cc/Vytg6d529q
http://studio.sketchpad.cc/sp/pad/view/ro.93JTdlFtCZJc8/latestResultado práctica

21. Miguel Gea. Producción interactiva 21
Processing.js – insertar en Blog (wordpress)
Se puede incrustar directamente código procesing.js en una entrada de
Wordpress con este plugin https://wordpress.org/plugins/processing-js/

22. Miguel Gea. Producción interactiva 22
Una vez activado el plugin en Wordpress, se puede añadir una entrada
en HTML (texto) entre códigos [processing.js] …. [/processing.js]
Processing.js – insertar en Blog (wordpress)

23. Miguel Gea. Producción interactiva 23
Conectar interacción al mundo real
Programación sobre hardware (arduino)
Creativos: Nicklas Roy
Processing + Arduino
Ref: Nickas Roy. My little piece of privacy https://www.youtube.com/watch?v=rKhbUjVyKIc
Imagen: http://www.adafruit.com/blog/wp-content/uploads/2010/07/proc-arduino3-600.jpg

24. Miguel Gea. Producción interactiva 24
Referencias
" Referencia: https://www.processing.org/reference/
" Generative art. Practical guide http://abandonedart.org
" Tutoriales y ejemplos sencillos http://funprogramming.org
" Guía de processing http://users.dsic.upv.es/~jlinares/grafics/processing_spa_1.pdf
" Arte con Procesing https://processing.org/exhibition/
" G. Puerta. arduino+proccesing. Iavante: http://es.slideshare.net/ninioperdido/arduinoprocessing