En esta práctica ya vamos a generar nuestro primer programa. Será sencillo pero supondrá el pistoletazo de salida para empezar práctica tras práctica, a generar programas cada vez más complejos y atractivos.

Lo primero es conocer la estructura de los programas en Processing. En su casi totalidad se componen de dos funciones o bloques cuyos nombres son siempre así:

void setup() y void draw()

estructura de un programa en processing

Por otra parte, es obligado comentar que en todo lenguaje de programación es muy recomendable comentar el código. Esto es debido a que en muchas ocasiones no es muy intuitivo, se le puede olvidar ciertos detalles al propio programador al cabo del tiempo, o bien para facilitar la lectura del código a otros programadores (cosa muy normal ya que los grandes programas suelen ser fruto del trabajo en equipo de numerosas personas a lo largo del tiempo, con las habituales mejoras y actualizaciones).

Para hacer comentarios de una línea se debe iniciar el comentario con //

Ejemplo:

//variable media: media de notas de alumno

Para hacer comentarios de más de una línea, se debe comenzar el comentario con /*, y finalizar con */

Ejemplo:

/* Esta línea de código genera un número aleatorio entre 1000 y 100.000 */

Processing es un lenguaje de programación muy visual (de hecho es muy utilizado por profesionales del diseño y las Artes Plásticas precisamente por ello) por lo que debemos tener bien claro cómo utiliza las coordenadas en el plano a la hora de dibujar. Veámoslo en la siguiente imagen:

sistema de coordenadas en processing

Luego como podemos ver, todo programa en Processing donde utilicemos el entorno gráfico, pasa por definir una ventana o lienzo donde va a transcurrir la acción del programa. Para ello ya hemos visto que debemos utilizar la función:

size(ancho,alto);

Vamos a crear nuestro primer programa para crear una ventana o lienzo de 500 pixeles de ancho y 300 de alto:

primer programa processing

Processing llama por defecto a los programas generados “sketch”. Por eso el nombre que le asigna es sketch_XXXXXXX (donde las XXXXX son un número). Nosotros podemos asignarle otro nombre más intuitivo como “Miprimerprograma”, pinchando en:

Archivo->Guardar como…

…dándole la ubicación y nombre deseados.

Ahora no tenemos más que pinchar en el icono de “Ejecutar” y ver el resultado del programa:

primer programa de processing ejecutado

…y observamos cómo nos ha generado la ventana o lienzo con las dimensiones deseadas.

TAREAS

  1. Dibujar un lienzo de 500 de ancho y 500 de alto.
  2. Dibujar un lienzo de 100 de ancho y 400 de alto.
  3. Dibujar un lienzo de 400 de ancho y 200 de alto.