Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de...

25
Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP

Transcript of Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de...

Page 1: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Visualización de la Información con

Processing

Dr. David Eduardo Pinto AvendañoFacultad de Ciencias de la Computación, BUAP

Page 2: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Introducción

ProcessingDescripciónInterfazFunciones Ventajas y Desventajas

Programas

Ejemplos

Referencias

Contenido

Page 3: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

¿Qué es Processing?

Ambiente y lenguaje de programación “open source” para personas que desean programar:

• Tratamiento de imágenes• Animación• Interación Humano-Computadora

Útil para:• Estudiantes• Artistas• Diseñadores• Investigadores• Curiosos en la enseñanza, creación de prototipos y productos finales

Fue creado para enseñar fundamentos de programación dentro de un contexto visual.

Introducción

Page 4: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Introducción

Puede ser utilizado tanto para aplicaciones locales así como aplicaciones basadas en Web (Applets).

Fue iniciado por Ben Fry y Casey Reas.

Es la evolución de ideas por parte del grupo de estética y computación del laboratorio de Multimedia del MIT.

Versión actual: Processing 1.0.8 / 18 Oct 2009

http://processing.org/download

Page 5: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Introducción

Está basado en Java, sin embargo, debido a lo simple de sus construcciones, no es necesario saber Java.

Page 6: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Interfaz

Page 7: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

InterfazEl botón de reproducir(play) Click para ver tu código ejecutado como un programa.

El botón de parar (stop). Click para detener tu programa.

Crea un nuevo (new) archivo. Processing los llama sketches (bosquejos). los puedes llamar también Applets, programas o piezas interactivas. Abre (open) un sketch preexistente.Guarda (save) en sketch actual dentro de la carpeta de sketches de Processing.

Exporta (export) el sketch a la carpeta de sketch de Processing, esta vez como un Applet de java, completo con su propio archivo html.

Page 8: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

• Estructura.• Forma: o Primitivas 2D,o Primitivas 3D,o Curvas, o Atributos, o Vertex y o Loading & Displaying

• Color: o Escenario, o Creación y o Lectura

• Imagen:o Loading & Displaying y o Pixeles.

• Entorno.

• Datos: • Primitiva, • Compuesto, • Conversión, • Funciones de cadena y • Funciones de matrices.

• Entrada: • Mouse, • Teclado, • Archivos, • web y • hora y fecha.

Processing ofrece una gran variedad de funciones las cuales se muestran a continuación:

Funciones

Page 9: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

• Tipografía: • Loading & Displaying , • Atributos y • métrica.

• Matemáticas: • Operadores, • Operadores bit a bit, c• Cálculo, • Trigonometría y • Al azar.

• Salida: • Área de texto, • Imagen y archivos

• Control: • Operadores relacionales. • Iteración.• Condicionales.• operadores lógicos.

• Transformar.• Constantes.• Luces y Cámara:

• Luces.• Cámara. • Coordenadas. • propiedades de los

materiales.

Funciones

Page 10: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Hello world!

line(15, 25, 70, 90); Ver ejemplo

size(400, 400); Ver ejemplo background(192, 64, 0); stroke(255); line(150, 25, 270, 350);

stroke(255); // sets the stroke color to white stroke(255, 255, 255); // identical to the line above stroke(255, 128, 0); // bright orange (red 255, green

128, blue 0) stroke(#FF8000); // bright orange as a web color stroke(255, 128, 0, 128); // bright orange with 50%

transparency

Page 11: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Hello mouse!

void setup() { Ver ejemplosize(400, 400); stroke(255);

}

void draw() { background(192, 64, 0); line(150, 25, mouseX, mouseY);

}

Page 12: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Hello mouse!

void setup() { Ver ejemplosize(400, 400); stroke(255);

}

void draw() { line(150, 25, mouseX, mouseY);

}

void mousePressed() { background(192, 64, 0);

}

Page 13: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Ejemplos

Page 14: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Ejemplos

Page 15: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Ejemplos

Page 16: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Ejemplos

Page 17: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Ejemplos

Page 18: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Ejemplos

Page 19: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Ejemplos

VERTIGO, Alfred Hitchcock, 1958

Page 20: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Information Visualization

Page 21: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Information Visualization

Page 22: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Características

Processing OpenGL Flash &Director

Código Abierto Si No No

Fácil Manejo Si No No

Portable Si No No

Pocos Recursos

Si No No

Multiplataforma

Si Si Si

Maquina Virtual Java

Si No No

Processing versus …

Page 23: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Ventajas:1. Es Open Source.2. Fácil manejo.3. Portable.4. Utiliza pocos recursos.5. Su ejecución es mas rápida en comparación con

ActionScript y Lingo.6. Se puede correr en cualquier plataforma.7. Permite incorporar librerías de otros lenguajes8. Para utilizar processing no se necesita ser un

programador muy avanzado.

Desventajas:

9. Necesita la maquina virtual de java.10.No es tan comercial.

Ventajas y desventajas

Page 24: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Ejemplos

3D/Form/Toroid 3D/Lights/Directional 3D/Lights/Spot

DPinto

Libraries/OpenGL/SpaceJunk Libraries/OpenGL/TextureSphere Libraries/OpenGL/YellowTail Libraries/Video(movie)/Loop

Topics /Effects/FireCube Topics /Effects/Tunnel Topics /Fractals-/Tree Topics /Image Processing/Convolution Topics /Simulate/*

Page 25: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP.

Referencias

http://processing.org/ http://go.yuri.at/p5/tutorial/ http://www.tucamon.es/contenido/processing-y-arduino/ http://www.openprocessing.org/visuals/?visualID=4021 http://www.learningprocessing.com/

Learning Processing A Beginner's Guide to Programming Learning Processing A Beginner's Guide to ProgrammingDaniel Shiffman

Visualizing Data Exploring and Explaining Data with the Processing Environment)By Ben Fry, Publisher: O'Reilly Media