Programar con Processing

C. Esteves, J.B. Hayet, G. Marrufo

EN MATEMATICAS CENTRO DE INVESTIGACION

Octubre 2009

, J.B. Hayet Seminario Computaci on, Octubre 2009 1 / 36

El lenguaje Processing
Processing: Un dialecto de Java, muy simplicado. Una IDE sencilla. A priori ninguna dicultad para programadores en C, C++. La meta es tocar a un p ublico que no sabe de lenguajes en general, enfocado a gr acos interactivos, sonido, v deo, animaci on. . . Produce aplicaciones locales o applets que puedes poner en el www.

, J.B. Hayet Seminario Computaci on, Octubre 2009 2 / 36

El lenguaje Processing

Aplicaciones particularmente bien adaptadas: ense nanza: rudimentos programaci on hasta POO, ense nanza: ilustraci on animada de conceptos, prototipaje r apido de aplicaciones, sketches visualizaci on de datos.

, J.B. Hayet Seminario Computaci on, Octubre 2009 3 / 36

El lenguaje Processing

Est a de cierta manera en competencia con Flash para visualizaci on de datos, su prop osito es tocar un p ublico de no-programadores. . .

, J.B. Hayet Seminario Computaci on, Octubre 2009 4 / 36

Una IDE reducida a lo esencial

, J.B. Hayet Seminario Computaci on, Octubre 2009 5 / 36

Una IDE reducida a lo esencial

Nada m as que: Una ventana de texto, para escribir el c odigo. Una consola. Una ventana gr aca, con el output del programa. Interfaz de la IDE simplista:

En unos minutos, se entiende como funciona todo.

, J.B. Hayet Seminario Computaci on, Octubre 2009 6 / 36

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 on. A un Sketch corresponde a un directorio en un directorio de Sketches. Los archivos de los Sketches tienen extensi on .pde. Los diferentes archivos aparecen como pesta nas en la ventana del c odigo.

, J.B. Hayet Seminario Computaci on, Octubre 2009 7 / 36

Librer as disponibles
Integrados Importaci on de datos XML, SVG Exportaci on PDF, DXF, etc. Video Redes Comunicaci on serial External Contributions Sonido: Ess, Sonia Computer Vision: JMyron, ReacTIVision,BlobDetection Interface: proCONTROLL, Interfascia ...
, J.B. Hayet Seminario Computaci on, Octubre 2009 8 / 36

Varios modos de programaci on

Tres maneras de programar. Modo b asico (dibujos est aticos). Modo continuo (animaci on). Modo Java (clases Java). Se puede adaptar a la audiencia. . .

, J.B. Hayet Seminario Computaci on, Octubre 2009 9 / 36

Varios modos de programaci on

Modo b asico, programaci on imperativa
s i z e (255 , 255); background ( 2 5 5 ) ; noStroke ( ) ;

f o r ( i n t i =0; i < 100; i ++) { f i l l ( ( i n t ) random ( 2 5 5 ) , ( i n t ) random ( 2 5 5 ) , ( i n t ) random ( 2 i n t x = ( i n t ) random ( 2 5 5 ) ; i n t y = ( i n t ) random ( 2 5 5 ) ; r e c t ( x , y , 50 , 5 0 ) ; }

Ciclos, llamadas a funciones, variables. . .

, J.B. Hayet Seminario Computaci on, Octubre 2009 10 / 36

Varios modos de programaci on

Modo continuo, programaci on procedural
void setup ( ) { s i ze (729 ,729); noStroke ( ) ; frameRate ( 1 ) ; } v o i d draw ( ) { drawCross (0 ,0 ,729 ); }

, J.B. Hayet Seminario Computaci on, Octubre 2009 11 / 36

Varios modos de programaci on

Modo continuo, programaci on procedural
v o i d d r a w C r o s s ( i n t x , i n t y , i n t w) { i f (w< 1) r e t u r n ; f i l l ( random ( 2 5 5 ) , random ( 2 5 5 ) , random ( 2 5 5 ) ) ; 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+2w/ 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+2w/ 3 ,w/ 3 ,w / 3 ) ; drawCross ( x , y ,w/ 3 ) ; d r a w C r o s s ( x+2w/ 3 , y , w / 3 ) ; d r a w C r o s s ( x , y+2w/ 3 ,w / 3 ) ; d r a w C r o s s ( x+2w/ 3 , y+2w/ 3 ,w / 3 ) ; }

Funciones, recursiones. . .
, J.B. Hayet Seminario Computaci on, Octubre 2009 12 / 36

Varios modos de programaci on

Modo continuo, programaci on procedural Dos funciones invocadas por default: setup() : al crear la ventana, draw() : funci on de dibujo llamada en cada ciclo (frecuencia adaptable. . . ) Simulaci on din amica. . .

, J.B. Hayet Seminario Computaci on, Octubre 2009 13 / 36

Varios modos de programaci on

Modo continuo, programaci on procedural + Handlers para eventos de rat on, teclados. . . mousePressed() mouseReleased() mouseMoved() keyPressed() ... Variables globales mouseX, mouseY, pmouseX, pmouseY. . .

, J.B. Hayet Seminario Computaci on, Octubre 2009 14 / 36

Varios modos de programaci on

Modo Java, programaci on orientada a objetos
p e l o [ ] l i s t a = new p e l o [ c u a n t o s ] ; float radio = 200; void setup ( ) { s i z e ( 1 0 2 4 , 7 6 8 , OPENGL ) ; radio = height /3.5; ... class pelo { 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 ( 0 . 5 , 1 . 5 ) ; float theta = asin ( z/ radio ) ; void d i b u j a r (){ ...
J.B. Hayet

, 15 / 36

Seminario Computaci on, Octubre 2009

Varios modos de programaci on

Modo Java, programaci on orientada a objetos
p u b l i c c l a s s MyDemo e x t e n d s P A p p l e t { void setup ( ) { s i z e (200 , 200); rectMode (CENTER ) ; noStroke ( ) ; f i l l (0 , 102 , 153 , 2 0 4 ) ; } v o i d draw ( ) { background ( 2 5 5 ) ; r e c t ( width mouseX , h e i g h t mouseY , 5 0 , 5 0 ) ; r e c t ( mouseX , mouseY , 5 0 , 5 0 ) ; } }

Usar la applet de Processing en otro programa Java. . .

, J.B. Hayet Seminario Computaci on, Octubre 2009 16 / 36

Varios modos de programaci on

Data types (int, oat, boolean) Arrays Loops Conditionals and Logical Operators Strings Variables and Scoping

, J.B. Hayet Seminario Computaci on, Octubre 2009 17 / 36

Gr acos

Es lo m as interesante del lenguaje: se encarga de toda la parte generalmente t ecnicamente delicada de inicializaci on integrando varias modalidades gr acas por default (2D, 3D, OpenGL. . . ), muy f acil de crear animaciones, visualizaciones din amicas aun para debutante, gr acos, sonidos, animaci on son al centro del concepto.

, J.B. Hayet Seminario Computaci on, Octubre 2009 18 / 36

Gr acos

, J.B. Hayet Seminario Computaci on, Octubre 2009 19 / 36

Gr acos

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 Seminario Computaci on, Octubre 2009 20 / 36

Gr acos
Modo Java 2D/P2D
void setup ( ) { s i z e (320 , 240); background ( 1 5 3 ) ; } v o i d draw ( ) { l i n e ( 0 , 0 , width , h e i g h t ) ; }

, J.B. Hayet Seminario Computaci on, Octubre 2009 21 / 36

Gr acos
Modo P3D
void setup ( ) { s i z e ( 3 2 0 , 2 4 0 , P3D ) ; } v o i d draw ( ) { background ( 0 ) ; stroke (255 ,0 ,0); 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 ( c o s ( fram eC ou nt PI / 3 0 0 ) ) ; l i n e ( 0 , 0 , 0 , width , h e i g h t , 200); l i n e ( 0 , 0 , 0, 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 Seminario Computaci on, Octubre 2009 22 / 36

Gr acos
Modo OpenGL
import pro ce s s ing . opengl . ; void setup ( ) { s i z e ( s c r e e n . width , s c r e e n . h e i g h t , OPENGL ) ; } v o i d draw ( ) { background ( 2 5 5 ) ; stroke (0); noFill (); 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 ( 1 0 0 ) ; xTheta += 0 . 0 2 ; yTheta += 0 . 0 3 ; }
J.B. Hayet Seminario Computaci on, Octubre 2009 23 / 36

Gr acos 2D
// Tamano de l a v e n t a n a s i z e (400 , 400); // No d i b u j a b o r d o s de l a s f o r m a s noStroke ( ) ; // No r e l l e n a f o r m a s noFill (); // C o l o r de f o n d o en l a v e n t a n a background (100 ,255 ,200); // C o l o r de r e l l e n o f i l l (255 ,100 ,200); // C o l o r de l o s b o r d o s stroke (200);

, J.B. Hayet Seminario Computaci on, Octubre 2009 24 / 36

Gr acos 2D
// draw a p o i n t i n t h e m i d d l e // w i d t h and h e i g h t s t o r e t h e // 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 rect (10 ,10 ,20 ,20); // draw an e l l i p s e e l l i p s e (50 ,50 ,30 ,30); // draw an i r r e g u l a r s h a p e beginShape ( ) ; v e r t e x (60 , 40); v e r t e x (160 , 10); v e r t e x (170 , 150); v e r t e x (60 , 150); endShape ( ) ;

, J.B. Hayet Seminario Computaci on, Octubre 2009 25 / 36

Gr acos 3D
pushMatrix ( ) ; noFill (); stroke (255 ,200); smooth ( ) ; popMatrix ( ) ; lights (); pushMatrix ( ) ; r o t a t e X ( r a d i a n s ( r o t a t i o n X ) ) ; rotateY ( r a d i a n s (270 r o t a t i o n Y ) ) ; f i l l (200); noStroke ( ) ; t e x t u r e M o d e (IMAGE ) ; t e x t u r e d S p h e r e ( g l o b e R a d i u s , texmap ) ; popMatrix ( ) ; popMatrix ( ) ;
, J.B. Hayet Seminario Computaci on, Octubre 2009 26 / 36

Imagenes

Soporte para lecturas de im agenes, acceso a pixeles, espacios de colores. . .

PImage img= l o a d I m a g e ( 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 . w i d t h / 5 , img . h e i g h t / 5 ) ;

, J.B. Hayet Seminario Computaci on, Octubre 2009 27 / 36

Imagenes
noStroke ( ) ; c o l o r M o d e (RGB, 1 0 0 ) ; f o r ( i n t i =0; i < 100; i ++) { f o r ( i n t j =0; j < 100; j ++) { stroke ( i , j , 0); p o i n t ( i , 200+ j ) ; } } c o l o r M o d e (HSB , 1 0 0 ) ; f o r ( i n t i =0; i < 100; i ++) { f o r ( i n t j =0; j < 100; j ++) { stroke ( i , j , 100); p o i n t ( i , 300+ j ) ; } }
, J.B. Hayet Seminario Computaci on, Octubre 2009 28 / 36

Imagenes

f o r ( i n t x =0; x<img . w i d t h ; x+=25) { f o r ( i n t y =0; y<img . h e i g h t ; y+=25) { int p i x e l c o l o r = img . p i x e l s [ x+y img . w i d t h ] ; f i l l ( pixelcolor ); e l l i p s e (x , y ,15 ,15); } }

, J.B. Hayet Seminario Computaci on, Octubre 2009 29 / 36

Videos
Lectura, aceso a imagenes. . .
import pro ce s s ing . video . ; Movie myMovie ; void setup ( ) { myMovie = new Movie ( t h i s , f o o t p r i n t s . mov ) ; myMovie . r e a d ( ) ; myMovie . l o o p ( ) ; s i z e ( myMovie . width , myMovie . h e i g h t ) ; } v o i d draw ( ) { t i n t (200 , 20); i f ( myMovie . a v a i l a b l e ( ) ) { image ( myMovie , mouseX , mouseY ) ; } } v o i d m o v i e E v e n t ( Movie m) {
J.B. Hayet Seminario Computaci on, Octubre 2009 30 / 36

Video capture
Aceso a hardware. . .
import pro ce s s ing . video . ; C a p t u r e myCapture ; void setup ( ) { s i z e (400 , 400); myCapture = new C a p t u r e ( t h i s , width , h e i g h t , 3 0 ) ;

} v o i d c a p t u r e E v e n t ( C a p t u r e myCapture ) { myCapture . r e a d ( ) ; } v o i d draw ( ) { image ( myCapture , ( i n t ) ( w i d t h /2 c o s ( f ra m e C o un t / 1 0 0 }

, J.B. Hayet Seminario Computaci on, Octubre 2009 31 / 36

Vision
Unos esfuerzos para portar el OpenCV a Processing http://ubaa.net/shared/processing/opencv/

(con pocas funcionalidades todav a)

, J.B. Hayet Seminario Computaci on, Octubre 2009 32 / 36

Procesamiento de sonido
Con la librer a ESS, procesamiento de sonido en linea, FFT

, J.B. Hayet Seminario Computaci on, Octubre 2009 33 / 36

Exportar un applet
Una de las grandes caracteristicas de Processing: exportar el programa como applet y ponerlo en una pagina www,

, J.B. Hayet Seminario Computaci on, Octubre 2009 34 / 36

Docencia: en qu e ayuda?

Se puede aprender los conceptos esenciales de programaci on a varios niveles, Salida gr aca muy f acil de manejar, con animaci on, Simulaci on, Componentes de im agenes, de video. . . Exportar ilustraciones de conceptos en la www.

, J.B. Hayet Seminario Computaci on, Octubre 2009 35 / 36

Docencia: en qu e ayuda?

Se puede usar Processing con Java normal (excepto. . . ): Desarollas bibliotecas dedicadas a tu clase, de mas alto nivel. Los alumnos usan el Processing como clientes de esas librer as, pero lo usan sin preocuparse de manejar gr acos. . . Combinar Processing con Eclipse http://processing.org/learning/tutorials/eclipse/

, J.B. Hayet Seminario Computaci on, Octubre 2009 36 / 36