programar con processingaplicaciones.cimat.mx/personal/sites/default/files/... · un dialecto de...

Programar con Processing

J.B. Hayet

CENTRO DE INVESTIGACION EN MATEMATICAS

Julio 2014

,J.B. Hayet , Julio 2014 1 / 34

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 publico que no sabe de lenguajes engeneral, enfocado a graficos interactivos, sonido, vıdeo,animacion. . .

,J.B. Hayet , Julio 2014 2 / 34


Aplicaciones particularmente bien adaptadas:

ensenanza: rudimentos programacion hasta POO,

ensenanza: ilustracion animada de conceptos,

prototipaje rapido de aplicaciones, “sketches”

visualizacion de datos.

,J.B. Hayet , Julio 2014 3 / 34


Esta de cierta manera en “competencia” con Flash paravisualizacion de datos,

su proposito es tocar un publico de no-programadores. . .

,J.B. Hayet , Julio 2014 4 / 34

Una IDE reducida a lo esencial

,J.B. Hayet , Julio 2014 5 / 34

Una IDE reducida a lo esencial

Una ventana de texto, para escribir el codigo.

Una consola.

Una ventana grafica, con el output del programa.

Interfaz de la IDE simplista:

En unos minutos, se entiende como funciona todo.

,J.B. Hayet , Julio 2014 6 / 34

Sketches

El concepto de Sketch es el de “proyecto” de las IDEsnormales, es decir el un programa con una o varias unidades decompilacion.

A un Sketch corresponde a un directorio en un directorio deSketches.

Los archivos de los Sketches tienen extension .pde.

Los diferentes archivos aparecen como pestanas en la ventanadel codigo.

,J.B. Hayet , Julio 2014 7 / 34

Librerıas disponibles

Integrados

Importacion de datos XML, SVG

Exportacion PDF, DXF, etc.

Video

Redes

Comunicacion serial

External Contributions

Sonido: Ess, Sonia

Computer Vision: JMyron, ReacTIVision,BlobDetection

Interface: proCONTROLL, Interfascia

. . .

,J.B. Hayet , Julio 2014 8 / 34

Varios modos de programacion

Tres maneras de programar.

Modo basico (dibujos estaticos).

Modo continuo (animacion).

Modo Java (clases Java).

Se puede adaptar a la audiencia. . .

,J.B. Hayet , Julio 2014 9 / 34


Modo basico, programacion imperativa

s i z e (255 , 255 ) ;background ( 2 5 5 ) ;noSt roke ( ) ;

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

}

Ciclos, llamadas a funciones, variables. . .

,J.B. Hayet , Julio 2014 10 / 34


Modo continuo, programacion procedural

void s e tup ( ) {s i z e ( 729 , 729 ) ;noSt roke ( ) ;f rameRate ( 1 ) ;}void draw ( ) {

drawCross ( 0 , 0 , 7 2 9 ) ;}

,J.B. Hayet , Julio 2014 11 / 34


Modo continuo, programacion 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 (255) , random (255) , 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+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 2014 12 / 34


Modo continuo, programacion proceduralDos funciones invocadas por default:

setup() : al crear la ventana,

draw() : funcion de dibujo llamada en cada ciclo (frecuenciaadaptable. . . )

Simulacion dinamica. . .

,J.B. Hayet , Julio 2014 13 / 34


Modo continuo, programacion procedural+ Handlers para eventos de raton, teclados. . .

mousePressed()

mouseReleased()

mouseMoved()

keyPressed()

...

Variables globales mouseX, mouseY, pmouseX, pmouseY. . .

,J.B. Hayet , Julio 2014 14 / 34


Modo Java, programacion orientada a objetos

pe l o [ ] l i s t a = new pe l o [ cuantos ] ;f l o a t r a d i o = 200 ;

void s e tup ( ) {s i z e (1024 , 768 , OPENGL) ;r a d i o = he i g h t / 3 . 5 ;. . .

c l a s s p e l o{

f l o a t z = random(− r ad i o , r a d i o ) ;f l o a t ph i = random (TWO PI ) ;f l o a t l a r g o = random ( 0 . 5 , 1 . 5 ) ;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 2014 15 / 34


Modo Java, programacion orientada a objetos

p u b l i c c l a s s MyDemo ex t end s PApplet {void s e tup ( ) {s i z e (200 , 200 ) ;rectMode (CENTER) ;noSt roke ( ) ;f i l l ( 0 , 102 , 153 , 204 ) ;}void draw ( ) {background ( 2 5 5 ) ;r e c t ( width−mouseX , he i gh t−mouseY , 50 , 5 0 ) ;r e c t (mouseX , mouseY , 50 , 5 0 ) ;}}Usar la applet de Processing en otro programa Java. . .

,J.B. Hayet , Julio 2014 16 / 34


Data types (int, float, boolean)

Arrays

Loops

Conditionals and Logical Operators

Strings

Variables and Scoping

,J.B. Hayet , Julio 2014 17 / 34

Graficos

Es lo mas interesante del lenguaje:

se encarga de toda la parte generalmente tecnicamente delicadade inicializacion integrando varias modalidades graficas pordefault (2D, 3D, OpenGL. . . ),

muy facil de crear animaciones, visualizaciones dinamicas aunpara debutante,

graficos, sonidos, animacion son al centro del concepto.

,J.B. Hayet , Julio 2014 18 / 34

Graficos

,J.B. Hayet , Julio 2014 19 / 34

Graficos

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 2014 20 / 34

Graficos

Modo Java 2D/P2D

void s e tup ( ) {s i z e (320 , 240 ) ;background ( 1 5 3 ) ;

}

void draw ( ) {l i n e (0 , 0 , width , h e i g h t ) ;

}

,J.B. Hayet , Julio 2014 21 / 34

Graficos

Modo P3D

void s e tup ( ) {s i z e (320 , 240 , P3D ) ;

}

void draw ( ) {background ( 0 ) ;s t r o k e ( 2 55 , 0 , 0 ) ;t r a n s l a t e ( width /2 , h e i g h t / 2 ) ;r o ta t eX ( cos ( frameCount ∗ PI / 3 00 ) ) ;l i n e (0 , 0 , 0 , width , he i gh t , −200);l i n e (0 , 0 , 0,−width , he i gh t , −200);l i n e ( width , he i gh t , −200,−width , he i gh t , −200);

}

,J.B. Hayet , Julio 2014 22 / 34

Graficos

Modo OpenGL

impor t p r o c e s s i n g . openg l . ∗ ;void s e tup ( ) {

s i z e ( s c r e e n . width , s c r e e n . he i gh t , OPENGL) ;}void draw ( ) {background ( 2 5 5 ) ;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 ta t eX ( xTheta ) ;r o t a t eY ( yTheta ) ;box ( 1 0 0 ) ;xTheta += 0 . 0 2 ;yTheta += 0 . 0 3 ;

} ,J.B. Hayet , Julio 2014 23 / 34

Graficos 2D

// Tamano de l a ventanas i z e (400 , 400 ) ;// No d i b u j a bordos de l a s formasnoSt roke ( ) ;// No r e l l e n a formasn o F i l l ( ) ;// Co lo r de fondo en l a ventanabackground (100 , 255 , 200 ) ;// Co lo r de r e l l e n of i l l ( 255 , 100 , 200 ) ;// Co lo r de l o s bordoss t r o k e ( 2 0 0 ) ;

,J.B. Hayet , Julio 2014 24 / 34

Graficos 2D

// draw a po i n t i n the midd l e// width and h e i g h t s t o r e the// window s i z epo i n t ( width /2 , h e i g h t / 2 ) ;// draw a 20 x20 r e c t a n g l er e c t ( 10 , 10 , 20 , 20 ) ;// draw an e l l i p s ee l l i p s e ( 50 , 50 , 30 , 30 ) ;// draw an i r r e g u l a r shapebeg inShape ( ) ;v e r t e x (60 , 4 0 ) ; v e r t e x (160 , 1 0 ) ;v e r t e x (170 , 150 ) ; v e r t e x (60 , 150 ) ;endShape ( ) ;

,J.B. Hayet , Julio 2014 25 / 34

Graficos 3D

pushMatr i x ( ) ;n o F i l l ( ) ;s t r o k e ( 255 , 200 ) ;smooth ( ) ;popMatr ix ( ) ;l i g h t s ( ) ;pushMatr i x ( ) ;r o t a t eX ( r a d i a n s (− r o t a t i o nX ) ) ;r o t a t eY ( r a d i a n s (270 − r o t a t i o nY ) ) ;f i l l ( 2 0 0 ) ;noSt roke ( ) ;textureMode (IMAGE ) ;t e x t u r e dSphe r e ( g lobeRad ius , texmap ) ;popMatr ix ( ) ;popMatr ix ( ) ;

,J.B. Hayet , Julio 2014 26 / 34

Imagenes

Soporte para lecturas de imagenes, acceso a pixeles, espacios decolores. . .

PImage img= load Image ( ” he l ga . j pg ” ) ;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 2014 27 / 34

Imagenes

noSt roke ( ) ;co lorMode (RGB, 100 ) ;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, 100 ) ;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 , 1 00 ) ;p o i n t ( i , 300+ j ) ;}}

,J.B. Hayet , Julio 2014 28 / 34

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 , 1 5 , 1 5 ) ;

}}

,J.B. Hayet , Julio 2014 29 / 34

Videos

Lectura, aceso a imagenes. . .

impor t p r o c e s s i n g . v i d e o . ∗ ;Movie myMovie ;void s e tup ( ) {

myMovie = new Movie ( t h i s , ” f o o t p r i n t s . mov” ) ;myMovie . r ead ( ) ;myMovie . l oop ( ) ;s i z e (myMovie . width , myMovie . h e i g h t ) ;

}void draw (){t i n t (200 , 2 0 ) ;i f (myMovie . a v a i l a b l e ( ) ) {

image (myMovie , mouseX , mouseY ) ;}}void movieEvent (Movie m) {m. read ( ) ;}

,J.B. Hayet , Julio 2014 30 / 34

Video capture

Aceso a hardware. . .

impor t p r o c e s s i n g . v i d e o . ∗ ;Capture myCapture ;void s e tup ( ){

s i z e (400 , 400 ) ;myCapture = new Capture ( t h i s , width , he i gh t , 3 0 ) ;

}void cap tu r eEven t ( Capture myCapture ) {

myCapture . r ead ( ) ;}void draw ( ) {

image (myCapture , ( i n t ) ( width /2∗ cos ( frameCount /100 . 0 ) ) , 0 ) ;}

,J.B. Hayet , Julio 2014 31 / 34

Vision

Unos esfuerzos para portar el OpenCV a Processinghttp://ubaa.net/shared/processing/opencv/

(con pocas funcionalidades todavıa),

J.B. Hayet , Julio 2014 32 / 34

http://ubaa.net/shared/processing/opencv/

Procesamiento de sonido

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

,J.B. Hayet , Julio 2014 33 / 34

programar con processingaplicaciones.cimat.mx/personal/sites/default/files/... · un dialecto de...

Documents