visualización de la información con processing dr. david eduardo pinto avendaño facultad de...
TRANSCRIPT
![Page 1: Visualización de la Información con Processing Dr. David Eduardo Pinto Avendaño Facultad de Ciencias de la Computación, BUAP](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/1.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/2.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/3.jpg)
¿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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/4.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/5.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/6.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/7.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/8.jpg)
• 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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/9.jpg)
• 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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/10.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/11.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/12.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/13.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/15.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/16.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/17.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/19.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/20.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/21.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/22.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/23.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/24.jpg)
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](https://reader035.vdocuments.net/reader035/viewer/2022062305/5665b4711a28abb57c917bda/html5/thumbnails/25.jpg)
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