PROCESSING
Processing es un lenguaje de programación y entorno de desarrollo integrado de código
abierto basado en Java, que sirve como medio para la enseñanza y producción de
proyectos multimedia e interactivos de diseño digital. Es desarrollado por artistas y
diseñadores como una herramienta alternativa al software propietario. Puede ser utilizado
tanto para aplicaciones locales como para aplicaciones en la web (Applets).
• Puede utilizarse bajo los sistemas operativos Windows y GNU/Linux.
• Se descarga de manera gratuita.
• No requiere acceso a internet una vez instalado el programa en el equipo.
• URL para descargar el programa: [Link]
► Descarga del programa
La descarga del programa se puede realizar desde la página [Link] Elegir
la opción Download Processing.
La versión utilizada para la elaboración de este tutorial es 3.0
Una vez descargado el archivo será necesario descomprimirlo para comenzar a utilizarlo.
► Acceder al programa
Una vez descomprimido el programa, abrir el archivo processing.
► Interfaz de Processing
1. Barra de menú
2. Barra de herramientas. Cuenta con los botones de acciones más comunes.
a. Ejecutar (Run). Corre el sketch, compila el código y abre una nueva ventana.
b. Detener (Stop). Termina el sketch que se ejecuta.
3. Solapas (Tabs). Permiten manejar los archivos
4. Gestión de pestañas o solapas
5. Editor de texto. Área de escritura de código.
6. Área de mensajes. Muestra mensajes mientras se guarda y exporta.
7. Consola y Errores. Muestra mensajes de acciones o bien de error.
► Ubicación de coordenadas
Un elemento a tener en cuenta al momento de ubicar objetos en pantalla es que las
coordenadas 0,0 se encuentran en el extremo superior izquierdo de la ventana.
(0,0)
► Comenzar nuevo proyecto
Para comenzar un nuevo proyecto, elegir del menú Archivo la opción Nuevo o
presionar la combinación de teclas CTRL + N. Se verá a continuación la siguiente
ventana:
► Colocar comentarios
El programa permite colocar dos tipos de comentarios:
// Este comentario va hasta el final de línea
/* Este comentario es
multilínea */
► Instrucciones para dibujar
• Establecer color
(r,g,b)= rojo (red), verde (green) y azul (blue). El valor de color varía desde 0 a 255,
mientras más se acerca al 255 más se acerca al color.
• Color de fondo de la aplicación
background(r,g,b);
background(color);
• Color de línea y borde
stroke(r,g,b);
stroke(color);
• Punto en pantalla con el color de stroke
point(x,y);
• Línea entre dos puntos de coordenadas (x1,y1) y (x2,y2)
line(x1,y1,x2,y2);
• Rectángulo
rect(x1,y1,ancho,alto);
• Color de relleno
fill(r,g,b);
fill(color);
• Alto y ancho de pantalla
size(ancho,alto);
► Ejemplo en modo básico
Se dibujará un rectángulo dentro de una pantalla de 400x200, con fondo blan- co. El
rectángulo tendrá borde color verde y relleno rojo.
size(400,200); //tamaño de pantalla ancho 400x200 de alto.
background(255,255,255); //color de fondo de pantalla blanco.
stroke(0,255,0); //borde de rectángulo verde.
fill(255, 0, 0); //relleno de rectángulo rojo.
rect(30, 20, 50, 40); //rectángulo ubicado en 30 del eje X y 20 del Y, con un ancho de 50
y alto de 40.
Luego de ingresar los comandos, presionar el botón Ejecutar para compilar el programa
y mostrar el resultado en una nueva ventana:
► Funciones
Una función puede definirse como un conjunto de instrucciones que permiten procesar
las variables para obtener un resultado.
Este modo llamado continuo se basa en dos construcciones: setup y draw.
• la función setup: se ejecuta una única vez cuando se inicializa el programa. Se
utiliza para deinir las propiedades iniciales del ambiente como el color de fondo,
cargar imágenes, inicializar variables. Sólo puede existir una función setup por
sketch.
• la función draw: se ejecuta continuamente y es utilizada para dibujar ele- mentos
en pantalla. El número de veces que la función draw es ejecutada puede ser
controlado por la función delay o suministrando el número de marcos por segundo
con la función framerate. También es posible ejecutarla una sola vez incluyendo la
llamada a la función noLoop en setup.
Ejemplo en modo continuo
void setup () { //abre la función setup
size(400, 300); //tamaño de pantalla ancho 400x300 de alto
noStroke(); //sin borde de rectángulo.
background(0); //color de fondo de pantalla negro, pone 0 es igual a Ω(0,0,0).
fill(255, 0, 0); //relleno de la esfera rojo.
noLoop();//quiere decir que la esfera se repita indeinidamente
}//cierra la función setup
void draw(){ //abre la función draw.
circles(int(random(400)),int(random(300)),int(random(50))); //le pido que di- buje círculos
en ubicación y radio aleatorias (random).
}//cierra la función draw.
void circles(int x, int y, int r)//crea la función círculo y sus variables de ubicación (x,y)y
radio(r)
{//abre función.
ellipse(x,y,r,r);//crea la elipse de ubicación x,y y radios r,r.
}//cierra función.
Al ejecutar el procedimiento se obtiene:
Para que la función se repita indefinidamente, desactivar la orden noLoop.
Así se obtendrá:
► Guardar un proyecto
Una vez inalizada la actividad, el proyecto debe ser guardado. Elegir del menú
Archivo la opción Guardar como… Indicar a continuación el nombre del proyecto.
Puede observarse que al guardar el programa, el nombre de la solapa se modiica.
► Abrir un proyecto
Para continuar un proyecto guardado con anterioridad, se debe elegir del menú Archivo la
opción Abrir… o bien presionar la combinación de teclas CTRL+O. Se- leccionar la
carpeta donde se encuentra el trabajo guardado.
► Importar librería
Una librería es un conjunto de subprogramas que complementan las posibilidades del
programa.
Al descargar el programa Processing, el mismo viene con algunas funcionalidades.
Pero al agregarle librerías realizadas por diversos desarrolladores, las posibilidades del
programa aumentan y permiten mayores prestaciones.
Descargar la librería elegida de la página [Link]
Copiar la biblioteca descargada dentro de la carpeta C:\Archivos de Programa\
processing-3.0\modes\java\libraries.
Desde el proyecto de Processing que se encuentra abierto importarla eligiendo del menú
Sketch la opción Importar biblioteca… Seleccionar a continuación la librería.
Una vez importada, se verán al inicio las cuatro líneas de código indicando las librerías
cargadas.
► Agregar una imagen como fondo
En primer lugar abrir la carpeta donde se encuentra guardado el proyecto Documentos\
Processing\Nombre del proyecto. Dentro de la carpeta solo se encuentra el archivo .pde.
Ubicar en otra ventana la imagen que se desea agregar y arrastrarla al proyecto abierto.
Puede observarse en la parte inferior de la ventana el mensaje Un archivo añadido al
sketch.
En la carpeta del proyecto se incorporó la carpeta data dentro de la cual se en- cuentra la
copia de la imagen.
La imagen se agregará ahora al proyecto. En el siguiente ejemplo se mostrará como
imagen de fondo.
Se debe tener en cuenta dentro de las propiedades de la imagen su tamaño.
Este tamaño debe ser igual o menor al tamaño de la ventana que se indica en la orden
size.
A continuación se indica el código para llamar la imagen:
PImage foto; //Se declara la variable del tipo PImage y de nombre foto.
void setup(){
size(397,488);// tamaño de la pantalla que debe ser mayor o igual al tamaño de la imagen.
foto=loadImage (“[Link]”); //Carga la imagen. Se escribe entre comillas el nombre
completo de la imagen.
background (255,0,0); //Cambia el color de fondo. Solo se verá el color si la imagen es de
menor tamaño
}
void draw(){
image(foto,0,0); //Dibuja la cara en la posición 0,0 que se encuentra en el extremo
superior izquierdo.
}
Se obtiene como resultado:
