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
    .