Iniciamos hoy  una nueva serie de artículos cuyo objetivo es orientar un poco a nuestros estudiantes al mundo de la programación dentro de nuestro entorno educativo, dependiente de la actual legislación española, donde se hacen muchísimas referencias mediante criterios de evaluación y estándares de aprendizaje a las capacidades que el alumno debería desarrollar, pero desde la que se dan muy pocas directrices sobre los procedimientos a seguir o los contenidos que habría que trabajar.

Lo que os vais a encontrar aquí es un conjunto de conceptos concretos relacionados con la programación informática en general, acompañados de ejemplos prácticos que os ayudarán a entender la teoría que vayáis leyendo, utilizando un lenguaje con una curva de aprendizaje muy suave, con mucho potencial visual y que además puede utilizarse en varias plataformas: Processing.

 Según su página, www.processing.org , Processing supone un entorno de programación flexible y un lenguaje orientado a aprender a programar en el contexto de las artes visuales. Yo añadiría que, como lenguaje de programación, es muy sencillo y rápido de aprender, de modo que nuestros alumnos pueden comprobar de modo inmediato el efecto de las órdenes que van tecleando, al tiempo que les anima a experimentar con sus propias modificaciones, fomentando así un ambiente de aprendizaje significativo.

Así que vamos a iniciarnos en el conjunto de conceptos teóricos que se suelen explicar en programación (declaración de funciones, variables, retorno de valores, etc...) utilizando Processing como herramienta práctica. Podéis descargaros la última versión en la página de Processing:

 Una vez lo hayáis descargado y extraído en una carpeta de vuestra elección, podéis ejecutarlo fácilmente.

Primeros pasos con Processing.

Cuando arranque Processing por primera vez, te encontrarás una pantalla como ésta:

Como puedes ver,  he señalado cuatro zonas concretas de la ventana que se te abre:

1. La zona principal, donde escribes tu código
2. Lo que he denominado "Modo de salida" se refiere al modo en que quieres que Processing interprete tu código. La salida por defecto es "Java", que hará que tu código se ejecute como tal, en una ventana que se abrirá en cuanto pulses "Play".
3. El botón Play, obviamente, ejecutará tu código.
4. Aunque puedes cerrar simplemente la ventana que se te abra al darle al Play, el botón Stop está pensado para que cierres la ventana cuando quieras terminar la ejecución del programa.

Estamos a punto de empezar a programar, pero antes tienes que saber que:

• No debes olvidar cerrar todos los comandos que introduzcas con el punto y coma ; de lo contrario, al ejecutar la consola te dará un error.
• Una rutina/función (después aclararemos esto) es un conjunto de instrucciones que se ejecuta en orden, una detrás de otra. Las órdenes de una rutina van entre llaves {}. En Processing debe haber, en principio, dos grandes rutinas: setup (que ejecutará UNA SOLA VEZ las instrucciones que especifiques entre sus llaves) y draw (que ejecutará en bucle las órdenes que introduzcas, esto es, cuando llegue a la orden final, volverá a empezar por la primera, y así varias veces por segundo, hasta que interrumpas el programa con stop.
• Tanto setup como draw van precedidas de la palabra void, que viene a significar que son funciones que no van a retornar valores. También van seguida de paréntesis vacíos, ( ), lo que significa que no necesitan parámetros para ejecutarse. No te preocupes de momento, tiempo habrá de complicarse la vida.
• Los comentarios van precedidos de //, no son ejecutados por el intérprete de comandos y se ponen, simplemente, para dar información a cualquiera que lea el programa.

¿Estás listo pues?. ¡Creemos entonces nuestro primer programa!. Para ello, teclea:

void setup(){
//No hago nada
}
void draw(){
//Aqui tampoco hago nada
}

Si así lo hicieres, el Dios de la Informática te lo premiare con una ventanita como ésta:

Ridículo, ¿verdad?. ¿Qué ha pasado?. Pues nada. Has introducido un código vacío (salvo los dos comentarios), así que Processing se limita a crear la mínima ventana posible, y arreando. ¿Qué querías que saliera?, ¿el Call of Duty?. Aún te queda mucho, joven Padawan.

Vamos a empezar a introducir nuestro propio código con dos comandos:

• size(x,y): Indica el tamaño de la ventana, de x píxeles de ancho por y píxeles de alto. Por ejemplo, size(800,600); abriría una ventana de 800x600
• background(rojo,verde,azul); indica el color de que queremos pintar el fondo de la ventana. Pondremos valores entre 0 (nada) y 255 (color a tope) para indicar la cantidad de rojo, verde y azul que participarán en el color de salida. Por ejemplo, background(255,0,0); me daría una ventana roja, mientras que background (255,0,100); me daría un bonito color rosita (rojo a tope, y algo menos de la mitad de azul).

void setup(){
size(800,600);
background(255,255,255);
}
void draw(){
//Aqui tampoco hago nada
}

Este código, por ejemplo, te devolverá una pantalla de color totalmente blanco. Yo, personalmente, optaré por esta opción durante la mayor parte de estos artículos, más que nada por claridad de contraste.

Dibujos estáticos y animación.

Una vez que ya sabes dar un tamaño y color de fondo a la ventana, es el momento de aprender más comandos. Para dibujar, debes tener en cuenta que trabajaremos según un sistema de coordenadas x,y, donde el origen de coordenadas será el punto superior izquierdo de la ventana. De izquierda a derecha, la x irá creciendo. De arriba a abajo (contrariamente a como estamos acostumbrados en clase de Mates), es la y la que crecerá. ¡Vamos allá!.

• line(x1,y1,x2,y2); dibuja una linea desde el punto (x1,y1) al punto (x2,y2).
• rect (x,y,ancho,alto); toma como referencia el punto (x,y) y dibuja un rectángulo de las dimensiones que especifiquemos.
• ellipse(x,y,dh,dy); dibuja una elipse con centro en (x,y), de diametro horizontal dh  y diámetro horizontal dy. Si queremos círculos, entonces, rx debe ser igual a ry.

Supongamos, por ejemplo, que tienes una ventana de 800x600; dibujemos las diagonales de la pantalla al mismo tiempo que un rectángulo que contenga a la elipse:

void setup(){
size(800,600); 
background(255,255,255);
}
void draw(){
  line(0,0,800,600);
  line(0,600,800,0);
  rect(350,250,100,100);
  ellipse(400,300,100,100);
}

 Fijaos en el detalle de que al dibujar rectángulo y círculo después de las líneas, éstas se ven tapadas por las dos últimas figuras. Eso es porque el programa está cumpliendo los comandos que le hemos dictado en orden y las figuras son, por definición, opacas. Prueba a cortar y pegar los dos comandos line después de rect y ellipse y verás que ahora las líneas aparecen enteras, por encima de las otras dos figuras.

Por si te interesa, existen dos comandos con dos subvariaciones que te permitirán establecer color de trazo (stroke) y color de rellenado de las figuras (fill), o quitar el trazo (noStroke()), o dibujar figuras huecas (noFill()). ¡Probemos las distintas variaciones en este otro código!:

void setup(){
size(800,600); 
background(255,255,255);
}
void draw(){
  //dibujamos una elipse de trazo rojo y fondo verde
stroke(255,0,0);
fill(0,180,0);
ellipse(400,300,50,100);
//dibujamos un rectangulo de trazo azul y fondo transparente
stroke(0,0,210);
noFill();
rect(400,250,100,75);
//dibujamos un triangulo SIN TRAZO y de fondo rojo
noStroke();
fill(255,0,0);
triangle (350,300,400,300,300,200);
}

Para acabar esta sección, vamos a hablar de lo que se denominan variables de sistema. Aunque hablaremos de variables en el próximo artículo, nos referiremos aquí a ciertos valores que Processing está teniendo en cuenta durante todo su funcionamiento como entorno de programación. Prueba este código sencillito en tu ordenador:

void setup(){
size(800,600); 
background(255,255,255);
}
void draw(){
 line(0,0,mouseX,mouseY);
}

Verás un efecto muy chulo: como draw se ejecuta en bucle varias veces por segundo, verás una serie de líneas que se van dibujando a medida que movemos el ratón. Esto es porque a cada nueva ejecución de draw, las coordenadas mouseX y mouseY están cambiando, de modo que se dibujan líneas desde el origen de coordenadas (0,0), hasta la posición del ratón (mouseX,mouseY) en cada momento:

Prueba este otro ejemplo y mueve el ratón por la pantalla. Yo lo llamo el ojo de Buda:

void setup(){
size(800,600); 
background(255,255,255);
}
void draw(){
 ellipse(400,300,mouseX,mouseY);
}

Como ves, las posibilidades son infinitas. ¿Por qué no pruebas tú tus propios ejemplos?. ¡Seguro que obtienes efectos espectaculares!

Animaciones limpias. Background en setup() o en draw().

Para obtener animaciones limpias, recordemos el principio de los dibujos animados: cuando los vemos en una pantalla, sabemos que son una secuencia de dibujos estáticos que se van superponiendo a suficiente velocidad como para darnos la ilusión del movimiento. Es decir:

1. Ponemos el dibujo 1 durante x décimas de segundo
2. Quitamos el dibujo (borramos)
3. Ponemos el dibujo 2 (muy parecido al dibujo 1) durante x décimas de segundo
4. Quitamos el dibujo 2
5. Etc...

En Processing, lograremos ese mismo efecto poniendo el background(rojo,verde,azul); al principio de la función draw(), en lugar de en setup(); así lograremos que al iniciar de nuevo cada bucle, vuelva a rellenar la pantalla del color de fondo especificado, borrando así lo dibujado durante el bucle anterior.

Un ejemplo: queremos dibujar un círculo de radio 50 que se mueva por pantalla siguiendo las coordenadas del ratón:

void setup(){
  //En setup especificamos solamente el size de la ventana
size(800,600); 
}
void draw(){
  //borramos todo
  background(255,255,255);
  //dibujamos el nuevo circulo
 ellipse(mouseX,mouseY,50,50);
}

¡Ojo! Si pones el background al final de draw, en lugar de al principio, verás que obtienes una pantalla vacía. Esto es así porque invertirías las órdenes: en lugar de borrar lo anterior y luego dibujar, empezarías dibujando y luego borrarías antes de iniciar el siguiente bucle.

¡Y eso es todo por ahora!

Por ahora, creo que cuentas con suficientes conceptos para iniciar tu propio programa en Processing y puedas crear tus propios códigos buscando distintos efectos visuales, iniciándote así mediante la experimentación práctica al razonamiento lógico que exige cualquier trabajo de programación. El próximo día trabajaremos con variables. Si te ha quedado alguna duda, puedes repasar el video-resumen que te pongo a continuación, o también me la puedes plantear en los comentarios.

¡Y eso es todo por hoy!. ¡Sed felices!. ¡Seguid creciendo!. ¡Seguid aprendiendo!. ¡Cultura maker!