processing spa 1

5/28/2018 Processing Spa 1

1/26

Grficos por

ComputadorIntroduccin a processingJordi Linares i Pellicer

Escola Politcnica Superior dAlcoiDep. de Sistemes Informtics i [email protected]://www.dsic.upv.es/~jlinares
mailto:[email protected]:[email protected]:[email protected]


2/26

Qu es processing? Processinges un dialecto de Java especficamentediseado para el desarrollo de arte grfico,

animaciones y aplicaciones grficas de todo tipo

Desarrollado por artistas y para artistas

Processinges software libre, disponible en lasplataformas donde Java est disponible (Mac OS,Linux, Windows etc.)

Desarrollado a partir del 2001 en el MIT porCasey Reas y Ben Fry. Inspirado en DBN (Design ByNumbers) de John Maeda

http://processing.org -> portal de descarga ycentro neurlgico del mundo processing
http://processing.org/http://processing.org/http://processing.org/


3/26

Por qu processing? Muy, pero que muy fcil de aprender... primeras

pruebas en slo unos minutos

Dispone de su propio IDE de desarrollo (fcil) Mejor curva de aprendizaje que OpenGL + GLUTu otras alternativas Potente, pero que muy potente. Permite

desarrollar aplicaciones desde muy sencillas a muy

complejas. Escalable. Se puede combinar programacin con

processingcon Java puro y las libreras propias deJava. Una aplicacin Java pura tambin puede usar

las libreras de processing.


4/26

Por qu processing? Permite 3 formas de programar: bsica, procedural/

estructurada y orientada a objetos

Las primeras pruebas y sketches sencillos sepueden desarrollar en el modo bsico (sinfunciones, cdigo directo)

sketches y programas ms ambiciosos puedenhacer uso de funciones (programacin a la C)

Programas ms complejos pueden desarrollarseaplicando orientacin a objetos (clases de Java) Finalmente, se puede desarrollar en java puro y

usar libreras de processing y otros entornos

(eclipse, netbeans etc.)


5/26

Por qu processing?

Genera aplicaciones listas para ser ejecutadas enlas tres principales plataformas: Mac OS, Linux yWindows

Las aplicacionesprocessingtambin puedengenerarse para su ejecucin en internet (como unappletde Java)

Es posible desarrollar aplicaciones para dispositivosmviles (http://mobile.processing.org)

Conexin con dispositivos y prototiposelectrnicos: proyectos Arduino y Wiring (http://hardware.processing.org)
http://mobile.processing.org/http://mobile.processing.org/http://mobile.processing.org/http://mobile.processing.org/http://mobile.processing.org/


6/26

Paquetes grficos. Historia Estndares: 3D Core Graphics System. ACM y SIGGRAPH (1977)

GKS (Graphical Kernel System). 2D. ISO-ANSI (1985) GKS-3D (1988)

PHIGS (Programmers Hierarchical Interactive Graphics System). 3D.(1988) SRGP y SPHIGS (Foley)

Otros OpenGL XWindows, Microsoft Windows, Mac OS ... VRML, X3D (orientados a internet) POV-Ray, Renderman Java2D, Java3D

DirectX (Direct-3D)

etc.


7/26

El IDE de processing

Processingdispone de un IDE (IntegratedDevelopement Environment) propio

desarrollado en Java Sencillo y fcil. Suficiente para la mayora de

aplicaciones. Se puede migrar a Eclipse, p.e.,

ante aplicaciones de mayor envergadura Se conoce por PDE (processingdevelopment environment)


8/26

rea de texto y debugging

rea de mensajes

Nombre del fichero

Ejecutar Parar Nuevo Abrir Guardar Exportar

Nmero de lnea

Cdigo Gestin de pestaas (ficheros)


9/26

El IDE de processing Cuando guardamos una aplicacin, se genera un directorio con

ese nombre y el fichero de la aplicacin se almacena dentro conla extensin .pde

Los nombres de los ficheros mximo 64 caracteres sin espacios

Se pueden crear ms ficheros asociados a la misma aplicacin(gestin de pestaas). Estos ficheros por defecto tendrn lamisma extensin .pde, pero tambin pueden tener laextensin .java(y sern tratados como tales).

Los ficheros adicionales correspondern a nuevas funciones oclases (en tal caso habr que definir en el principal la funcinsetup)

Las pestaas visibles sern las que se consideraran al generar laaplicacin

Para abrir un proyecto bastar con abrir cualquier .pdedelinterior del directorio


10/26

El IDE de processing

Runy Stoppermiten iniciar la ejecucin de la aplicacin y sufinalizacin

Exportpermite generar un applet de la aplicacin. La opcin delmen Export Application permite generar una aplicacin lista paraejecutarse en Mac OS, Linux o Windows. Todo esto se generaren directorios dentro del directorio principal de la aplicacin

El directorio Skecthbook es el directorio por defecto para elusuario pero se puede almacenar las aplicaciones en cualquierdirectorio


11/26

El IDE de processing Otras opciones interesantes:

Import Library. Nos facilita la inclusin de las sentencias importde las libreras ms tiles

Add File. Nos permite aadir imgenes, fuentes u otra

informacin multimedia a un directorio especial en nuestracarpeta de aplicacin: la carpeta data. En esta carpetadebemos almacenar cualquier elemento que queramos utilizaren nuestra aplicacin (mediante la funcin loadImage, p.e.). Lacarpeta data se crear si no exista previamente.

Create font. Facilita la creacin de appletsque utilicen fuentesde nuestro sistema y que queramos garantizar que aparezcancorrectamente en cualquier navegador.

Help. Nos permite consultar la informacin de processing,incluso ver la referencia de la funcin que tengamos

seleccionada en el cdigo


12/26

El lenguaje processing

processingest basado en Java 1.4.2 (slo unas cuantasmodificaciones con objeto de simplificar la programacin)

Se puede utilizar 1.5 y posteriores pero utilizando otroentorno de desarrollo (aplicacin Java pura y utilizando lasclases de la librera grfica de processing)

Documentacin completa en: http://java.sun.com/j2se/1.4.2/docs/api/index.html

processingpermite programar a la C (programacinestructurada, a base de funciones). Pero es convenienteaprovechar su enfoque orientado a objetos (ligerasmodificaciones de las clases Java)
http://java.sun.com/j2se/1.4.2/docs/api/index.htmlhttp://java.sun.com/j2se/1.4.2/docs/api/index.htmlhttp://java.sun.com/j2se/1.4.2/docs/api/index.html


13/26

El lenguaje processingCdigo processing

(.pde)

Cdigo Java(.java)

bytecode(.class)

JVM

(Java Virtual Machine)

Preprocesador(processing)

Compilacin(javac)

Ejecucin


14/26


Variablestype name;

Tipos bsicos

byte,short,int(178), long(8864L), float(37.266F),double(37.266/26.77e3), char(c), boolean(true/false)

Arraysbyte[ ] array;

Inicializacintype name = value;

Constantesfinal type variable = value;


15/26


Aritmticos: +,-,*,/,%,++,-- Relacionales: >,>=,


16/26

El lenguaje processing Delimitadores de bloque: { instrucciones; } while:

while ( expr ) { instrucciones }

do { instrucciones } while ( expr )

forfor ( begin; end; inc ) {instrucciones }

if/elseif ( expr ) {instrucciones }

if ( expr ) {instrucciones } else { instrucciones }

switchswitch ( var ) { case val: instrucciones default: }

Saltos: break, continue,return


17/26

El lenguaje processing Comentarios:

// Este comentario va hasta el final de lnea

/* Este comentario es

multilnea */

Funciones:tipo_retorno nombreFuncin(lista de parmetros)

Si se definen funciones propias en processing, se est obligado adar implementacin al menos a la funcin predefinidasetup()


18/26


Ejemplo:

void setup()// Funcin que se ejecuta al principio

{size(100, 100);

dibujaLinia(5);

}

void dibujaLinia(int x) // Funcin propia{

line(x, 0, x, 99);}


19/26

El lenguaje processing Strings:

String mensaje = hello; String mensaje = hello + bye;

Gran cantidad de mtodos:

length()

Acceso a un carcter:charAt() substring() Modificacin:

concat(),replace(),trim(),toLowerCase(),etc. Bsqueda:indexOf(), lastIndexOf(), etc. Comparacin: startsWith(), endsWith(),

compareTo(), etc. etc.

Ejemplos:String mensaje = hello+ bye;

int len = mensaje.length();int len = hello.length();


20/26


Un array en processing(Java) es un objeto: Su longitud puede conocerse mediante el atributo length Ejemplos:

int[] vector; // vector es nullvector = new int[3]; // creamos 3 componentesint len = vector.length; // Longitud = 3int item = vector[2]; // acceso a una componente

int [][] matriz = new int[4][4];

matriz[0][0] = 12; // Matrices


21/26

El lenguaje processing Cuales son las diferencias de processingcomo lenguaje

respecto a Java ? El preprocesador de processingnos permite usar en

general una sintaxis ms relajada

Permite el modo bsico: sin funciones propias, nicamentevariables globales y directamente lneas de cdigo

Permite programar a la C, definiendo nuestras propiasfunciones, sin tener que definir clases y mtodos

Permite definir y usar clases, con una sintaxis de clasesms sencilla que despus es transformada a completasclases Java

Los modos bsico y a la C, las variables globales etc. sonposibles en processinghaciendo que el preprocesador lasintegre en una clase (de forma transparente al

programador)


22/26

El lenguaje processing Ejemplo en modo bsico (I)

// Programa mnimo en processingline(0,0,50,50);

Ejemplo en modo bsico (II)

// Tambin variables y otros elementos ...int i;background(0); // pantalla a negrostroke(255); // trazo de color blancofor (i = 0; i


23/26

El lenguaje processing Ejemplo a la C:

// Si definimos funciones o clases propias, hay que// dar implementacin a setup()void setup()

{ size(100,100); // Tamao de ventana de la aplicacin noFill(); // Sin relleno en los crculos}

void draw() // Se repite a cada frame{ dibujaCirculoAleatorio();}

void dibujaCirculoAleatorio(){ int r = int(random(50)); // Color del trazo stroke(random(255), random(255), random(255)); // Crculos con posicin, radio y color aleatorios ellipse(random(100), random(100), r, r);}


24/26

El lenguaje processing Clases

void setup(){ size(100,100); // Tamao de ventana de la aplicacin noFill(); }

void draw() // Se repite a cada frame{ Circulo c = new Circulo(); c.dibuja();}// Clase crculoclass Circulo{ // Atributos int r = int(random(50)); int x = int(random(100)); int y = int(random(100)); color c = color(random(255), random(255), random(255)); // Mtodos void dibuja() { stroke(c); ellipse(x, y, r, r); }}


25/26

Prctica 1-1 Desarrollar un programa en processingque permita dibujar polgonos de n

lados. Para ello hay que implementar una funcin poligon con los siguientes

parmetros: centro (dos enteros), radio (entero) y nmero de lados delpolgono (entero)

Informacin de inters para su desarrollo: Lo primero es implementar la funcin setup, donde se puede

definir el tamao de ventana, p.e. size(500,500), y acontinuacin invocar a la funcin poligon

La funcin poligondeber trazar el polgono utilizando:

Las funciones trigonomtricas sin()y cos()cuyosargumentos se exigen en radianes La funcin line(x1, y1, x2, y2)que traza una

lnea de (x1, y1) a (x2, y2) El (0,0) est situado en la esquina superior izquierda (las x

positivas hacia la derecha, las y positivas hacia abajo)

Constantes predefinidas como PIy TWO_PI


26/26

Prctica 1-2 Desarrollar un programa en processingque permita dibujar un gradiente de color, de

forma que la primera fila de la ventana se dibujar de un color de partida y la ltimafila de un color de destino. Las filas intermedias se dibujaran de forma que llevarn acabo una graduacin lineal de colores entre las dos filas inicial y final.

Para ello hay que implementar una funcin gradientcon los siguientes

parmetros: 6 enteros; los primeros 3 son los valores RGB del color de partida (de0 a 255), los otros tres los valores RGB del color de destino Informacin de inters para su desarrollo:

Lo primero es implementar la funcin setup, donde se puede definir eltamao de ventana, p.e. size(500,500), y a continuacin invocar a lafuncin gradient

La funcin gradientdeber trazar el gradiente utilizando:

Interpolacin lineal de cada component de color Las variables widthy heightnos devuelven en todo momentoel ancho y alto de la ventana de la aplicacin

La funcin line(x1, y1, x2, y2)que traza una lnea de(x1, y1) a (x2, y2)

La funcin strokeque permite cambiar el color del trazo de laslneas, donde sus 3 argumentos son los valores RGB de la lnea

processing spa 1

Documents

qu processing

mobil processing spa

java sencillo

java est disponible

aplicaciones grficas

aplicaciones listas

d core graphics system

aplicacin java pura