Processing

Listado 2.1

ellipse(50, 50, 50, 50);

void setup(){
  size(720,220);
}

void draw(){
  if(mousePressed){
  fill(0);

  } else {
  fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

Como todas las aplicaciones, Processing tiene una serie de menús en la parte superior de vamos a ver rápidamente para no dejarnos nada en el tintero. Comenzamos con el Menú Archivo.

Menú Archivo
· Nuevo: Crea un nuevo Sketch en blanco.
· Abrir…: Abre uno de tus Sketch en el disco duro.
· Recientes: Te muestra los programas más recientes que has guardado en tu disco duro.
· Sketchbook: El lugar donde guarda tus archivos Processing de manera predeterminada.
· Ejemplos: Un listado con programas de ejemplo para inspirarte.
· Cerrar: Cierra el Sketch.
· Guardar: Guarda tu Sketch.
· Guardar como…: Guarda el Sketch actual con otro nombre.
· Exportar Aplicación: Te permite exportar tu Sketch como aplicación de escritorio para Windows, iOS o Linux.

· Configurar página: Sirve para configurar tu documento en la impresora.
· Imprimir…: Imprime tu documento en papel.

Cuando elegimos la opción Exportar Aplicación se nos abre un menú donde podemos indicar para qué plataforma queremos exportarla, Windows, Mac OS X o Linux. También nos da la opción si queremos que la aplicación se reproduzca a pantalla completa.

Para asegurarnos que la aplicación correrá en el ordenador del cliente, Processing nos da la opción de incrustar Java con nuestro programa. (Sólo para Mac OS X).

El menú editar es muy parecido al de cualquier editor de texto con algunas pequeñas diferencias.

· Deshacer nos permite ir deshaciendo los últimos pasos realizados.
· Rehacer es lo contrario que deshacer. Nos permite avanzar sobre los pasos deshechos.
· Cortar corta el texto seleccionado, lo borra y lo guarda en memoria.
· Copiar copia el texto seleccionado y lo guarda en memoria.
· Copiar como HTML nos permite copiar un texto y le añade formato HTML para poder copiar nuestro código en una web.
· Pegar el texto que tenemos guardado en la memoria.
· Autoformato tabula y organiza automáticamente nuestro código para que sea más legible.
· Comentar/Descomentar el texto seleccionado. Sirve para que el compilador no procese el texto seleccionado.
·Aumentar indentación Aumenta la tabulación.
· Reducir indentación Reduce la tabulación.
Buscar… nos permite buscar una palabra en nuestro código.
Buscar siguiente Añade otra búsqueda
Buscar anterior Vuelve sobre una búsqueda anterior.
Usar selección para buscar busca el texto que tengamos seleccionado en todo nuestro código.

El menú Sketch contiene las siguientes opciones:

· Ejecutar: compila nuestro código y lo presenta en la ventana de visualización. Es lo mismo que pulsar el botón “PLAY”.

· Presentar: Es una presentación a pantalla completa, pero nuestro programa seguirá manteniendo el tamaño que le dimos en el código. En Processing 3 existen nuevas funciones que estudiaremos con detenimiento más adelante para poder modificar el tamaño de nuestra reproducción de manera interactiva, pero Presentar seguirá representando el tamaño que le hayamos especificado en la función size() y rellenará el resto de nuestra pantalla de color gris oscuro.

· Tweak: Es una novedad en Processing 3. Aunque existía en Processing 2 como modo de reproducción que podías importar, ahora está integrado dentro de la aplicación. El modo Tweak nos permite modificar los valores incluidos en void draw(){…} de manera interactiva mientras la aplicación está corriendo, cuando terminemos de editar y pulsemos el botón “STOP” o Detener, Processing 3 nos preguntará si queremos salvar los cambios realizados o volver a la versión anterior.

· Detener: Equivale a pulsar el botón “STOP” y detiene la reproducción de nuestra aplicación.

· Importar biblioteca… Este menú también ha sufrido mejoras en la versión de Processing 3, ahora están integrados en el mismo:

-Libraries
-Modes
-Tools
-Examples

 la importación de bibliotecas, (libraries) nos permite ampliar las capacidades de Processing, los modos (Modes), determinan en qué modo correrá nuestra aplicación –por defecto lo hace en Java–, pero aquí podemos elegir que lo haga en Android, CoffeScript, JavaScript, etc…
___________________________________________________________________________
*NOTA: El modo JavaScript parece que en esta versión 3 de Processing dejará de funcionar, decantándose definitivamente por p5.js

p5.js es una biblioteca de javaScript que nos permite escribir código Processing en la web. La estudiaremos con mayor detenimiento durante el Taller y probaremos algunos ejemplos en páginas web.
___________________________________________________________________________

Tools también amplia las capacidades de Processing con herramientas de terceros, desde selectores de color, que no facilitan la elección de colores y su traducción a colores hexadecimal, RGB o HSB, a una herramienta para crear archivos de video.

Examples te permite descargar los códigos de ejemplos de los libros más populares de Processing.

· Mostrar carpeta de sketches: Por defecto, Processing guardará las bibliotecas, los archivos de ejemplo y los programas que hemos creado en una carpeta situada en tu carpeta de Documentos (Mac). Si quieres ver su contenido utiliza esta opción.

· Añadir archivo: sirve para añadir archivos multimedia a nuestro programa. Cuando pulsamos esta opción Processing nos abre el gestor de archivos para que le indiquemos qué archivo queremos añadir a nuestro Sketch. De manera automática Processing genera una carpeta que denomina data dentro del sketch y guarda una copia del archivo que le hemos indicado. Imágenes, audio, etc, se suelen guardar en esta carpeta.

· Por último, si tenemos varios archivos de Processing abiertos, al final del menú Sketch, tenemos la opción de seleccionar el Sketch en cual queremos trabajar.

Activar/Desactivar depurador: Activa o desactiva el depurador. Ten en cuenta que el botón PLAY cambiará a Depuración. Aparecerán nuevos botones, Depurar, Saltar, Continuar, Detener, aparte de una ventana separada para la visualización de los valores de las variables.

Continuar: Avanza el código hasta el siguiente punto de interrupción

Saltar: Avanza una línea de código cada vez. (Tenga en cuenta que una vez que el código llega al final de la llamada de función actual, el depurador volverá a “seguir”).

Ingresar: Avanza el depurador en el interior de una llamada de función. Esto sólo funciona àra las funciones definidas por el usuario en el Sketch.

Salir: Avanza el depurador exterior de una función al área de llamadas. Esto funciona para las funciones definidas por el usuario en el boceto.


Activar/desactivar punto de interrupción: Agrega o elimina un punto de interrupción. Cuando se añade un punto de interrupción, el número de línea se sustituye con el símbolo: <>
________________________________________________________________________________
*NOTA: Cuando estemos realizando programas más avanzados, veremos cómo funciona el depurador con detenimiento y realizaremos algunos ejercicios prácticos para sacarle el máximo partido. Observa que un nuevo botón ha sido añadido a la interface que equivale a Activar/Desactivar depurador.
________________________________________________________________________________

El menú Herramientas de Processing tiene los siguientes elementos:

· Crear fuente… Convierte fuentes dentro de un formato comprensible por Processing (VLW) y las añade a nuestra carpeta de Sketch. Al pulsarlo abre una caja de diálogo que te permite elegir fuente, su tamaño, si queremos aplicar anti.aliased (smooth) y qué caracteres queremos generar. La cantidad de memoria requerida para la fuente será determinada por su tamaño, y los caracteres que incluiremos en ella. Las fuentes de Processing son tratadas como imágenes, cuanto mayor sea su tamaño, mayor cantidad de recursos consumirá. Las fuentes también pueden ser creadas en el código con la función createFont().

· Selector de colores… Abre un interface para seleccionar colores de manera visual. Para cada color, los valores HSB, RGB y Hexadecimal son mostrados. Los valores hexadecimales pueden ser copiados directamente en nuestro código con el botón Copiar.

· Archivar sketch Archiva una copia de la versión actual de nuestro documento en formato comprimido .zip. El archivo es guardado en la misma carpeta que se encuentre nuestro sketch.

· Instalar “processing-java” instala el programa de Processing-java lo que te permite ejecutar Procesamiento, en el modo de Java, desde la línea de comandos. Hay dos opciones de instalación: la instalación del programa dentro de su directorio home de usuario local: permite a todos los usuarios acceder al sistema o definida por el usuario en todo el sistema (que requiere una contraseña administrativa).

· Creador de películas crea películas de QuickTime desde una secuencia de imágenes. Las opciones incluyen el tamaño, frame rate, compresión y también puedes incluir un archivo de audio.

––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Si tienes instaladas herramientas de terceros aparecerán a continuación, como en la imagen superior, que aparecen cuatro herramientas extras.
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

· Añadir herramienta… abre un menú contextual, (En Processing 3, el mismo menú con el que instalar las librerías, donde podrás instalar nuevas herramientas de terceros para ampliar las capacidades de Processing.

El menú ayuda contiene los siguientes elementos:

· Bienvenida a Processing 3: te proporciona información de las novedades incluidas en la versión 3 de Processing.

· Entorno: te proporciona información del entorno de programación con Processing (este capítulo) dentro de la web de Processing.

· Referencia: abre la página oficial de Processing con la referencia a las funciones. Incluye referencias al lenguaje, entorno de programación y bibliotecas.

· Buscar en referencia: seleccionando un elemento en el editor de textos de processing y seleccionando Buscar en referencia abre la página de dicho elemento en tu navegador. Muy útil cuando necesitas saber qué tipo de datos o la cantidad de datos necesarios de una función en concreto.

· Referencia de Bibliotecas: cuando instales Bibliotecas de terceros, desde aquí podrás entrar en su manual, para saber cómo funcionan y sacarles el máximo partido.

· Referencia de Herramientas: del mismo modo, cuando instales herramientas de terceros, desde aquí podrás entrar en su web y aprender cómo funcionan.

· Primeros pasos: abre una página oficial de Processing dónde aprenderás lo básico para comenzar a programar.

· Resolución de problemas: Una página dónde poder solucionar diferentes problemas a la hora de instalar o ejecutar Processing.

· Preguntas frecuentes: Un listado con las preguntas más frecuentes de los usuarios de Processing.

· The Processing Foundation: Abre la página web de la Fundación de Processing. Fundada en 2012 con la doble misión de la alfabetización de software dentro de las artes visuales, y la alfabetización visual dentro de los campos relacionados con la tecnología.

· Visitar Processing.org: abre la página oficial de Processing.

En el menú Processing podemos acceder a las Preferencias:

El entorno de desarrollo de Processing (PDE) es altamente configurable. Las preferencias más comunes se pueden modificar en la ventana de Preferencias, que se encuentra en el menú archivo en Windows y Linux y en el menú Processing en Mac OS X. La lista completa de preferencias se guarda en el archivo “preferences.txt”. Este archivo se puede abrir y editar directamente sólo cuando Processing no se está ejecutando. Puedes encontrar este archivo es tu ordenador mediante la lectura de la esquina inferior izquierda de la ventana de Preferencias.

· Sketchbook location: cualquier carpeta puede ser usada como Sketchbook. Introduce una nueva localización o selecciona “Buscar” para seleccionar la carpeta que quieres utilizar.

· Idioma: Selecciona el idioma a usar en los menús. Necesitarás restaurar Processing para que se haga efectivo.

· Fuente de consola y el editor: Elige una fuente de texto para tu editor de textos y la consola.

· Tamaño de letra en el editor: aquí puedes cambiar el tamaño de letra en el editor.

· Tamaño de letra en la consola: aquí puedes cambiar el tamaño de letra en la consola.

· Color de fondo en modo presentación: Elige el color de fondo con el que se rellenará la pantalla en el modo de Presentación, entre el tamaño de tu sketch y tu resolución de pantalla.

· Usar texto suavizado en la ventana del editor: por defecto está opción está activa. Necesitarás reiniciar Processing para ver los cambios.

· Habilitar el ingreso de caracteres complejos: te permite escribir en Japonés, Hebreo, y otros lenguajes. Necesitarás reiniciar Processing para ver los cambios.

· Comprobar errores de forma continua: Processing evalúa de forma continua nuestro programa y nos avisa de los errores potenciales en nuestro código.

· Autocompletado de código Ctrl-espacio: Es una de las novedades de Processing, pero aún no he conseguido entender cómo funciona. En la web dicen que lo explicarán en breve.

· Sugerir declaraciones de importación: Esta opción tampoco viene explicada en la web y no he conseguido saber para qué sirve.

· Aumentar memoria máxima disponible: Esta opción nos permite limitar la cantidad de memoria máxima que utilizará Processing.

· Eliminar directorio anterior al exportar: cuando está marcada (comportamiento predeterminado) Processing elimina la carpeta completa de exportación antes de volver a crearla y añade los nuevos medios que hayamos añadido.

· Comprobar actualizaciones al iniciar: Busca online si existen nuevas versiones de Processing para descargar.

· Ejecutar sketches en la pantalla: si estás trabajando con más de un monitor, Processing te permite elegir uno para ejecutar tus sketches.
  

Estamos a punto de comenzar a disfrutar la versión 3 de Processing. La última que me he podido descargar es una versión beta 6 que ya está muy cerca de la definitiva.

Os comento las novedades.

Los principales cambios
· Renderizado reconstruido – OpenGL (P2D y P3D) más rápidas. Algunas mejoras de rendimiento también en Java2D. El nuevo procesador FX2D ofrece enormes aceleraciones para el dibujo 2D, especialmente con alta densidad de las pantallas de “retina”.

· Nuevo editor – La ventana principal del editor incluye ahora:

– Autocompletar! (se puede activar en Preferencias).
– Un depurador fácil de usar completo.
– Modo Tweak se ha incorporado.

· Nueva interfaz – Todavía no está terminada, pero la interfaz de usuario está experimentando un cambio de imagen importante.

· Soporte para pantallas de alta resolución – Nuevos métodos pixelDensity() y displayDensity() hacen que sea más fácil para crear bocetos que funcionarán bien en alta-resolución (“Pantallas de Retina”). Suena simple cuando se pone así, pero esta es una oferta muy grande.

Manager unificado de Contribuciones – Solíamos tener ventanas separadas para la instalación de bibliotecas, modos, y herramientas. Ahora una sola ventana “Administrador de Contribuciones” nos ayuda a gestionar la instalación y actualización para todas estas contribuciones de terceros, además de … Los ejemplos!

Sketchbook Migración – Si tienes un (2.x) sketchbook, 3.0 te preguntará si deseas crear un nuevo, sketchbook 3.0-específica, o compartir el existente.

Cosas que pueden romper su Bocetos 2.x
· No utilices variables en size() –  Si tienes que cambiar el tamaño de tu skecth, utiliza la nueva función  surface.setSize (w, h) que es el único camino (seguro) para alterar el tamaño de tu skecth. Una breve demostración en la que puedes cambiar el tamaño y cada vez que pulsas una tecla modifica el tamaño de la ventana aquí abajo:

void setup() {
  size(400, 400);
  surface.setResizable(true);
}

void draw() {
  background(255);
  line(100, 100, width-100, height-100);
}

void keyPressed() {
  surface.setSize(round(random(200, 500)), round(random(200, 500)));
}

· Applet se ha ido – java.awt.Applet de Java ya no es la clase base utilizada por PApplet, por lo que cualquier boceto que haga uso de métodos de subprograma específico (o asumen que un PApplet es un objeto de componentes de Java AWT) tendrá que ser reescrito.

· Smooth() sólo vez – Smooth() y noSmooth() sólo se puede utilizar en setup(), y sólo una vez por cada sketch. Ten en cuenta que Smooth() se ha activado de forma predeterminada desde 2.x, por lo que es poco probable que lo necesites usar.

Nuevo
· Se ha incorporado un nuevo renderizador FX2D que a mejorado mucho el rendimiento de gráficos 2D. Tiene muchas mejoras sobre el procesador predeterminado, aunque parece que aún tiene algunos problemillas, así que no está activo como predeterminado.

· Nuevo método fullScreen() resulta más fácil de ejecutar, así que Processing 3 dispone de modo a pantalla completa.

· La clase PVector ahora es compatible con los métodos de encadenamiento.

· SVG Export funciona igual que PDF Export.

· Un nuevo método settings() que se llama detrás de las escenas. La mayoría de los usuarios nunca utilizarán esto, pero si estás utilizando Processing sin su preprocesador (es decir, Eclipse o un entorno de desarrollo similar), puedes poner cualquier llamada al size(), fullScreen, smooth(), noSmooth (), y pixelDensity () en ese método. Puede encontrar más información en la referencia.

· Nuevo icono de aplicación.

Cambios
· Las bibliotecas de vídeo y de sonido ya no se incluyen en la descarga (porque han crecido demasiado grande) y deben instalarse por separado. Uso Sketch → Importar → Añadir Biblioteca Biblioteca … para instalar cualquiera de ellos.

Eliminado
Un montón de fallos.

Aplicaremos las nuevas funciones a lo largo de infinidad de ejercicios en nuestro Taller de Programación Creativa con Processing, ahora en su versión 3.