Processing y...

Jesús Gollonet

Desarrollador interactivo

Yo

Programador de juegos, diseñador y desarrollador con estándares. Varios lenguajes....

Por qué uso Processing

Entorno de aprendizaje ideal

Por qué uso Processing

Sketching:

For a process to be sketchy, or like sketching, it should be immediate, quick to engage or start up in and incremental, easy to save and resume working on

Graham Coleman

(como coger una guitarra) Siempre que retomo processing pienso "¿esto se hacía así?". Con otros lenguajes la respuesta es "no". Con processing, si.

Cuaderno de bocetos de programación

(como coger una guitarra) Siempre que retomo processing pienso "¿esto se hacía así?". Con otros lenguajes la respuesta es "no". Con processing, si.

Por qué uso Processing

Multiples medios - tecnologías

Sin salir del mismo programa

Por qué uso Processing

Gente

Por qué uso Processing

Potencia

Lenguaje de programación "de personas mayores" ----------------------------------------------

Mi experiencia

Processing vs Web Comercial

Processing no se usa en entornos comerciales

Razones

Por lo qué...

Mucha gente piensa que aprenderlo es una pérdida de tiempo

Casos prácticos

¿Sirve para algo aprenderlo?

Presentaré algunos ejemplos donde lo uso como tecnología intermedia, aunque el output final sea flash.

Seat León Wtcc.

Efecto para el menú de un microsite:

En flash, obviamente

Problema

¿Cómo consigo crear las siluetas que formarán las avispas?

Solución

Quick and Dirty

No podemos pensar en opciones muy elaboradas

Leer formas en processing

Flash

Demo

archivos:

  • _01_leerFormas_wtcc
  • menu_wtcc
  • site_wtcc

Otro ejemplo similar

Banner Costa Rica:

Processing...

...flash

DEMO

Lollevasescrito

Briefing:

Microsite promocional en el que el usuario "conduce" a través de muchas imágenes de carácter emocional y/o sugerente.

"Al final del microsite queremos que todas las imágenes se junten en 3D y conformen un mosaico con la foto de el coche"

:|

Processing al rescate

DEMO

HS UPLOAD

Idea:

Instalar una cámara en la oficina de herraizsoto e ir subiendo imágenes a la web según un intervalo determinado para que los usuarios puedan ver y comunicarse en tiempo real con los que trabajamos allí.

¿Cómo subimos las imágenes?

¿Hay alguna otra opción?

Además...

DEMO

Conclusión

Ascii Video

Un amigo me preguntó si sería difícil hacer algo de ascii video con processing.

Ascii Video 0. Antes...

Conseguir que funcione la webcam

Es uno de los procesos más... truculentos de processing

Ascii Video 1 Importar librería.

Setup general e importación de video

		
import processing.video.*;
Es uno de los procesos más... truculentos de processing

Ascii Video 1. Capture

Setup general e importación de video


Capture capt;

void setup() {
	capt = new Capture (this, w, h, fps);
}

Ascii Video 1. Métodos Capture

Setup general e importación de video


void captureEvent(Capture capt_) {
    capt_.read();    
}

void draw() {
    image(capt, 0, 0);
}

Ascii Video 2. Leer pixeles.

Lectura de valores de pixel. En cada frame:


int pixelSize = 12;

void draw() {
	for (int i = 0; i < w; i+= pixelSize) {
		for (int j = 0; j < w; j+= pixelSize) {
		// acciones            
		}  
	} 
}
No se asusten con el bucle for anidado.

Ascii Video 2. Cuadrados Color

Lectura de valores de pixel. Pixelizador


...
	color c = capt.get(i,j); 
	fill(c);
	rect(i, j, pixelSize, pixelSize);          
...
Alterar el tamaño de pixel

Ascii Video 3. Brillo

No nos interesa el color de pixel, sino el brillo.


...
	color c = capt.get(i,j);  
	float brillo = brightness(c);
	fill(brillo);
	rect(i, j, pixelSize, pixelSize);            
...
Alterar el tamaño de pixel

Ascii Video 4. Font

Introducir una fuente:


PFont font;
void setup() {
	font = createFont("Arial", pixelSize);
	textFont(font);
}

Ascii Video 4. Texto

En lugar de un cuadrado de color, pintaremos una letra:


void draw() {
	background (255);
	for...
		text("a", i,j, pixelSize, pixelSize);
	}
}

Ascii Video 5. Método

En vez de usar una letra con diferentes colores, usaremos distintas letras en función de su oscuridad

.'`,^:";~-_+<>i!lI?/\|()1{}[]rcvunxzjftLCJUYXZO0Qoahkbdpqwm*WMB8&;%$#@

Ascii Video 5. División según Brillo

Dado que no tenemos tantas letras como posibles valores de brillo (256), reduciremos:

Ascii Video 5. Sustitución

Las letras se sustituirán del siguiente modo:

Ascii Video 5. Código


String letra="";

if (brillo > 0 && brillo < 40) {
	letra = "@";
} else if (brillo > 40 && brillo < 80)  {
	letra = "w";
....// ...
} else {
	letra = ".";   
}

text(letra, i,j, pixelSize, pixelSize);

Ascii Video 6. Mejoras código

...

Gracias

Sobre la presentación

Podeis encontrarme en: