Creación interactiva web: Processing

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

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


Processing ejemplos

https://processing.org/examples/storinginput.html

http://airtightinteractive.com/demos/processing_js/noisefield08.html

http://everyware.kr/portfolio/contents/09_oasis/


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)


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/


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



Processing: referencia Lenguaje, manual de referencia (https://processing.org/reference/)



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


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


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


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


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 */



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


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


# #

# #


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


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 */



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


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*/


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


Processing: ejemplo dibujo colectivo

4 Diciembre 2014 – dibujo colectivo en lienzo http://sketchpad.cc/Vytg6d529q

http://studio.sketchpad.cc/sp/pad/view/ro.93JTdlFtCZJc8/latest Resultado práctica


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/


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)


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


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

Design

Creación interactiva web: Processing