Programar con Processing

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Programar con Processing"

Jesús Castillo Martínez
hace 6 años
Vistas:

1 Programar con Processing J.B. Hayet CENTRO DE INVESTIGACIÓN EN MATEMÁTICAS Julio 2014 J.B. Hayet Julio / 34

2 El lenguaje Processing Processing: Un dialecto de Java muy simplificado. Una IDE sencilla e intuitiva. A priori ninguna dificultad para programadores en C C++. La meta es tocar a un público que no sabe de lenguajes en general enfocado a gráficos interactivos sonido vídeo animación... J.B. Hayet Julio / 34

3 El lenguaje Processing Aplicaciones particularmente bien adaptadas: enseñanza: rudimentos programación hasta POO enseñanza: ilustración animada de conceptos prototipaje rápido de aplicaciones sketches visualización de datos. J.B. Hayet Julio / 34

4 El lenguaje Processing Está de cierta manera en competencia con Flash para visualización de datos su propósito es tocar un público de no-programadores... J.B. Hayet Julio / 34

5 Una IDE reducida a lo esencial J.B. Hayet Julio / 34

6 Una IDE reducida a lo esencial Una ventana de texto para escribir el código. Una consola. Una ventana gráfica con el output del programa. Interfaz de la IDE simplista: En unos minutos se entiende como funciona todo. J.B. Hayet Julio / 34

7 Sketches El concepto de Sketch es el de proyecto de las IDEs normales es decir el un programa con una o varias unidades de compilación. A un Sketch corresponde a un directorio en un directorio de Sketches. Los archivos de los Sketches tienen extensión.pde. Los diferentes archivos aparecen como pestañas en la ventana del código. J.B. Hayet Julio / 34

8 Librerías disponibles Integrados Importación de datos XML SVG Exportación PDF DXF etc. Video Redes Comunicación serial External Contributions Sonido: Ess Sonia Computer Vision: JMyron ReacTIVisionBlobDetection Interface: procontroll Interfascia... J.B. Hayet Julio / 34

9 Varios modos de programación Tres maneras de programar. Modo básico (dibujos estáticos). Modo continuo (animación). Modo Java (clases Java). Se puede adaptar a la audiencia... J.B. Hayet Julio / 34

10 Varios modos de programación Modo básico programación imperativa s i z e ( ) ; background ( ) ; nostroke ( ) ; f o r ( i n t i =0; i <100; i ++) { f i l l ( ( i n t ) random ( ) ( i n t ) random ( ) ( i n t ) random ( 2 i n t x = ( i n t ) random ( ) ; i n t y = ( i n t ) random ( ) ; r e c t ( x y ) ; Ciclos llamadas a funciones variables... J.B. Hayet Julio / 34

11 Varios modos de programación Modo continuo programación procedural void s e t u p ( ) { s i z e ( ) ; nostroke ( ) ; framerate ( 1 ) ; void draw ( ) { drawcross ( ) ; J.B. Hayet Julio / 34

12 Varios modos de programación Modo continuo programación procedural void drawcross ( i n t x i n t y i n t w) { i f (w<1) return ; f i l l ( random ( ) random ( ) random ( ) ) ; r e c t ( x+w/3 y+w/3 w/3 w/ 3 ) ; r e c t ( x y+w/3 w/3 w/ 3 ) ; r e c t ( x+2 w/3 y+w/3 w/3 w/ 3 ) ; r e c t ( x+w/3 y w/3 w/ 3 ) ; r e c t ( x+w/3 y+2 w/3 w/3 w/ 3 ) ; drawcross ( x y w/ 3 ) ; drawcross ( x+2 w/3 y w/ 3 ) ; drawcross ( x y+2 w/3 w/ 3 ) ; drawcross ( x+2 w/3 y+2 w/3 w/ 3 ) ; Funciones recursiones... J.B. Hayet Julio / 34

13 Varios modos de programación Modo continuo programación procedural Dos funciones invocadas por default: setup() : al crear la ventana draw() : función de dibujo llamada en cada ciclo (frecuencia adaptable... ) Simulación dinámica... J.B. Hayet Julio / 34

14 Varios modos de programación Modo continuo programación procedural + Handlers para eventos de ratón teclados... mousepressed() mousereleased() mousemoved() keypressed()... Variables globales mousex mousey pmousex pmousey... J.B. Hayet Julio / 34

15 Varios modos de programación Modo Java programación orientada a objetos p e l o [ ] l i s t a = new p e l o [ c uantos ] ; f l o a t r a d i o = 200; void s e t u p ( ) { s i z e ( OPENGL ) ; r a d i o = h e i g h t / 3. 5 ;... c l a s s p e l o { f l o a t z = random( r a d i o r a d i o ) ; f l o a t p h i = random (TWO PI ) ; f l o a t l a r g o = random ( ) ; f l o a t t h e t a = a s i n ( z / r a d i o ) ; void d i b u j a r ( ) {... J.B. Hayet Julio / 34

16 Varios modos de programación Modo Java programación orientada a objetos p u b l i c c l a s s MyDemo e x t e n d s PApplet { void s e t u p ( ) { s i z e ( ) ; rectmode (CENTER ) ; nostroke ( ) ; f i l l ( ) ; void draw ( ) { background ( ) ; r e c t ( width mousex h e i g h t mousey ) ; r e c t ( mousex mousey ) ; Usar la applet de Processing en otro programa Java... J.B. Hayet Julio / 34

17 Varios modos de programación Data types (int float boolean) Arrays Loops Conditionals and Logical Operators Strings Variables and Scoping J.B. Hayet Julio / 34

18 Gráficos Es lo más interesante del lenguaje: se encarga de toda la parte generalmente técnicamente delicada de inicialización integrando varias modalidades gráficas por default (2D 3D OpenGL... ) muy fácil de crear animaciones visualizaciones dinámicas aun para debutante gráficos sonidos animación son al centro del concepto. J.B. Hayet Julio / 34

19 Gráficos J.B. Hayet Julio / 34

20 Gráficos 4 tipos de rendering bibliotecas de Java Java2D (default) modo 2D de Processing (mas rapido pero un poco mas feo) modo 3D de Processing modo opengl. J.B. Hayet Julio / 34

21 Gráficos Modo Java 2D/P2D void s e t u p ( ) { s i z e ( ) ; background ( ) ; void draw ( ) { l i n e ( 0 0 width h e i g h t ) ; J.B. Hayet Julio / 34

22 Gráficos Modo P3D void s e t u p ( ) { s i z e ( P3D ) ; void draw ( ) { background ( 0 ) ; s t r o k e ( ) ; t r a n s l a t e ( width /2 h e i g h t / 2 ) ; r o t a t e X ( cos ( framecount PI / ) ) ; l i n e ( width h e i g h t 200); l i n e ( width h e i g h t 200); l i n e ( width h e i g h t 200 width h e i g h t 200); J.B. Hayet Julio / 34

23 Gráficos Modo OpenGL import p r o c e s s i n g. o p e n g l. ; void s e t u p ( ) { s i z e ( s c r e e n. width s c r e e n. h e i g h t OPENGL ) ; void draw ( ) { background ( ) ; s t r o k e ( 0 ) ; n o F i l l ( ) ; t r a n s l a t e ( width /2 h e i g h t / 2 ) ; r o t a t e X ( xtheta ) ; r o t a t e Y ( ytheta ) ; box ( ) ; xtheta += ; ytheta += ; J.B. Hayet Julio / 34

24 Gráficos 2D // Tamano de l a ventana s i z e ( ) ; // No d i b u j a bordos de l a s formas nostroke ( ) ; // No r e l l e n a formas n o F i l l ( ) ; // C o l o r de fondo en l a ventana background ( ) ; // C o l o r de r e l l e n o f i l l ( ) ; // C o l o r de l o s bordos s t r o k e ( ) ; J.B. Hayet Julio / 34

25 Gráficos 2D // draw a p o i n t i n the middle // width and h e i g h t s t o r e the // window s i z e p o i n t ( width /2 h e i g h t / 2 ) ; // draw a 20 x20 r e c t a n g l e r e c t ( ) ; // draw an e l l i p s e e l l i p s e ( ) ; // draw an i r r e g u l a r shape beginshape ( ) ; v e r t e x ( ) ; v e r t e x ( ) ; v e r t e x ( ) ; v e r t e x ( ) ; endshape ( ) ; J.B. Hayet Julio / 34

26 Gráficos 3D pushmatrix ( ) ; n o F i l l ( ) ; s t r o k e ( ) ; smooth ( ) ; popmatrix ( ) ; l i g h t s ( ) ; pushmatrix ( ) ; r o t a t e X ( r a d i a n s ( r o t a t i o n X ) ) ; r o t a t e Y ( r a d i a n s (270 r o t a t i o n Y ) ) ; f i l l ( ) ; nostroke ( ) ; texturemode (IMAGE ) ; t e x t u r e d S p h e r e ( globeradius texmap ) ; popmatrix ( ) ; popmatrix ( ) ; J.B. Hayet Julio / 34

27 Imagenes Soporte para lecturas de imágenes acceso a pixeles espacios de colores... PImage img= loadimage ( h e l g a. j p g ) ; s i z e ( img. width img. h e i g h t ) ; image ( img 0 0 ) ; image ( img 0 0 img. width /5 img. h e i g h t / 5 ) ; J.B. Hayet Julio / 34

28 Imagenes nostroke ( ) ; colormode (RGB ) ; f o r ( i n t i =0; i <100; i ++) { f o r ( i n t j =0; j <100; j ++) { s t r o k e ( i j 0 ) ; p o i n t ( i 200+ j ) ; colormode (HSB ) ; f o r ( i n t i =0; i <100; i ++) { f o r ( i n t j =0; j <100; j ++) { s t r o k e ( i j ) ; p o i n t ( i 300+ j ) ; J.B. Hayet Julio / 34

29 Imagenes f o r ( i n t x =0; x<img. width ; x+=25) { f o r ( i n t y =0; y<img. h e i g h t ; y+=25) { i n t p i x e l c o l o r = img. p i x e l s [ x+y img. width ] ; f i l l ( p i x e l c o l o r ) ; e l l i p s e ( x y ) ; J.B. Hayet Julio / 34

30 Videos Lectura aceso a imagenes... import p r o c e s s i n g. v i d e o. ; Movie mymovie ; void s e t u p ( ) { mymovie = new Movie ( t h i s f o o t p r i n t s. mov ) ; mymovie. read ( ) ; mymovie. l o o p ( ) ; s i z e ( mymovie. width mymovie. h e i g h t ) ; void draw ( ) { t i n t ( ) ; i f ( mymovie. a v a i l a b l e ( ) ) { image ( mymovie mousex mousey ) ; void movieevent ( Movie m) { J.B. Hayet Julio / 34

31 Video capture Aceso a hardware... import p r o c e s s i n g. v i d e o. ; Capture mycapture ; void s e t u p ( ) { s i z e ( ) ; mycapture = new Capture ( t h i s width h e i g h t 3 0 ) ; void c a p t u r e E v e n t ( Capture mycapture ) { mycapture. read ( ) ; void draw ( ) { image ( mycapture ( i n t ) ( width /2 cos ( framecount / J.B. Hayet Julio / 34

Vision Unos esfuerzos para portar el OpenCV a Processing http://ubaa.

32 Vision Unos esfuerzos para portar el OpenCV a Processing (con pocas funcionalidades todavía) J.B. Hayet Julio / 34

33 Procesamiento de sonido Con la librería ESS procesamiento de sonido en linea FFT J.B. Hayet Julio / 34

Documentos relacionados

Gráficos por Computador

Gráficos por Computador 3D con processing Jordi Linares i Pellicer Escola Politècnica Superior d Alcoi Dep. de Sistemes Informàtics i Computació jlinares@dsic.upv.es http://www.dsic.upv.es/~jlinares processing