Programar con Processing

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

CENTRO DE INVESTIGACION EN MATEMATICAS

Octubre 2009

, J.B. Hayet Seminario Computacin, Octubre 2009 o 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 pblico que no sabe de lenguajes en u general, enfocado a grcos interactivos, sonido, v a deo, animacin. . . o Produce aplicaciones locales o applets que puedes poner en el www.

, J.B. Hayet Seminario Computacin, Octubre 2009 o 2 / 36

El lenguaje Processing

Aplicaciones particularmente bien adaptadas: enseanza: rudimentos programacin hasta POO, n o enseanza: ilustracin animada de conceptos, n o prototipaje rpido de aplicaciones, sketches a visualizacin de datos. o

, J.B. Hayet Seminario Computacin, Octubre 2009 o 3 / 36

El lenguaje Processing

Est de cierta manera en competencia con Flash para a visualizacin de datos, o su propsito es tocar un pblico de no-programadores. . . o u

, J.B. Hayet Seminario Computacin, Octubre 2009 o 4 / 36

Una IDE reducida a lo esencial

, J.B. Hayet Seminario Computacin, Octubre 2009 o 5 / 36

Una IDE reducida a lo esencial

Nada ms que: a Una ventana de texto, para escribir el cdigo. o Una consola. Una ventana grca, con el output del programa. a Interfaz de la IDE simplista:

En unos minutos, se entiende como funciona todo.

, J.B. Hayet Seminario Computacin, Octubre 2009 o 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 compilacin. o A un Sketch corresponde a un directorio en un directorio de Sketches. Los archivos de los Sketches tienen extensin .pde. o Los diferentes archivos aparecen como pestaas en la ventana n del cdigo. o

, J.B. Hayet Seminario Computacin, Octubre 2009 o 7 / 36

Librer disponibles as
Integrados Importacin de datos XML, SVG o Exportacin PDF, DXF, etc. o Video Redes Comunicacin serial o External Contributions Sonido: Ess, Sonia Computer Vision: JMyron, ReacTIVision,BlobDetection Interface: proCONTROLL, Interfascia ...
, J.B. Hayet Seminario Computacin, Octubre 2009 o 8 / 36

Varios modos de programacin o

Tres maneras de programar. Modo bsico (dibujos estticos). a a Modo continuo (animacin). o Modo Java (clases Java). Se puede adaptar a la audiencia. . .

, J.B. Hayet Seminario Computacin, Octubre 2009 o 9 / 36

Varios modos de programacin o

Modo bsico, programacin imperativa a o
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 Computacin, Octubre 2009 o 10 / 36

Varios modos de programacin o

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

, J.B. Hayet Seminario Computacin, Octubre 2009 o 11 / 36

Varios modos de programacin o

Modo continuo, programacin procedural o
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 Computacin, Octubre 2009 o 12 / 36

Varios modos de programacin o

Modo continuo, programacin procedural o Dos funciones invocadas por default: setup() : al crear la ventana, draw() : funcin de dibujo llamada en cada ciclo (frecuencia o adaptable. . . ) Simulacin dinmica. . . o a

, J.B. Hayet Seminario Computacin, Octubre 2009 o 13 / 36

Varios modos de programacin o

Modo continuo, programacin procedural o + Handlers para eventos de ratn, teclados. . . o mousePressed() mouseReleased() mouseMoved() keyPressed() ... Variables globales mouseX, mouseY, pmouseX, pmouseY. . .

, J.B. Hayet Seminario Computacin, Octubre 2009 o 14 / 36

Varios modos de programacin o

Modo Java, programacin orientada a objetos o
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 Computacin, Octubre 2009 o

Varios modos de programacin o

Modo Java, programacin orientada a objetos o
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 Computacin, Octubre 2009 o 16 / 36

Varios modos de programacin o

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

, J.B. Hayet Seminario Computacin, Octubre 2009 o 17 / 36

Grcos a

Es lo ms interesante del lenguaje: a se encarga de toda la parte generalmente tcnicamente delicada e de inicializacin integrando varias modalidades grcas por o a default (2D, 3D, OpenGL. . . ), muy fcil de crear animaciones, visualizaciones dinmicas aun a a para debutante, grcos, sonidos, animacin son al centro del concepto. a o

, J.B. Hayet Seminario Computacin, Octubre 2009 o 18 / 36

Grcos a

, J.B. Hayet Seminario Computacin, Octubre 2009 o 19 / 36

Grcos a

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 Computacin, Octubre 2009 o 20 / 36

Grcos a
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 Computacin, Octubre 2009 o 21 / 36

Grcos a
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 Computacin, Octubre 2009 o 22 / 36

Grcos a
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 Computacin, Octubre 2009 o 23 / 36

Grcos 2D a
// 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 Computacin, Octubre 2009 o 24 / 36

Grcos 2D a
// 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 Computacin, Octubre 2009 o 25 / 36

Grcos 3D a
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 Computacin, Octubre 2009 o 26 / 36

Imagenes

Soporte para lecturas de imgenes, acceso a pixeles, espacios de a 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 Computacin, Octubre 2009 o 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 Computacin, Octubre 2009 o 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 Computacin, Octubre 2009 o 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 Computacin, Octubre 2009 o 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 Computacin, Octubre 2009 o 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 Computacin, Octubre 2009 o 32 / 36

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

, J.B. Hayet Seminario Computacin, Octubre 2009 o 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 Computacin, Octubre 2009 o 34 / 36

Docencia: en qu ayuda? e

Se puede aprender los conceptos esenciales de programacin a o varios niveles, Salida grca muy fcil de manejar, con animacin, a a o Simulacin, o Componentes de imgenes, de video. . . a Exportar ilustraciones de conceptos en la www.

, J.B. Hayet Seminario Computacin, Octubre 2009 o 35 / 36

Docencia: en qu ayuda? e

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 grcos. . . a Combinar Processing con Eclipse http://processing.org/learning/tutorials/eclipse/

, J.B. Hayet Seminario Computacin, Octubre 2009 o 36 / 36